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);
}

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);
}

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);
}

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);
}

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');

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