CSS Variables (Custom Properties)

Q: What is the correct way to define a global CSS variable?

Answer: --var-name: val;. Native CSS variables must start with two dashes (--) to distinguish them from standard CSS properties.

Q: How do you use a CSS variable as a property value?

Answer: color: var(--my-var);. The var() function is required to retrieve and apply the value of a custom property.

Master the power of runtime constants. Learn how to build scalable design systems, dynamic themes, and maintainable CSS architectures with custom properties.

Expert Answer & Key Takeaways

Master the power of runtime constants. Learn how to build scalable design systems, dynamic themes, and maintainable CSS architectures with custom properties.

1. Variables in Native CSS

CSS Variables, also known as 'Custom Properties', allow you to store values (like colors, spacing, or sizes) and reuse them throughout your website. Unlike Sass variables, these are Live and can be changed at runtime.

The Example: The Global Palette

/* 1. Define Variables (Usually in :root for global access) */
:root {
  --primary-color: #007bff;
  --border-radius: 8px;
  --spacing-unit: 1rem;
}

/* 2. Use Variables */
.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
  border-radius: var(--border-radius);
}

Feature	CSS Variables	Sass/Less Variables
Availability	Runtime (Live in browser).	Compile-time (Static).
Syntax	`--name: value;`	`$name: value;`
Scope	Follows the DOM (Cascading).	Flat / Block based.
JS Access	Yes, you can change them with JS.	No, they are gone after build.

2. Variable Scope

Variables declared in :root are Global. However, you can declare a variable inside a specific class to make it Local to that element and its children.

The Example: Local Overriding

/* Global */
:root { --btn-bg: gray; }

/* Specific Overwrite */
.danger-zone {
  --btn-bg: red;
}

.btn { background: var(--btn-bg); }

In this example, a button inside .danger-zone will be red, while buttons everywhere else will be gray.

3. Dynamic Dark Mode

Custom properties are the easiest way to implement themes. Instead of rewriting all your styles, you just update the variable values.

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

[data-theme="dark"] {
  --bg: #1a1a1a;
  --text: #ffffff;
}

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

[!TIP] Fallback Strategy: Always provide a fallback value in case the variable isn't defined: color: var(--brand-color, blue);.

🎯 Practice Challenge: The Theme Swapper

Define a --card-bg and --card-text in :root.
Task 1: Create a card component using these variables.
Task 2: Create a class called .featured and update the values of --card-bg and --card-text ONLY within that class.
Task 3: Use a CSS variable for padding and use calc(var(--spacing) * 2) to create an extra-large version of the card.

4. Senior Interview Corner

Q: What is the main advantage of CSS variables over Preprocessor (Sass) variables?

A: Runtime dynamism. CSS variables exist in the browser. This means you can change a single variable value using a media query or JavaScript, and every element using that variable will update instantly without a page reload or re-compile. This makes them significantly more powerful for theming and complex animations.

Q: Are CSS variables case-sensitive?

A: Yes! --MainColor and --maincolor are treated as two COMPLETELY different variables. It is a best practice to always use lowercase and hyphens (kebab-case) for consistency.

CSS Variables (Custom Properties)

Expert Answer & Key Takeaways

1. Variables in Native CSS

The Example: The Global Palette

2. Variable Scope

The Example: Local Overriding

3. Dynamic Dark Mode

🎯 Practice Challenge: The Theme Swapper

4. Senior Interview Corner

Top Interview Questions

?Interview Question

?Interview Question

Course4All Engineering Team

Found an issue or have a suggestion?

CSS Variables (Custom Properties)

Expert Answer & Key Takeaways

1. Variables in Native CSS

The Example: The Global Palette

2. Variable Scope

The Example: Local Overriding

3. Dynamic Dark Mode

🎯 Practice Challenge: The Theme Swapper

4. Senior Interview Corner

Top Interview Questions

?Interview Question

?Interview Question

Course4All Engineering Team

Explore More css

CSS Math Functions (calc, clamp)

CSS Shadows & Visual Depth

CSS Filters & Image Effects

Transforms (2D & 3D)

Found an issue or have a suggestion?