CSS Variables

CSS variables, also known as custom properties, allow us to store and reuse values within stylesheets. This makes the code more maintainable, cleaner, and more flexible.

How do CSS variables work?

It is best to declare variables in the <:root> selector so they are available throughout the entire document. They can be used in different styles with the <var()> function.

The following example shows how to declare and use CSS variables for setting background color and padding.

Multiple variables and reuse

We can define multiple variables at once, for example colors for different buttons. This simplifies theme management and design consistency.

In the next example, we store two colors in variables and assign them to different buttons.

Tips for CSS variables

CSS variables provide a flexible solution for managing stylesheets. Here are some useful tips for their use:

• Always declare global variables in <:root> so they are accessible everywhere.
• Give descriptive names to variables to make the code easy to understand.
• Use variables for color schemes and sizes so you can quickly modify the design.