Naming and Structure

Naming and Structure: Naming Things: BEM and Component Classes, Utility Classes and Utility-First CSS.

Updated November 10, 2026

1. Naming Things: BEM and Component Classes (Journeyman): BEM names every class after the component it belongs to, as block__element--modifier, so selectors stay flat and low-scoring and anyone on a team can find, change and reuse a component's styles.
2. Utility Classes and Utility-First CSS (Journeyman): A utility class does one small job, such as .text-center or .mt-4, and a few of them in a utilities layer handle one-off tweaks without new rules, while utility-first frameworks build whole pages from thousands of them.