Before React or Vue, teams still needed predictable components: HTML partials, BEM-like classes, design tokens, and documented variants. That skill keeps framework output maintainable.
Practical structure
- Block:
.card - Element:
.card__title,.card__body - Modifier:
.card--featured - Tokens: colors/spacing in
:root
HTML template discipline
One source of truth for markup shape; CSS handles variants. Avoid duplicating slightly different card markup in five places.
Go deeper — Scaling to design systems (intermediate / experienced)
Document states: default, hover, focus, disabled, error. Pair with accessibility acceptance criteria per component. In large orgs, components live in a package or Storybook—under the hood it is still HTML + CSS contracts.
Pitfalls
- Global element selectors (`button {}`) that break third-party widgets.
- Modifier classes without a base block (`.--featured` alone).
- Leaking component styles via bare tag selectors inside apps.