Selectors choose elements
Type, class, attribute, and state selectors describe which elements a rule affects. Start with selectors that express a stable role; long chains tied to page structure are harder to understand and reuse.
The cascade compares competing rules
Origin, importance, cascade layer, specificity, and source order help determine the winner. Inheritance is separate: some values, such as text color, can flow from a parent when the child has no winning value of its own.
A familiar example
Styling a primary button
- A shared button class provides shape and spacing.
- A primary variant class supplies the accent colors.
- A hover rule changes only the interactive state instead of repeating the whole button style.
What to remember
- Use stable, readable selectors.
- Source order matters only after stronger cascade factors tie.
- Prefer a clear style system over repeated specificity battles.