CSS Variables & Specificity

The final chapter connects everything: custom properties (CSS variables) for maintainable design systems, and the full explanation of the cascade — how the browser decides which rule wins.

Defining and using variables

:root {
  --brand: #4f46e5;
  --brand-dark: #4338ca;
  --radius: 0.75rem;
  --space: 1.25rem;
}

.btn-primary {
  background: var(--brand);
  border-radius: var(--radius);
}
.btn-primary:hover {
  background: var(--brand-dark);
}

Rules: names are case-sensitive and must start with --; the value is a token of almost anything (colors, lengths, even whole selectors via --val). Use var() at usage time, never store a variable inside another's declaration without a fallback.

Fallbacks

color: var(--accent, #4f46e5);            /* used if --accent is missing */
padding: var(--space, 1rem);

Where variables live matters

• Declare in :root for globals; they inherit everywhere like font-size.
• Re-declare on a component to override for that subtree:

  .dark-panel {
    --bg: #0f172a;
    --text: #e2e8f0;
    background: var(--bg);
    color: var(--text);
  }

• Variables do not inherit from a class you did not nest under — always define them on an ancestor of their consumers.

Theming without JavaScript

:root {
  --bg: #ffffff;
  --text: #0f172a;
}
[data-theme="dark"] {
  --bg: #0f172a;
  --text: #e2e8f0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f172a;
    --text: #e2e8f0;
  }
}
body { background: var(--bg); color: var(--text); }

Toggle by setting <html data-theme="dark">; respecting the OS setting is the default. Expected output: the entire site flips theme with one attribute change — every consumer of --bg/--text updates at once.

Math with variables

:root { --base: 16px; --scale: 1.25; }
h1 { font-size: calc(var(--base) * var(--scale) * var(--scale)); }

The cascade: how a winner is chosen

When multiple rules hit the same element, the browser asks, in order:

1. Origin & importance — normal order: agent (browser defaults) < user < author (yours). !important flips each order, so author-!important beats author-normal but loses to user-!important.
2. Specificity — if origins tie, the more specific selector wins (below).
3. Source order — exact tie: the last rule in the stylesheet wins.

Specificity scoring

Score each selector as a-b-c:

p                 { color: black; }   /* 0-0-0-1 */
.lead              { color: blue; }    /* 0-0-1-0  → wins */
#content .lead     { color: red; }     /* 0-1-1-0  → wins again */
section .lead      { color: green; }   /* 0-0-2-0  → beats .lead */
a:hover            { color: purple; }  /* 0-0-2-0  → beats plain a */

!important overrides normal declarations regardless of specificity — but it is a debt: it makes the next override harder. Reach for it only for true one-offs (browser quirk fixes, utility overrides), and fix "my style doesn't apply" by reducing competing specificity or reordering, not by escalating.

Inheritance

Some properties flow down from the parent: font-family, font-size, line-height, color, text-align, letter-spacing… Others do not: margins, padding, borders, width, height, background. Control it with:

.widget { color: inherit; }            /* take parent value */
.reset  { all: unset; }                /* nuke everything (use carefully) */
input   { font: inherit; }             /* forms don't inherit by default */

Cascade strategies that scale

• Class-only styling — no ids for styling; keeps specificity flat (0-0-1-0 everywhere).
• Low & uniform specificity — beats fighting: the later rule wins naturally.
• Layers — modern CSS can organise origins of your own: @layer base, components, utilities; — layer order beats specificity for clean overrides (worth knowing as you advance).
• Tokenise — colours/spacing/typography as variables in one place; components consume them.

Common mistakes

• Escalating specificity arms race — !important → #id → more !important. Stop; restructure or reorder.
• Defining variables too deep — a variable declared on .card cannot be seen by siblings.
• Typo in var() — --brand-color vs --brandcolor silently yields the fallback/initial value; dev tools highlights custom property usage.
• Overriding an id rule from a component file — you'll need equal specificity; better never to have written the id rule.

Practice checklist

1. Move your palette into :root variables and swap every hard-coded colour.
2. Build a dark theme with data-theme + prefers-color-scheme.
3. Write two conflicting rules and predict the winner before inspecting — then verify.

Where to go next

You now have the complete CSS toolkit: selectors, box model, Flexbox, Grid, responsive techniques, motion, and architecture. Put it together by:

• Rebuilding a favourite website's landing page from scratch.
• Reading the HTML semantic structure chapter again and styling every semantic element properly.
• Making it interactive with the JavaScript for Beginners course — toggles, form validation, API data and animations on click.
• Exploring Scriptly's other tutorials and practice problems to keep the streak going.