DEV Community

Rova Ranaivo
Rova Ranaivo

Posted on

22

CSS's :root Variables. Use it!

CSS's :root selector lets you define global variables that can be used in your stylesheets. These variables, also known as custom CSS properties, provide a convenient way of storing and reusing values, making your stylesheets more modular and easier to maintain.

1. Defining :root variables

To define a :root variable, use the :root selector followed by the variable name and value, surrounded by double dashes (--).
Here is an example:

:root {
  --primary-color: #fff;
  --font-size: 14px;
}
Enter fullscreen mode Exit fullscreen mode

2. Using :root Variables

To use a :root variable, you can refer to it using the var() function and the variable name, as following:

body {
  color: var(--primary-color);
  font-size: var(--font-size);
}
Enter fullscreen mode Exit fullscreen mode

3. Overriding :root Variables

You can override :root variables at any point in your stylesheets by redefining them. This flexibility allows you to update the variable value globally, affecting all the styles that rely on it.

4. Benefits of :root Variables

  • Reusability: Use variables throughout your stylesheets, reducing code duplication.
  • Consistency: Maintain a consistent look and feel by centralizing values in variables.
  • Dynamic Updates: Change variable values dynamically, resulting in global style changes.

Conclusion:
Using :root variables in CSS is a powerful way of defining and reusing values in your style sheets. By centralizing your values and making them easily modifiable, you can improve code maintenance, achieve consistent styling and create more flexible designs.

Remember to update your stylesheets to take advantage of :root variables and enjoy the benefits they provide in your CSS development process.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
moinulmoin profile image
Moinul Moin

Awesome work, Rova. Keep it up!

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay