Organizing Stylesheets
Write CSS other people can work with: name classes with BEM, use small utility classes where they help, and see what frameworks such as Bootstrap and Tailwind do for you and what they cost.
Updated
Naming and Structure
- 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.
- 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.
CSS Frameworks
- Bootstrap and Tailwind: What a Framework Gives You and What It Costs (Journeyman): The same library event card built in plain CSS, in Bootstrap 5.3.8 and in Tailwind CSS 4.3.3 shows what a CSS framework gives you (speed, consistency, ready-made parts), what it costs (download size, look-alike sites, new names) and how your own CSS makes it yours.
Exercise: Refactor the Library's Events Page
- Exercise: Refactor the Library's Events Page (Freelancer): Rename a library events page's id selectors and long chains to flat BEM classes, move its helpers into a utilities layer, and keep the page looking exactly the same while six checks confirm it.