# 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: November 10, 2026

## [Naming and Structure](https://www.ask-codey.com/courses/css-in-depth/topics/css-naming-and-structure)

1. [Naming Things: BEM and Component Classes](https://www.ask-codey.com/lessons/css-bem-naming) (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](https://www.ask-codey.com/lessons/css-utility-first) (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](https://www.ask-codey.com/courses/css-in-depth/topics/css-frameworks)

1. [Bootstrap and Tailwind: What a Framework Gives You and What It Costs](https://www.ask-codey.com/lessons/css-frameworks-bootstrap-and-tailwind) (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](https://www.ask-codey.com/courses/css-in-depth/topics/exercise-css-library-refactor-bem)

1. [Exercise: Refactor the Library's Events Page](https://www.ask-codey.com/lessons/exercise-css-library-refactor-bem) (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.

Source: https://www.ask-codey.com/courses/css-in-depth/chapters/css-organizing-stylesheets