1. Introduction
CSS has evolved from simple styling rules into a full-fledged design language. One of its most powerful modern features is CSS Variables (also called Custom Properties).
CSS Variables allow you to store values (like colors, fonts, spacing) in reusable variables, making your code cleaner, consistent, and easier to maintain.
Instead of repeating the same color everywhere, you declare it once and use it throughout your stylesheet.
Example:
:root {
--primary-color: #3498db;
}
button {
background-color: var(--primary-color);
}
If you later want to change the brand color, you just update it in one place.
In this article, we’ll explore:
- What CSS Variables are
- How to declare and use them
- Scoping and inheritance
- Fallback values
- Dynamic updates with JavaScript
- Practical real-world examples
- Best practices for maintainability
2. Declaring CSS Variables
2.1 Syntax
CSS Variables are declared using the -- prefix inside a selector.
:root {
--primary-color: #3498db;
--font-size-large: 20px;
}
- Variables must start with
--. - They are case-sensitive (
--Color≠--color).
2.2 The :root Selector
The :root pseudo-class is the highest-level element (the <html> element). Declaring variables here makes them global:
:root {
--font-family: "Arial, sans-serif";
--spacing: 1rem;
}
2.3 Local Scope Variables
Variables can also be declared inside elements for local use.
.card {
--card-bg: #fff;
background: var(--card-bg);
}
Here, --card-bg is only available within .card.
3. Using CSS Variables
3.1 var() Function
To use a variable, call it with the var() function:
h1 {
color: var(--primary-color);
}
3.2 Fallback Values
You can provide a fallback if the variable is not defined:
h1 {
color: var(--secondary-color, black);
}
If --secondary-color is undefined, text defaults to black.
3.3 Example: Button Styling
:root {
--primary-bg: #3498db;
--primary-text: #fff;
}
button {
background: var(--primary-bg);
color: var(--primary-text);
padding: 10px 20px;
border: none;
border-radius: 5px;
}
4. Variable Scope and Inheritance
4.1 Global vs Local Scope
- Global variables → declared in
:root. - Local variables → declared inside selectors.
Example:
:root {
--text-color: black;
}
.article {
--text-color: gray;
color: var(--text-color);
}
Text inside .article will be gray, while elsewhere it remains black.
4.2 Inheritance
CSS Variables inherit like normal CSS properties.
Example:
.container {
--font-color: red;
}
.container p {
color: var(--font-color);
}
4.3 Overriding Variables
Child elements can override variables:
:root {
--theme-color: blue;
}
.section {
--theme-color: green;
}
h2 {
color: var(--theme-color);
}
- Default: Blue
- Inside
.section: Green
5. Advanced Usage
5.1 Theming with CSS Variables
:root {
--bg-color: white;
--text-color: black;
}
.dark-theme {
--bg-color: black;
--text-color: white;
}
body {
background: var(--bg-color);
color: var(--text-color);
}
Switching between .dark-theme and default changes the entire look.
5.2 Responsive Design
CSS Variables work inside media queries:
:root {
--spacing: 10px;
}
@media (min-width: 768px) {
:root {
--spacing: 20px;
}
}
.container {
padding: var(--spacing);
}
5.3 Animations and Transitions
You can animate properties that use variables.
:root {
--button-bg: blue;
}
button {
background: var(--button-bg);
transition: background 0.3s;
}
button:hover {
--button-bg: green;
}
5.4 Dynamic Updates with JavaScript
CSS Variables can be modified at runtime.
<button onclick="changeTheme()">Change Theme</button>
:root {
--main-color: blue;
}
function changeTheme() {
document.documentElement.style.setProperty('--main-color', 'purple');
}
This updates --main-color dynamically.
6. Practical Examples
6.1 Color Palette System
:root {
--primary: #3498db;
--secondary: #2ecc71;
--danger: #e74c3c;
}
.btn-primary {
background: var(--primary);
}
.btn-danger {
background: var(--danger);
}
6.2 Typography System
:root {
--font-sm: 12px;
--font-md: 16px;
--font-lg: 24px;
}
h1 {
font-size: var(--font-lg);
}
p {
font-size: var(--font-md);
}
6.3 Spacing & Layout
:root {
--gap: 1rem;
}
.grid {
display: grid;
gap: var(--gap);
}
6.4 Dark Mode Toggle
:root {
--bg: #fff;
--fg: #000;
}
.dark {
--bg: #000;
--fg: #fff;
}
body {
background: var(--bg);
color: var(--fg);
}
6.5 Component-based Design
Each component can define its own variables:
.card {
--card-bg: #f9f9f9;
background: var(--card-bg);
}
7. Browser Support
- Supported in all modern browsers (Chrome, Firefox, Safari, Edge).
- Not supported in Internet Explorer.
Use fallbacks for old browsers:
h1 {
color: black; /* fallback */
color: var(--heading-color, black);
}
8. Best Practices
- Use
:rootfor global variables → ensures consistency. - Name variables logically → e.g.,
--primary-colornot--blue. - Avoid overusing variables → only use them when values repeat.
- Use fallbacks for compatibility.
- Leverage theming → light/dark mode, seasonal themes.
9. Conclusion
CSS Variables revolutionize how developers write and maintain styles. They:
- Provide reusability (define once, use everywhere).
- Enable dynamic theming (dark/light modes, color palettes).
- Work with JavaScript for runtime styling.
- Improve maintainability and scalability of codebases.
Leave a Reply