DEV Community

Cover image for CSS Variables – Streamlining Your Stylesheets
Ridoy Hasan
Ridoy Hasan

Posted on

1 1 1 1

CSS Variables – Streamlining Your Stylesheets

Lecture 17: CSS Variables – Streamlining Your Stylesheets

In this lecture, we will learn about CSS Variables (also known as custom properties) and how they help to simplify your code by allowing you to reuse values across your stylesheet.

1. What Are CSS Variables?

CSS Variables enable you to store values such as colors, font sizes, or spacing in a central location and reuse them throughout your stylesheet. This makes your code more maintainable, as you can easily update the values in one place instead of searching through the entire stylesheet.

CSS Variables are defined with a -- prefix, and you can access them with the var() function.

2. Defining CSS Variables

CSS Variables are typically defined in the :root selector, which represents the top level of the document.

Example:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size: 16px;
}

body {
    font-size: var(--font-size);
    color: var(--primary-color);
}

h1 {
    color: var(--secondary-color);
}
Enter fullscreen mode Exit fullscreen mode

In this example:

  • We define --primary-color, --secondary-color, and --font-size as our custom variables.
  • These variables are then used in the body and h1 styles with the var() function.

3. Benefits of Using CSS Variables

  • Reusability: You can reuse the same values throughout your stylesheet, reducing code duplication.
  • Maintainability: If you need to change a color or font size, you only need to update the variable’s value in one place.
  • Dynamic Updates: CSS Variables can be updated dynamically using JavaScript, allowing for more flexibility in creating interactive designs.

4. Overriding CSS Variables

You can override CSS Variables within specific selectors to provide context-specific values.

Example:

:root {
    --primary-color: #3498db;
}

.dark-mode {
    --primary-color: #34495e;
}

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

In this example, the --primary-color is overridden when the .dark-mode class is applied. This allows you to switch between different color schemes (e.g., light mode and dark mode) effortlessly.

5. Using Variables with Media Queries

CSS Variables work well with media queries, allowing you to adjust values based on screen size.

Example:

:root {
    --font-size: 16px;
}

@media (max-width: 600px) {
    :root {
        --font-size: 14px;
    }
}

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

In this example, the --font-size variable is reduced on smaller screens, making the text more readable on mobile devices.

6. Fallback Values in CSS Variables

You can provide fallback values for CSS Variables in case the variable is not defined or supported by the browser.

Example:

body {
    font-size: var(--font-size, 18px);
}
Enter fullscreen mode Exit fullscreen mode

Here, if --font-size is not defined, the browser will default to 18px.

7. Variables and JavaScript

One of the most powerful aspects of CSS Variables is that they can be manipulated using JavaScript, allowing you to create dynamic, interactive styles.

Example:

document.documentElement.style.setProperty('--primary-color', '#e74c3c');
Enter fullscreen mode Exit fullscreen mode

In this example, the --primary-color variable is updated to a new color (#e74c3c) using JavaScript, which dynamically changes the style of the page.

8. Practical Use Cases

  • Theming: Use CSS Variables to create light and dark themes for your website.
  • Design Systems: Build a consistent design system by using variables for colors, spacing, and typography.
  • Dynamic Interactions: Create interactive elements that update their styles in real time using CSS Variables and JavaScript.

Conclusion

CSS Variables offer a flexible way to manage your styles, improve code maintainability, and enable dynamic updates. By incorporating CSS Variables into your workflow, you can streamline your development process and create more maintainable, scalable stylesheets.


Follow me on LinkedIn

Ridoy Hasan

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

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