CSS Overriding Variables

CSS variables (custom properties) can be overridden to provide flexibility and dynamic changes in your styling. The ability to override variables allows you to define default values globally and modify them in specific contexts or components as needed.

How Variable Overriding Works

CSS follows a cascading and inheritance model, meaning that variables declared in a more specific scope (such as a child element) will override variables declared in a less specific scope (like :root or a parent element).

Key Rules:

  1. Variables can be redefined in a specific selector.
  2. Overriding works within the cascading order, meaning closer or more specific declarations take precedence.

Declaring and Overriding Variables

Global Variables in :root

Define global variables that apply throughout the document.

:root {
    --primary-color: #007bff;
    --font-size: 16px;
}

Overriding Locally

Override variables within a specific selector.

.card {
    --primary-color: #6c757d;
    --font-size: 18px;
}

Applying the Variables

.button {
    background-color: var(--primary-color);
    font-size: var(--font-size);
}

In this example:

  • Default --primary-color is #007bff.
  • Inside .card, the --primary-color is overridden to #6c757d.

Practical Examples

1. Theming with Overrides

Using variable overriding, you can easily switch between light and dark themes.

Example:

:root {
    --background-color: #ffffff;
    --text-color: #000000;
}

.dark-theme {
    --background-color: #000000;
    --text-color: #ffffff;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

To switch to the dark theme, simply add the dark-theme class to the body or root element:

<body class="dark-theme">
    <p>Welcome to dark mode!</p>
</body>

2. Overriding in Components

Override variables for specific components without affecting the rest of the page.

Example:

:root {
    --button-color: #007bff;
    --button-padding: 10px;
}

.button {
    background-color: var(--button-color);
    padding: var(--button-padding);
}

/* Override for secondary button */
.secondary-button {
    --button-color: #6c757d;
}

In this case, .secondary-button will have a gray color (#6c757d), while other buttons retain the default blue.

3. Media Query Overrides

CSS variables can be redefined inside media queries for responsive designs.

Example:

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

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

p {
    font-size: var(--font-size);
}

4. Hover and Focus Overrides

Variables can also be overridden in interaction states like hover and focus.

Example:

:root {
    --button-bg: #007bff;
    --button-bg-hover: #0056b3;
}

.button {
    background-color: var(--button-bg);
}

.button:hover {
    --button-bg: var(--button-bg-hover);
}

On hover, the button’s background color changes dynamically by overriding the --button-bg variable.

Inheritance in Variable Overriding

CSS variables are inheritable by default, meaning child elements can use variables defined on parent elements unless overridden explicitly.

Example:

:root {
    --text-color: #333;
}

.container {
    color: var(--text-color);
}

.container.dark {
    --text-color: #fff;
}

p {
    color: var(--text-color); /* Inherits from .container */
}
  • Inside .container, --text-color is inherited by all child elements.
  • In .container.dark, the color changes to white (#fff).

Default Values with the var() Function

You can specify a default value in case a variable is undefined using the var() function.

Example:

.card {
    background-color: var(--card-bg, #f8f9fa); /* Fallback to #f8f9fa if --card-bg is not set */
}

Overriding Variables Dynamically with JavaScript

Variables can also be updated programmatically using JavaScript.

Example:

<div class="container">Dynamic Background</div>

<script>
    // Change a CSS variable dynamically
    document.documentElement.style.setProperty('--background-color', '#ff5733');
</script>

This dynamically updates the --background-color variable.

Browser Support

CSS variable overriding is supported in modern browsers, but it is not supported in Internet Explorer. Use fallbacks or preprocessors like SASS if support for older browsers is required.

Best Practices

  1. Declare Global Defaults: Use :root for site-wide variables.
  2. Use Overrides Sparingly: Keep overrides organized to avoid confusion.
  3. Document Variables: Maintain a clear list of variables for better collaboration and maintainability.
  4. Combine with JavaScript: Enhance interactivity by dynamically overriding variables.

Conclusion

CSS variable overriding is a powerful feature that enhances flexibility and modularity in your stylesheets. By defining default variables and overriding them when necessary, you can create dynamic, maintainable, and scalable designs.

For more insights into CSS techniques, visit The Coding College and stay ahead in web development!

Leave a Comment