CSS Variables (Custom Properties)

CSS Variables, officially known as Custom Properties, allow you to define reusable values within CSS. This greatly enhances the capabilities of CSS, reducing code duplication and making theme switching, responsive design, and component-based styling much easier.

Declaring a Custom Property

Custom property names must begin with two hyphens --. They are usually declared within the :root pseudo-class so that they can be accessed globally throughout the document.

The :root pseudo-class matches the document's root element, which in HTML is the <html> element. Variables declared in :root can be thought of as "global variables".

css

:root {
  --main-bg-color: #f0f2f5;
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --base-font-size: 16px;
  --container-max-width: 1140px;
}

You can also declare variables under a specific selector, making them available only within that selector and its descendants ("local variables").

css

.card {
  --card-padding: 20px;
}

Using Custom Properties

To use a custom property, you need to use the var() function.

var(--custom-property-name, <fallback-value>);

--custom-property-name: The name of the variable you want to use.
<fallback-value> (Optional): A fallback value. If the specified variable is undefined, the browser will use this value.

css

body {
  background-color: var(--main-bg-color);
  font-size: var(--base-font-size);
}

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

.container {
  max-width: var(--container-max-width);
}

.card {
  padding: var(--card-padding, 15px); /* If --card-padding is undefined, use 15px */
}

Advantages of CSS Variables

1. Reduce Repetition (DRY - Don't Repeat Yourself)

You can define colors, fonts, spacing, etc., in one place and reuse them throughout the stylesheet. If changes are needed, you only need to modify the variable definition.

2. Dynamic and Responsive

CSS variables are dynamic. This means you can use JavaScript to read and modify them, or redefine their values within media queries.

Example: Responsive Font Size

css

:root {
  --heading-font-size: 2rem;
}

@media (min-width: 768px) {
  :root {
    --heading-font-size: 3rem;
  }
}

h1 {
  font-size: var(--heading-font-size);
}

Example: Theme Switching (Dark Mode)

css

/* Default Light Theme */
:root {
  --bg-color: #fff;
  --text-color: #333;
}

/* Dark Theme */
body.dark-mode {
  --bg-color: #121212;
  --text-color: #eee;
}

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

Then use JavaScript to toggle the dark-mode class on the body.

3. Combining with `calc()`

CSS variables can work seamlessly with the calc() function for dynamic calculations.

css

:root {
  --base-spacing: 1rem;
}

.element {
  margin-bottom: calc(var(--base-spacing) * 2);
}

4. Better Semantics

--primary-color is more readable and semantic than #007bff. It describes the purpose of the color, not just its value.

CSS variables are one of the cornerstones of modern CSS development, bridging some of the gaps between pure CSS and CSS preprocessors (like Sass/Less) and providing native support for implementing dynamic, maintainable styling systems in the browser.

CSS Variables (Custom Properties) ​

Declaring a Custom Property ​

Using Custom Properties ​

Advantages of CSS Variables ​

1. Reduce Repetition (DRY - Don't Repeat Yourself) ​

2. Dynamic and Responsive ​

3. Combining with calc() ​

4. Better Semantics ​