Goal

You’ll be able to set up and use CSS Custom Properties confidently, understand exactly what real maintenance problem they solve compared to hardcoded values, and know how they can be selectively overridden for specific components or themes.

Learn

A Custom Property (commonly called a CSS variable) is defined once and reused anywhere in your stylesheet:

:root {
  --brand-blue: #2563eb;
  --spacing-md: 16px;
}
.button {
  background-color: var(--brand-blue);
  padding: var(--spacing-md);
}
.link {
  color: var(--brand-blue);
}

Defining variables on :root (which represents the entire document) makes them available globally across the whole stylesheet. Now, changing the brand color means editing exactly one line, and every single usage across the entire project updates automatically, instantly, with zero risk of missing an occurrence.

Custom Properties can also be redefined within a more specific scope, overriding the global value just for that section:

.dark-theme {
  --brand-blue: #60a5fa;
}

Any element inside .dark-theme that uses var(--brand-blue) will pick up this locally overridden value instead of the global one, without needing separate CSS rules written for every single component individually — this is genuinely how many real dark-mode implementations work under the hood.

Decision Task

Recall the typography lesson’s problem: the same hex code typed in forty places, painful to update later. Before reading on: how would Custom Properties have prevented that entire problem from the start?

Reveal the Answer

By defining --brand-blue once and referencing var(--brand-blue) everywhere instead of retyping the hex code directly, a future color change becomes a single one-line edit instead of a project-wide search-and-replace operation, with zero risk of missing an occurrence or accidentally changing an unrelated color that happened to share the same hex value by coincidence.

Common Mistake

Defining variables conscientiously at the start of a project, but still hardcoding new hex values directly for “one-off” or “quick” cases as the project grows, gradually defeating the entire purpose over time. If a color value gets used more than once anywhere, even for a seemingly minor or temporary case, it’s almost always worth making it a variable from that point rather than letting it stay a one-off hardcoded value that will eventually be forgotten during a future update.

Practice Questions

1. Define a Custom Property called –spacing-lg with a value of 32px, then use it as the padding value for a class called .card.

Show Answer

:root { --spacing-lg: 32px; } .card { padding: var(--spacing-lg); }

2. Why does defining variables on :root make them available everywhere, rather than needing to redefine them in every selector?

Show Answer

:root represents the entire document, so anything defined there is inherited and accessible everywhere else in the stylesheet by default, the same way general inheritance works in CSS.

3. Explain how a component-level override (like the .dark-theme example) works, without needing separate CSS rules for every individual component inside it.

Show Answer

Any element inside .dark-theme that references var(–brand-blue) automatically picks up the locally redefined value instead of the global one, because CSS looks for the “closest” definition of that variable in its actual containing scope, without needing any additional rules written elsewhere.

4. True or False: Custom Properties can only store color values.

Show Answer

False — Custom Properties can hold any CSS value: spacing, font sizes, border-radius, even entire strings like font-family lists.

5. A project has –primary-color used in 60 places, all correctly referencing the variable. Six months later, marketing asks for a slightly different shade of the primary color. Describe the exact change needed.

Show Answer

Update the single line where –primary-color is defined in :root; all 60 usages update automatically with no further changes needed anywhere else.

Try It Yourself

You want a consistent spacing scale (like 8px, 16px, 24px, 32px) reused throughout a project, the same way colors are. Would Custom Properties work for this too, not just colors?

Show Answer

yes — Custom Properties can hold any CSS value, not just colors; spacing, font sizes, and border-radius values are all commonly defined this way too.

Quick Check

1. How do you reference a Custom Property once it’s defined?

Show Answer

var(–property-name).

2. What real maintenance problem do Custom Properties solve?

Show Answer

Needing to update a value in only one place instead of searching through the entire stylesheet.

3. Can Custom Properties hold values other than colors?

Show Answer

Yes, any CSS value.

4. You want a consistent spacing scale (like 8px, 16px, 24px, 32px) reused throughout a project, the same way colors are. Would Custom Properties work for this too, not just colors?

Show Answer

yes — Custom Properties can hold any CSS value, not just colors; spacing, font sizes, and border-radius values are all commonly defined this way too.

5. Recall the typography lesson’s problem: the same hex code typed in forty places, painful to update later. Before reading on: how would Custom Properties have prevented that entire problem from the start?

Show Answer

By defining --brand-blue once and referencing var(--brand-blue) everywhere instead of retyping the hex code directly, a future color change becomes a single one-line edit instead of a project-wide search-and-replace operation, with zero risk of missing an occurrence or accidentally changing an unrelated color that happened to share the same hex value by coincidence.

تحميل هذا الباب / Download this Chapterنسخة كاملة للدراسة بدون إنترنت، مع الأسئلة والإجابات والصور المتاحة.
PreviousNext