A alexanderjuulj.com
CSS
Mar 31, 2023

Custom Properties (CSS Variables): CSS Best Practices, Part 10

CSS custom properties (also known as CSS variables) allow you to define variables that can hold a value, such as a color or font size, which can be used throughout your CSS.

Alexander Juul Jakobsen
WordPress Developer for over 10 years

Here are some reasons why using CSS custom properties might be a good or bad idea:

CSS Variables: Why is it a good idea?

  1. Reusability
    One of the biggest advantages of CSS custom properties is that they allow you to reuse the same value in multiple places throughout your CSS code. This can reduce repetition and make your code more modular and easier to maintain.
  2. Easy to modify
    CSS custom properties can be modified in one place and the changes will be reflected throughout the CSS code. This can make it easier to make changes to your styles, especially if you have a lot of styles that use the same value.
  3. Readability
    By using custom properties, you can give meaningful names to values, which can make your CSS code more readable and easier to understand.

CSS Variables: Why is it a bad idea?

  1. Browser Support
    CSS custom properties have limited support in some older browsers, which can cause compatibility issues. Check out the current browser support for var() on mdn.
  2. Overuse
    Using too many custom properties can make your CSS code harder to read and maintain, especially if you have a lot of custom properties that are only used in one or two places.
  3. Performance
    In some cases, using custom properties can impact performance. For example, if you use a lot of custom properties, it may take longer for the browser to render the page. The key here is to not excesively use variables.

Examples of CSS Variables

Here are some examples of CSS variables.

A basic color variable

:root {
  --primary-color: #007bff;
}

.button {
  background-color: var(--primary-color);
}

Using a variable for font size

:root {
  --font-size: 1rem;
}

h1 {
  font-size: var(--font-size);
}

For margin and padding

:root {
  --spacing: 1rem;
}

.container {
  padding: var(--spacing);
}

.box {
  margin: calc(var(--spacing) / 2);
}

Media queries

:root {
  --tablet-size: 768px;
}

@media screen and (min-width: var(--tablet-size)) {
  .navbar {
    display: flex;
  }
}

Variables for gradients

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

.button {
  background: linear-gradient(var(--primary-color), var(--secondary-color));
}

These are just a few examples of what you can do with CSS variables. They are incredibly versatile and can be used in many different ways to make your CSS code more modular and reusable.

Conclusion

CSS custom properties can be a powerful tool for making your CSS code more modular and maintainable, but it’s important to use them judiciously and to consider the potential downsides, such as browser support and performance issues.

More CSS best practices