Master CSS Variables: Boost Flexibility, Reusability, and Theming
This article explains the fundamentals of CSS variables, how to define and use them—including default values, nesting, media queries, and JavaScript updates—while showcasing practical scenarios such as theming, responsive design, code reuse, and compatibility across browsers.
CSS Variables (custom properties) are a powerful feature that let developers define reusable values, improving flexibility and efficiency of style sheets.
1. Basic Concepts
CSS variables are defined with a -- prefix and can store any CSS value. They can be used anywhere in a stylesheet and shared across rules.
Variable names must start with two dashes -- .
Variable names are case‑sensitive.
Variable values can be any valid CSS value.
Example:
<code>:root {
--primary-color: #007bff;
--font-size: 16px;
}</code>These variables are accessed via the var() function, e.g., color: var(--primary-color); .
2. Usage Methods
The :root pseudo‑class matches the document’s root element ( <html> ) and is used to define global variables.
Variables can also be scoped locally by placing them inside a selector.
<code>.parent {
--local-color: blue;
}
.parent .child {
color: var(--local-color); /* works */
}</code>Layered rules ( @layer ) can create different priority scopes.
<code>@layer base {
:root { --base-color: pink; }
}
@layer theme {
:root { --theme-color: var(--base-color); }
}</code>2.1 Regular Usage
Define variables in :root and reference them with var() in any property.
<code>:root {
--primary-color: #007bff;
--font-size: 16px;
}
.body {
color: var(--primary-color);
font-size: var(--font-size);
}</code>2.2 Default Values
Provide a fallback value in var() to use when a variable is undefined.
<code>.element {
color: var(--undefined-variable, #000000);
}</code>2.3 Nested Variables
Variables can reference other variables.
<code>:root {
--main-color: #007bff;
--secondary-color: var(--main-color);
}
button {
background-color: var(--secondary-color);
}</code>2.4 Media Queries
Variables can be redefined inside media queries for responsive design.
<code>:root { --spacing: 16px; }
@media (min-width: 768px) {
:root { --spacing: 24px; }
}
.container { padding: var(--spacing); }</code>2.5 JavaScript
JavaScript can update variables at runtime.
<code>document.querySelector('.button').addEventListener('click', function() {
document.documentElement.style.setProperty('--primary-color', '#ff0000');
});</code>2.6 Inline Styles
Inline styles can reference globally defined variables using var() .
3. Application Scenarios
Variables enable theme switching, responsive design, code reuse, configurable components, dynamic themes, gradients, animations, and calculations with calc() .
4. Compatibility
Supported in modern browsers: Chrome 49+, Firefox 31+, Edge 15+, Safari 9.1+, Opera 36+. Not supported in Internet Explorer. Mobile support includes iOS Safari 9.3+, Android Chrome 49+, Samsung Internet 5.0+, Opera Mobile 37+, Firefox for Android 48+.
5. Best Practices
Declare global variables in :root .
Use consistent naming conventions.
Group related variables.
Add comments describing purpose.
Avoid overusing variables for one‑off values.
Prefer local scope when possible.
Always provide fallback values.
Proper use of CSS variables can greatly improve maintainability, flexibility, and user experience in web development.
Code Mala Tang
Read source code together, write articles together, and enjoy spicy hot pot together.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.