Scope & Inheritance in CSS Variables

Scope of CSS Variables

CSS variables define reusable values that can be reused across a stylesheet. Their scope determines where and how they are accessible. Variables defined in the root (e.g., :root) are globally scoped and available throughout the document. Variables defined within a nested selector (e.g., #header .nav) are scoped to that specific context, limiting their availability to descendants.

Global Scope
Variables declared in the root are globally accessible. For example:

:root {
  --primary-color: #333;
}

This --primary-color variable is available in all sections of the stylesheet.

Local Scope
Variables defined within a class, rule, or selector are scoped to that context. For instance:

.header {
  --background: #f1f1f1;
  background: var(--background);
}

Here, --background is only accessible within the .header class.

Nested Selectors and Scope
When a variable is defined in a nested selector (e.g., #nav .menu), it is scoped to that specific context. For example:

#nav .menu {
  --text-color: #000;
}

A variable defined in #nav is not available in .menu unless explicitly declared in #nav.

---

Inheritance of CSS Variables

CSS variables inherit values from parent elements, enabling cascading and reusable definitions. However, inheritance is not universal and depends on the context.

Properties That Inherit
Variables defined in the root or parent elements can be inherited by child elements. For example:

body {
  --font: Arial;
}

This --font variable is inherited by all child elements.

Properties That Do Not Inherit
Some properties do not inherit, such as background, border, or padding. For instance:

body {
  --background: #fff;
}

This --background is inherited by child elements, but border defined in the parent is not.

Inheritance in Nested Selectors
When a variable is defined in a nested selector, it is inherited by its descendants. For example:

#nav .menu {
  --text-color: #000;
}

The --text-color variable is inherited by .menu and its descendants.

Limitations
Variables defined in a specific element (e.g., #nav) are not inherited by its descendants unless explicitly declared. For example:

#nav {
  --color: red;
}

This --color is not available in .menu unless declared in #nav.

---

Examples

Scope Example

Define a global variable and use it in a local scope:

:root {
  --primary-color: #333;
}

.header {
  color: var(--primary-color);
}

Here, --primary-color is globally accessible but only usable within .header.

Inheritance Example

Use a parent variable in a child element:

body {
  --font: Arial;
}

.h1 {
  font-family: var(--font);
}

The --font variable is inherited by .h1 and its descendants.

Nested Selectors and Scope

Define a variable in a nested selector and observe its scope:

#nav .menu {
  --text-color: #000;
}

The --text-color is available in .menu and its descendants but not in #nav.

---

Conclusion

CSS variables are powerful tools for maintaining consistency across a stylesheet. Their scope determines where they are accessible, while inheritance enables cascading values. Understanding scope and inheritance is critical for effective CSS development, allowing developers to create reusable, maintainable code.