Custom attributes and calculations

Custom Properties

CSS custom properties (also known as CSS variables) allow developers to define reusable values in stylesheets and reference them via variable names. Custom properties are declared with a -- prefix and invoked using the var() function. This mechanism greatly enhances the maintainability and flexibility of CSS.

:root {
  --primary-color: #3498db;
  --spacing-unit: 8px;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
}

The scope of custom properties follows CSS cascading rules. Variables defined in :root have global scope, while those defined in specific selectors are only valid within that selector and its child elements. When the same variable name is declared in different scopes, it is overridden according to CSS priority rules.

.container {
  --text-size: 16px;
}
.container.large {
  --text-size: 20px;
}
.container .text {
  font-size: var(--text-size);
}

Custom properties support dynamic updates, enabling interaction with JavaScript for real-time style adjustments. The setProperty method can modify custom property values:

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

Calculation Functions

The CSS calc() function allows mathematical operations within property values, supporting the four basic arithmetic operations. This function is particularly useful for scenarios requiring mixed units.

.sidebar {
  width: calc(25% - 20px);
  margin-right: 20px;
}

The calc() function can be combined with custom properties to create dynamic, responsive layout systems:

:root {
  --base-size: 16px;
  --multiplier: 2;
}

.heading {
  font-size: calc(var(--base-size) * var(--multiplier));
}

Calculation functions support nesting, enabling more complex logic. Spaces around operators are mandatory per syntax requirements:

.container {
  width: calc(100% / 3 - calc(10px + 5px));
}

Combined Applications of Custom Properties and Calculations

Combining custom properties with calculation functions enables the creation of highly flexible design systems. Here’s an example of a responsive grid layout:

:root {
  --grid-columns: 12;
  --gutter-width: 15px;
}

.grid-item {
  --item-span: 3;
  width: calc(100% / var(--grid-columns) * var(--item-span) - var(--gutter-width));
  margin: 0 calc(var(--gutter-width) / 2);
}

This combination is also useful for animations, enabling complex effects based on mathematical calculations:

@keyframes pulse {
  0% {
    --scale-factor: 1;
  }
  50% {
    --scale-factor: 1.2;
  }
  100% {
    --scale-factor: 1;
  }
}

.element {
  --base-size: 50px;
  animation: pulse 2s infinite;
  width: calc(var(--base-size) * var(--scale-factor));
  height: calc(var(--base-size) * var(--scale-factor));
}

Advanced Techniques in Practical Development

Using custom properties and calculations in media queries enables more concise responsive code. Compared to traditional methods, this approach reduces repetition:

:root {
  --base-font-size: 16px;
  --spacing-unit: 8px;
}

@media (min-width: 768px) {
  :root {
    --base-font-size: 18px;
    --spacing-unit: 10px;
  }
}

body {
  font-size: var(--base-font-size);
  margin: calc(var(--spacing-unit) * 2);
}

Custom properties can also facilitate theme-switching functionality. By modifying top-level variable values, entire application skins can be easily toggled:

:root[data-theme="dark"] {
  --bg-color: #333;
  --text-color: #fff;
}
:root[data-theme="light"] {
  --bg-color: #fff;
  --text-color: #333;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Performance Considerations and Best Practices

While custom properties and calculations are powerful, their performance impact should be noted. Overly complex calculations may degrade rendering performance. Here are some optimization tips:

1. Avoid nested calculation functions in animated properties
2. Store infrequently changing computed values in separate variables
3. Limit the scope of custom properties

/* Not recommended */
.element {
  width: calc(calc(100% / var(--columns)) - calc(var(--gutter) * 2));
}

/* Recommended */
:root {
  --column-width: calc(100% / var(--columns));
}
.element {
  width: calc(var(--column-width) - calc(var(--gutter) * 2));
}

The fallback mechanism for custom properties enhances code robustness. When a variable is undefined, a fallback value can be provided:

.element {
  color: var(--undefined-var, #000);
  font-size: var(--undefined-size, 16px);
}

Browser Support and Progressive Enhancement

Modern browsers offer robust support for custom properties and calculation functions, but older versions may require fallbacks. Feature queries (@supports) can detect support:

.title {
  font-size: 18px;
}

@supports (--css: variables) {
  .title {
    font-size: var(--title-size);
  }
}

For critical styles, always provide static fallback values. This ensures content remains accessible even in browsers without custom property support:

.container {
  margin: 10px; /* Fallback */
  margin: var(--spacing);
}

Creative Application Examples

Combining custom properties with calculations enables innovative design effects. For example, creating a viewport-based dynamic typography system:

:root {
  --min-font: 16px;
  --max-font: 24px;
  --min-width: 320px;
  --max-width: 1200px;
}

.heading {
  font-size: calc(
    var(--min-font) + (var(--max-font) - var(--min-font)) * 
    ((100vw - var(--min-width)) / (var(--max-width) - var(--min-width)))
  );
}

Another creative application is interactive data visualization. Dynamically updating CSS variables via JavaScript enables smooth transitions:

<div class="chart" style="--value: 0.75"></div>
<style>
.chart {
  --size: 100px;
  width: var(--size);
  height: var(--size);
  background: conic-gradient(
    #3498db calc(var(--value) * 360deg),
    #ecf0f1 0
  );
  border-radius: 50%;
  transition: --value 0.5s ease;
}
</style>
<script>
document.querySelector('.chart').style.setProperty('--value', 0.9);
</script>