CSS Architecture Pt. 1: Inverted Triangle CSS (ITCSS)

An introduction to the ITCSS methodology - a scalable, layered approach to organising CSS that reduces specificity issues and improves collaboration across large projects.

Originally written by Carl Mills · January 2018

Why ITCSS?

Inverted Triangle CSS (ITCSS) is a methodology for organising and scaling CSS projects. It helps prevent specificity conflicts, reduces redundancy, and ensures styles cascade naturally from general to specific. The more complex the project - and the more developers involved - the more valuable this structure becomes.

Key Principles

  • Avoid ID selectors: They are too specific and can disrupt the cascade.
  • Use class selectors generously: Class-based CSS is more flexible and reusable.
  • Organise by components, not pages: Build self-contained styles that scale across the project.

The Inverted Triangle Model

ITCSS is best visualised as an inverted triangle. Styles flow from the broadest rules at the top to the most specific at the bottom, following three characteristics:

  • Explicitness: Starts broad and becomes increasingly specific.
  • Specificity: Low-specificity selectors at the top; high-specificity ones at the bottom.
  • Reach: Early selectors affect many elements; later ones apply to fewer, more targeted elements.

Example: Start by removing padding and margins from all elements, then progressively define rules for specific types or components.

The ITCSS Layers

Rather than grouping styles by purpose (like "typography" or "navbars"), ITCSS organises them by their level of impact and specificity. Each layer adds more detail to the design as it moves downward.

1. Settings

Global project variables, often managed via preprocessors like Sass or LESS.

2. Tools

Reusable mixins and functions - no CSS output, only helpers.

3. Generic

Global resets or base-level rules that affect broad areas of the DOM.

4. Elements

Base styling for HTML tags (h1, p, a).

5. Objects

Structural, class-based patterns such as wrappers, grids, or media objects.

6. Components

More specific, reusable UI parts like buttons, navbars, or cards - typically where most custom styling occurs.

7. Trumps

Overrides and utility classes. It's acceptable to use !important here since the rest of the CSS follows a logical cascade down to this layer.

Why ITCSS Works

ITCSS streamlines the natural flow of CSS - preventing the file from "jumping back" to redefine earlier rules. It encourages consistency and predictability, especially across teams.

It's compatible with other architectures like BEM (Block Element Modifier), SMACSS (Scalable and Modular Architecture for CSS), and OOCSS (Object Oriented CSS).

Next in the Series

In the next post, we'll explore the Block Element Modifier (BEM) methodology - a naming convention that works hand-in-hand with ITCSS to create scalable, collaborative front-end systems.

Continue to BEM →