How ITCSS Organizes Stylesheets by Specificity

Inverted Triangle CSS (ITCSS) is a scalable CSS methodology that manages specificity and inheritance by ordering stylesheets in a hierarchical, tiered structure shaped like an inverted triangle. This article explains how ITCSS functions, breaking down its seven distinct layers—from broad, low-specificity global rules down to narrow, high-specificity overrides—to demonstrate how it prevents CSS specificity conflicts and creates predictable stylesheets in large web projects.

The Principle of the Inverted Triangle

Standard CSS projects often suffer from the "specificity war," where developers use nested selectors or !important to override previously declared styles. ITCSS, conceived by Harry Roberts, mitigates this by visualizing stylesheets as an upside-down triangle:

  • Top (Wide): Styles with global reach, low specificity, and generic application.
  • Bottom (Narrow): Styles with localized reach, high specificity, and explicit application.

By strictly importing styles in an ascending order of specificity, every subsequent rule naturally overrides earlier ones without requiring artificial specificity hacks.

The Seven Layers of ITCSS

ITCSS breaks the stylesheet into seven logical layers, organized strictly from lowest to highest specificity.

1. Settings

The Settings layer contains global configuration variables, such as colors, typography definitions, breakpoints, and sizing units. Because it strictly defines variables (such as Sass, Less, or CSS Custom Properties), it generates zero CSS output and carries no specificity.

2. Tools

The Tools layer houses functions and mixins used across the project. Like Settings, this layer does not output any CSS rules directly upon definition; it only provides the logic required to build later styles. Specificity remains at zero.

3. Generic

The Generic layer is the first layer that outputs actual CSS. It includes resets, normalize rules, and basic box-sizing declarations. These rules apply globally to broad selectors (such as the universal selector * or basic attributes) and carry the lowest possible specificity in the rendered stylesheet.

4. Elements

The Elements layer styles bare, unclassed HTML tags (e.g., h1, p, table, a). This layer establishes default base styles for the entire site. Selectors remain strictly single-element type selectors, keeping specificity minimal while setting a consistent baseline before any classes are introduced.

5. Objects

The Objects layer follows Object-Oriented CSS (OOCSS) principles, defining non-cosmetic, structural patterns. Examples include layout systems, grids, and container wrappers (often prefixed, e.g., .o-grid or .o-media). Styles here rely on single class selectors, stepping up specificity from raw HTML element selectors without dictating visual aesthetics like background colors or borders.

6. Components

The Components layer contains explicitly designed UI modules, such as buttons, navigation bars, modals, and cards (e.g., .c-card, .c-btn). These components carry aesthetic styling (colors, shadows, branding) and override or flesh out the structural rules established by Objects. Selectors remain class-based, occasionally utilizing BEM (Block Element Modifier) naming to keep specificity flat and predictable.

7. Utilities

The Utilities layer sits at the narrowest point of the triangle and contains high-precedence, single-purpose helper classes (e.g., .u-hidden, .u-text-center). Because these utilities are designed to explicitly override any preceding component or layout rule, they carry the highest specificity in the project, often utilizing !important by design to guarantee they take effect regardless of context.

Benefits of Specificity Management in ITCSS

  • Upward Specificity Trend: CSS source order naturally handles overrides, maintaining a healthy specificity curve across the entire codebase.
  • Elimination of Overriding Hacks: Developers do not need to artificially chain classes, nest selectors, or improperly apply !important to overcome inherited styles.
  • Decoupled Architecture: Visual cosmetic components remain separate from structural layout objects, making styles reusable and refactoring safer.