Frameworks and Architecture

CSS Frameworks, Libraries and Architecture

Every CSS feature in this chapter can be written by hand, but few teams start from an empty stylesheet. A framework hands you a design system: a grid, components and utility classes. A library solves one narrower problem such as a reset, a set of animations or an icon font. An architecture is a naming and layering discipline that keeps your own CSS maintainable when it grows past a few thousand lines, and a scoping tool (CSS Modules, CSS-in-JS) enforces that discipline with a compiler instead of code review.

These choices interact. Utility-first frameworks make most naming conventions unnecessary; component frameworks such as React 7,897 push you toward CSS Modules or a compile-time styling library; and native cascade layers and @scope (@layer and @scope) now cover part of what methodologies were invented to solve. Bootstrap 2,007 is taught in Bootstrap and Tailwind CSS 5,202 in Tailwind CSS, so here they appear only for comparison.

Subsections