CSS Variables Basics

CSS Variables, also known as custom properties, are a powerful feature introduced in CSS that allow developers to store reusable values. These variables enhance the flexibility and maintainability of CSS by enabling dynamic and consistent styling across a web project.

01. What Are CSS Variables?

CSS Variables are entities defined by CSS authors that contain specific values to be reused throughout a document. They are defined with a custom property name starting with -- and accessed using the var() function.

For example:


:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size-large: 1.5rem;
}

h1 {
  color: var(--primary-color);
  font-size: var(--font-size-large);
}

02. Why Use CSS Variables?

CSS Variables provide several benefits, including:

Reusability: Define a value once and reuse it across multiple selectors.
Consistency: Maintain uniform styling throughout the website.
Flexibility: Easily update styles by modifying a single variable.
Dynamic Styling: Enable runtime changes, such as theming or user preferences.

03. Syntax of CSS Variables

The syntax for CSS Variables involves two steps:

1. Define a Variable

Variables are typically defined inside a selector, most commonly the :root pseudo-class for global scope.


:root {
  --main-bg-color: #f4f4f4;
  --main-text-color: #333;
}

2. Use a Variable

Access the variable's value using the var() function.


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

04. Default Values in CSS Variables

The var() function allows specifying a fallback value if the variable is not defined.


p {
  color: var(--undefined-color, #555); /* Uses #555 if --undefined-color is not defined */
}

05. Scope of CSS Variables

The scope of a variable determines where it can be used:

Global Scope: Variables defined in the :root pseudo-class are accessible throughout the document.
Local Scope: Variables defined within a specific selector are only accessible within that selector.


:root {
  --global-color: #2980b9;
}

section {
  --local-color: #e74c3c;
  background-color: var(--local-color);
}

06. CSS Variables and JavaScript

CSS Variables can be dynamically updated using JavaScript, making them perfect for themes and runtime styling.


/* Update a CSS Variable */
document.documentElement.style.setProperty('--primary-color', '#8e44ad');

07. Practical Examples

1. Theming

Switch between light and dark themes using CSS Variables:


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

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

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

2. Dynamic Font Sizes

Adjust font sizes for responsiveness:


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

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

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

08. Browser Support

CSS Variables are supported in all modern browsers, including:

Chrome 49+
Firefox 31+
Safari 9.1+
Edge 15+

For older browsers, consider using a polyfill.

09. Best Practices

Organize Variables: Group related variables together for readability.
Use Descriptive Names: Choose names that reflect the purpose of the variable.
Define Defaults: Always provide fallback values with var().
Test Responsiveness: Adjust variables for different screen sizes.

Conclusion

CSS Variables are an essential tool for modern web development, providing flexibility, maintainability, and dynamic control over styles. By mastering CSS Variables, developers can create scalable and adaptable designs that enhance both the user experience and project efficiency.