The power of CSS Variables : A flexible solution for spacing utilities

In modern web development, flexibility and adaptability are key aspects that determine the effectiveness and aesthetics of a webpage. CSS variables offer just this flexibility, allowing developers to define values centrally and then reuse and adjust them across the project as needed. A particularly practical application for CSS variables is the control of spacing. This article highlights how CSS variables provide a higher degree of flexibility compared to traditional methods such as modified classes.

For my Themex project, I’ve employed spacing utilities in the form of CSS variables. If you want to learn more about the Themex project, please visit here: https://app.themexproject.com

Spacing with CSS Variables

Using spacing variables in web projects allows for flexible adjustment of spacings at different places on a webpage, such as the top or bottom margin of an element. This can significantly speed up and simplify development, as changes to spacing sizes can be easily made globally.

A key advantage: Fewer CSS classes

A significant advantage of using CSS variables for spacing is the reduction in the need to write numerous specific CSS classes. Traditionally, developers had to create separate classes for different spacings, leading to a bloated stylesheet and increased complexity. With CSS variables, you can instead define uniform variables for spacings and apply them, simplifying the codebase and easing maintenance.

Adding vertical spacing

To add spacing variables to an element, use the element’s style attribute and define the desired variables as follows:

HTML

<div style="--space-top: 30px; --space-bottom: 100px;"></div>

CSS

@media (min-width: 992px) {
  [style*='--space-bottom'] {
    margin-bottom: var(--space-bottom);
  }
  [style*='--space-top'] {
    margin-top: var(--space-top);
  }
}

In this example, the element is given a top spacing (space-top) of 30px and a bottom spacing (space-bottom) of 100px.

Default behavior for mobile devices

By default, the spacing variables are configured so that the defined spacings are automatically halved for screen widths below 992px. This ensures optimized display on mobile devices without the need for additional adjustments.

[style*='--space-top'] {
  margin-top: calc(var(--space-top) / 2);
}

[style*='--space-bottom'] {
  margin-bottom: calc(var(--space-bottom) / 2);
}

Overriding values for mobile devices

If specific spacings for mobile devices are desired that do not follow the automatic halving, they can be explicitly overridden. This is done by using variables with the suffix -[device]:

HTML

<div style="--space-top-sm: 80px; --space-bottom-sm: 80px;"></div>

CSS

/* small devices */
[style*='--space-top-sm'] {
  margin-top: var(--space-top-sm);
}

[style*='--space-bottom-sm'] {
  margin-bottom: var(--space-bottom-sm);
}

/* medium devices */
@media (min-width: 768px) {
  [style*='--space-top-md'] {
    margin-top: var(--space-top-md);
  }

  [style*='--space-bottom-md'] {
    margin-bottom: var(--space-bottom-md);
  }
}

Why inside a style element and not directly in CSS?

For example, to allow components to be reusable, it is important not to hard-code spacing specifications within the component itself. Of course, it’s possible to define default behaviours, but experience shows that this doesn’t add value. In 80% of cases, spacing properties are overridden.

Here is an example of how it can work in practice (build with Themex): https://example.themexproject.com/