ITCSS: Structuring CSS from General to Specific

WHY IT EXISTS: CSS's global nature and the cascade make large projects brittle and hard to maintain. As teams and codebases grow, specificity conflicts, selector wars, and the overuse of !important become common, leading to unpredictable styling and a fear of making changes. ITCSS was created to impose a sane, scalable structure on CSS projects.

THE MENTAL MODEL: Imagine an inverted triangle. The top, widest part represents the most generic, far-reaching selectors with the lowest specificity (like a CSS reset). As you move down the triangle, the layers get narrower, more explicit, and more specific, ending at the pointy bottom with highly specific utility classes that can override anything.

HOW IT WORKS: ITCSS organizes your CSS codebase into distinct layers, which are imported in a specific order. A typical layering is: Settings (preprocessor variables), Tools (mixins/functions), Generic (resets), Elements (bare HTML tags like 'a'), Objects (un-styled layout patterns like '.o-grid'), Components (styled UI pieces like '.c-button'), and finally Trumps (utility classes and overrides like '.u-hidden'). This strict order creates a predictable specificity graph, making styles easier to reason about.

WHEN TO USE IT: On large, long-lived, component-based projects with a team of developers. It is ideal for building and maintaining design systems and complex web applications. It works especially well with CSS preprocessors like Sass, which can manage the importing of layer files.

WHEN NOT TO USE IT: For small, simple websites or single-page projects, the overhead of setting up the layers might be overkill. If you're using a CSS-in-JS solution that scopes styles by default, ITCSS is less necessary as it primarily solves problems of the global CSS cascade.

ONE CANONICAL EXAMPLE: A project's main Sass file would import partials in the prescribed order: @import 'settings/colors'; @import 'tools/mixins'; @import 'generic/reset'; @import 'elements/links'; @import 'objects/media-object'; @import 'components/card'; @import 'trumps/utilities';. This ensures that the .card component can build upon generic link styles, but a utility like .u-text-center can override a style within the card when needed.