Skip to content
Design

ITCSS: A CSS Architecture That Scales

From reset to utilities: how the inverted-triangle CSS layers in Peerless keep specificity flat and overrides rare.

Kayron Macon

CSS does not rot because developers are careless. It rots because most stylesheets have no rule about what may override what. ITCSS is that rule.

The inverted triangle

Peerless organizes its CSS in layers ordered from broad to specific: generic resets, layout objects, base elements, components, and finally utilities. Each layer may only depend on the layers above it.

Why it matters

Specificity stays flat, so overrides are rare and intentional. When you do need to customize, you know exactly which layer to touch: brand tokens live in settings, component looks live in components, and one-off helpers live in utilities.

The payoff compounds: a year of edits leaves the stylesheet organized instead of layered with exceptions.

The layers at a glance

  • Settings — design tokens: colors, fonts, spacing units.
  • Generic — resets and normalization.
  • Objects — layout patterns with no cosmetics.
  • Elements — base HTML tag styling.
  • Components — the visible UI, one file per concern.
  • Utilities — deliberate, single-purpose overrides.

Those settings-layer tokens are also what make instant re-theming possible — see theming with CSS variables.
,

About the Author

Founder, Developer, Marketer of Sports Page.

Comments