Let’s face it. CSS is hard. Keeping everything clear and consistent is very difficult, especially when you have a large project. How do you simplify your CSS workflow?

Introducing: CSS variables.

CSS variables can be defined in any selector, and they store values like hex codes, lists, keywords, and more. They are declared with two dashes at the front, then some identifier (i.e. --<identifier>). Then, when we need to use them, we can access them with var(--<identifier>)

Global CSS variables are great for general configuration.

We can start fixing this by getting those colors out of there. Let’s define our colors on the :root pseudoelement so that they are available throughout our entire site:

:root {
    --color-white: #e0e0e0;
    --color-grey: #808080;
    --color-black: #202020;
}

Local CSS variables are great for individual components.

They allow us to define variables for a certain element (like our button), then conditionally change their value based on what other classes are on our element. This means that we can have _all _of our styling in the base class for our button and just change the variables in our other classes.

#web-development #ui-design #css #css variables