The summary.
MOST CONFUSION ABOUT STYLES NOT APPLYING IS A CASCADE QUESTION
Origin, then specificity, then order. The browser inspector shows which rule won and why.
Keep specificity low — low specificity is easy to override deliberately; high specificity forces escalation.
SET SIZING TO INCLUDE PADDING AND BORDER, GLOBALLY
Otherwise an element declared at a given width occupies more than that.
STYLE WITH CLASSES, ORGANISED BY COMPONENT
Not identifiers, not long selector chains, and not selectors depending on document structure that may change.
GRID FOR PAGE STRUCTURE, FLEXBOX WITHIN COMPONENTS
Use the gap property rather than margins on children.
SIZE TEXT IN RELATIVE UNITS, AND NEVER FIX THE HEIGHT OF ANYTHING CONTAINING TEXT
Fixed sizes ignore user preferences, and fixed heights clip text when it grows.
CONSTRAIN LINE LENGTH — VERY LONG LINES MAKE FINDING THE NEXT LINE DIFFICULT.
DEFINE COLOUR, SPACING AND TYPE AS NAMED VALUES
Then audit how many distinct ones actually exist. It is always more than intended.
NEVER CONVEY MEANING BY COLOUR ALONE, AND ALWAYS CHECK CONTRAST
It is the commonest accessibility failure, and it is measurable.
