CSS Variables & Cascade — Interview Questions & Answers

Ques: What are CSS Variables?

Ans: CSS Variables (also called Custom Properties) are reusable values defined once and used throughout your stylesheet.

They make CSS more dynamic, maintainable, and theme-friendly.

Syntax:

:root {
  --main-color: #3498db;
  --font-size: 16px;
}

p {
  color: var(--main-color);
  font-size: var(--font-size);
}

Ques: What is the purpose of :root in CSS variables?

Ans: :root represents the highest-level selector (similar to <html>).

Variables declared in :root are globally available across all elements.

:root {
  --primary-color: #007bff;
}

Ques: How do you define and use CSS Variables?

Step	Code Example
Define variable	`--main-bg: #fff;`
Use variable	`background: var(--main-bg);`

You can even set fallback values:

color: var(--text-color, black);

Ques: What are the advantages of using CSS Variables?

Reusability – Define once, use anywhere
Easy maintenance – Change one value to update entire site
Dynamic theming – Change colors using JavaScript
Supports inheritance – Variables can cascade down the DOM
Better readability – Self-descriptive styles

Ques: Can you update CSS Variables dynamically with JavaScript?

Ans: Yes! CSS variables can be modified in real-time.

Example:

document.documentElement.style.setProperty('--main-color', 'red');

Ques: What is the difference between CSS Variables and Preprocessor Variables (like Sass)?

Feature	CSS Variables	Sass/LESS Variables
Evaluated	At runtime	At compile-time
Change via JS	Yes	No
Cascade & Inherit	Yes	No
Browser Native	Yes	Requires preprocessor

Ques: What is the CSS Cascade?

Ans: The Cascade determines which CSS rule is applied when multiple rules target the same element.

It depends on three main factors:

Origin – Inline, internal, or external styles
Specificity – Selector importance
Order – Last declared rule wins (if same specificity)

Ques: What are the three main sources of CSS rules (Cascade Origins)?

Origin Type	Example	Priority
User Agent	Browser defaults	Lowest
Author Styles	Your CSS	Medium
Inline Styles	Added inside HTML	High

Ques: What is CSS Specificity?

Ans: Specificity is how the browser decides which CSS rule wins when multiple rules affect the same element.

Calculation:

Inline styles → 1000
ID selector → 100
Class, pseudo-class, attribute → 10
Element, pseudo-element → 1

Example:

#id { color: red; }        /* 100 */
.class { color: blue; }    /* 10 */
p { color: green; }        /* 1 */

Ques: What is the !important rule in CSS?

Ans: !important overrides all normal rules and gives top priority to a property.

Example:

p {
  color: blue !important;
}

Ques: What are Cascade Layers in CSS (@layer)?

Ans: @layer is a modern CSS feature that allows you to control style priority in large projects.

Example:

@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; }
}
@layer base {
  body { font-family: Arial; }
}
@layer components {
  button { background: blue; }
}

Ques: What is the order of Cascade Priority in CSS?

Ans: Final Order (Highest → Lowest):

Inline styles
!important rules
Cascade layers (@layer)
Specificity (IDs, classes, etc.)
Source order (last wins)

Ques: What is @property in CSS?

Ans: @property allows you to register custom CSS variables with specific syntax, type, and default values — useful for animation and transitions.

Example:

@property --progress {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

Ques: How does inheritance affect CSS Variables?

Ans: CSS variables automatically inherit from their parent element.

Example:

:root { --text-color: black; }
div { color: var(--text-color); }

Ques: How can CSS Variables improve website performance?

Reduce repeated CSS code
Enable runtime updates (no reload)
Improve maintainability
Work efficiently with JavaScript-based theming
Allow browser-level caching for static stylesheets