Where BEM answers 'how do I name this class', ITCSS answers a different question entirely: 'in what order should my entire stylesheet be structured'. The two combine naturally — BEM for component naming, ITCSS for file organization.
1The Core Principle: Specificity Only Increases
ITCSS, developed by Harry Roberts, is built on one rule: as you read through the compiled stylesheet from top to bottom, average selector specificity should never decrease. Settings and resets at the top touch everything with near-zero specificity; utility 'Trumps' at the bottom touch very little, with deliberately high specificity.
This single constraint has an outsized effect: because CSS already resolves ties by source order, and ITCSS ensures specificity never works against that order, the cascade behaves exactly as intuition suggests — later rules win, without exceptions requiring !important to force it.
2Walking Through The Seven Layers
Settings — variables only, produces zero actual CSS output (--color-brand). Tools — mixins and functions, also zero output. Generic — resets and normalize rules, extremely low specificity, wide reach (box-sizing: border-box on *). Elements — bare HTML tag defaults (h1, a, p) with no classes. Objects — undecorated, purely structural layout patterns using classes (.o-container, .o-grid) with zero cosmetic styling. Components — the bulk of your CSS: specific, styled UI pieces (.card, .button). Trumps — utilities and forced overrides, deliberately highest specificity, used sparingly.
Most teams spend nearly all their time writing Components. The other six layers are comparatively small and mostly stable once established, which is part of why ITCSS scales well — new features add Components without touching the foundational layers.
3ITCSS Answers 'Where', BEM Answers 'What To Call It'
ITCSS and BEM aren't competitors — they solve different problems and combine cleanly. BEM tells you that a card's title should be named .card__title. ITCSS tells you that .card__title belongs in the Components layer, imported after Objects and before Trumps.
This combination is extremely common in production codebases: an ITCSS-organized file structure (settings/, generic/, objects/, components/, trumps/ folders) where every file inside components/ uses BEM naming internally. Neither methodology alone answers both questions; together they do.
4Step-by-Step Breakdown
Organizing By Specificity, Not By Feature. ITCSS (Inverted Triangle CSS) doesn't tell you how to name a single class — it tells you how to order your entire stylesheet. Every layer, from broad, low-specificity settings down to narrow, high-specificity overrides, has an exact place, so specificity only ever increases as the file progresses.
The Inverted Triangle: Wide To Narrow, Low To High. ITCSS visualizes the stylesheet as an inverted triangle. At the wide top: broad-reaching, low-specificity layers like Settings and Generic that affect everything. At the narrow bottom: specific, high-specificity layers like Trumps that affect very few elements. Reach (how many elements a layer touches) and specificity move in opposite directions as you go down.
The Inverted Triangle Axis. As you move down through ITCSS's layers from top to bottom, what happens to specificity and reach?
- →Both specificity and reach increase
- →Specificity increases while reach (elements affected) decreases
- →There's no consistent pattern between layers
The Seven Layers, In Order. ITCSS defines seven layers, always in this order: Settings (variables, no output), Tools (mixins/functions, no output), Generic (resets, very low specificity), Elements (bare HTML tags like h1, a), Objects (layout patterns, class-based, no cosmetics), Components (specific UI pieces, most of your CSS lives here), and Trumps (utilities and overrides, highest specificity).
Layer Order. In ITCSS, which layer comes immediately before Components, and what does it contain?
- →Elements — bare HTML tag styling
- →Objects — undecorated, class-based layout patterns
- →Trumps — utilities and forced overrides
Why File Import Order Becomes The Architecture. ITCSS's real mechanism is deceptively simple: it relies entirely on source order. Because CSS's cascade already breaks ties by 'last rule wins', arranging low-specificity rules first and high-specificity rules last means the cascade naturally does the right thing — you rarely need !important, because nothing legitimate needs to fight its way to the top.
Source Order As Architecture. Why does ITCSS reduce the need for !important compared to an unordered stylesheet?
- →It technically disables !important in the browser
- →Because low-specificity rules are always imported before high-specificity ones, the natural cascade order already matches the intended override order
- →It has no actual effect on !important usage
Triangle Structure Internalized. You now understand how ITCSS organizes an entire stylesheet around a single principle: specificity should only ever increase as the file progresses. Combined with BEM for individual component naming, ITCSS gives you a complete answer for both 'what do I call this class' and 'where in the file does it belong'.
Write An Objects-Layer Class. ITCSS's Objects layer holds structural, cosmetics-free layout patterns like a flex media object.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Generic-Layer Resets Should Never Remove Focus Styles Globally
A common ITCSS Generic-layer mistake is including `* { outline: none; }` in a reset — because this sits at the top of the specificity triangle, it's technically easy to override, but teams often forget to, silently breaking keyboard focus visibility site-wide.
2Trumps-Layer Utilities Are The Correct, Deliberate Place For Accessibility Overrides
A utility like `.u-sr-only` (visually hidden but screen-reader accessible) belongs precisely in the Trumps layer, since it's meant to forcibly override a component's default visibility regardless of its own specificity.
SEO Implications
- 1
Layered Architecture Makes Critical CSS Extraction More Tractable
Because ITCSS cleanly separates broad foundational rules (Settings, Generic, Elements) from narrow, page-specific Components, tooling can more reliably identify which subset of CSS is needed for above-the-fold rendering.
- 2
A Small, Stable Generic/Elements Layer Improves Long-Term Cache Efficiency
Since these foundational layers change far less often than Components, splitting them into a separately cached bundle can reduce the amount of CSS re-downloaded on deploys that only touch feature-level styles.
Best Practices
Never Add Cosmetic Styling (Color, Typography) To The Objects Layer
Objects exist purely for structural, layout-only patterns reusable across many different visual components — mixing in cosmetics defeats their reusability and blurs the line with Components.
Keep The Trumps Layer Small And Deliberate
Trumps are meant for rare, intentional overrides and utilities — if it grows large, it usually signals that Components further up aren't structured correctly and are being patched instead of fixed.
Frequent Bugs
A component's styles are unpredictably overridden by a rule that comes later in the compiled CSS file.
Check whether the overriding rule lives in a later ITCSS layer (like Trumps) than it should — misplaced layer imports are a common source of unexpected cascade behavior.
A global reset accidentally removed all focus outlines, and nobody noticed until an accessibility audit.
Move outline-related resets out of the Generic layer, or immediately pair any `outline: none` reset with an explicit, visible `:focus-visible` style.
Real-World Examples
A Typical ITCSS Folder Structure
A production Sass codebase organizing every partial file according to ITCSS's seven layers, imported in strict order from a single entry file.
@import 'settings/colors';
@import 'settings/spacing';
@import 'generic/reset';
@import 'elements/headings';
@import 'objects/container';
@import 'components/card';
@import 'components/button';
@import 'trumps/utilities';