CSS Variables

CSS variables (also referred to as custom properties) serve as placeholders for values in your styles. This feature allows you to store values (such as colors, fonts, sizes, etc.) in one place and reuse them across the stylesheet. This method streamlines CSS and simplifies maintenance, especially for large-scale projects, by minimizing repetitive coding and enabling easy global changes.

Why Use CSS Variables?

• Reusability: Set a value once and use it throughout your stylesheet.
• Maintainability: Make global changes quickly by updating a variable in one place.
• Dynamic Styling: Update variables with JavaScript for features such as dark mode or theme switching.

Defining CSS Variables

Define a variable using the -- prefix. It's common to define global variables in the :root selector, making them accessible throughout your stylesheet.

Example:

:root {
    --theme-color: #3498db;  /* A nice blue */
    --accent-color: #e67e22; /* Orange for accents */
    --base-font-size: 16px;  /* Default font size */
}

In this example:

• --theme-color stores a blue color (#3498db), suitable for backgrounds or primary elements.
• --accent-color stores an orange color (#e67e22), which can be used for highlights or buttons.
• --base-font-size stores a font size of 16px.

Using CSS Variables

Once your variables have been defined, you can use them with the var() function throughout your stylesheet.

Example:

body {
    background-color: var(--theme-color);
    font-size: var(--base-font-size);
    color: #333; /* Standard dark text */
}

a {
    color: var(--accent-color);
}

In this example:

• The body has a background color of blue (--theme-color), with a base font size of 16px.
• Anchor (<a>) elements will use the --accent-color for their text, giving the links a noticeable orange color.

Local and Global Variables

Variables defined in :root are global and can be used anywhere. However, you can also define variables within specific elements to localize them.

Example:

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

.special-section {
    --theme-color: #2ecc71;  /* Green for this section only */
    --section-padding: 20px;
    background-color: var(--theme-color);
    padding: var(--section-padding);
}

In this example:

• The global theme color is blue (#3498db), but within .special-section, it changes to green (#2ecc71).
• The section also has custom padding, controlled by the local --section-padding variable.

Fallback Values

CSS variables allow you to specify fallback values in case a variable is not defined.

Example:

.button-primary {
    background-color: var(--button-bg-color, #2980b9); /* Default blue if no variable */
    color: #fff; /* Always white text */
    border: 2px solid var(--border-color, #34495e); /* Default dark border */
}

In this example:

• If --button-bg-color is not defined, the button will use a default blue background (#2980b9).
• If --border-color is not set, it will default to a dark shade (#34495e).

Modifying CSS Variables with JavaScript

A major advantage of CSS variables is that you can modify them dynamically using JavaScript. This is especially useful when adding features like dark mode or theme switching.

Example:

<button onclick="toggleTheme()">Switch Theme</button>

<script>
    function toggleTheme() {
        document.documentElement.style.setProperty('--theme-color', '#8e44ad'); /* Changes to purple */
        document.documentElement.style.setProperty('--accent-color', '#f39c12'); /* Changes to yellow */
    }
</script>

In this example:

• Clicking the button will change the --theme-color to a purple color (#8e44ad) and the --accent-color to yellow (#f39c12), updating the styles globally on the page.

Conclusion

CSS variables can transform the way you manage your styles. Whether you are working on a small or large-scale project, they can help make your CSS more efficient and easier to manage. Furthermore, the ability to control them via JavaScript allows you to make your designs more dynamic and interactive.