Choosing what to style.
WHAT SELECTORS EXIST
Element names Classes Identifiers Attributes Relationships between elements State, such as hover or focus Structural position, such as the first or last child
WHAT TO USE PRIMARILY
Classes.
WHY
They are reusable, and their specificity is manageable.
WHAT TO AVOID FOR STYLING
Identifiers, which are highly specific and cannot be reused Long chains of selectors Selectors depending on document structure that may change
WHY THAT LAST ONE
A change to the markup silently breaks the styling.
WHAT NAMING CONVENTIONS PROVIDE
Predictable class names, so styles can be found and their scope understood.
WHAT ANY CONVENTION SHOULD ACHIEVE
Knowing what a class does from its name Knowing where it applies Avoiding unintended overlap
WHAT TO KEEP LOW
Specificity, generally.
WHY
Low specificity is easy to override deliberately. High specificity forces escalation.
WHAT TO ORGANISE BY
Component, rather than by page.
WHY
Components are reused; pages are not.
