ITCSS

ITCSS is a CSS architecture created by Harry Roberts.

It’s an acronym that stands for:

Inverted Triangle CSS

It’s a modern, and very awesome, CSS approach designed for scalability and maintainability. This architecture is achieved with mindful CSS code organization. This organization structure is based on CSS “specificity” and can be visualized as an upside-down triangle.

The Triangle

As the name implies, your CSS code-base is to be organized in an upside-down triangle based on specificity. In other words, your super basic general styles rules should be added first, and your incredibly, perhaps obnoxiously, specific rules and overrides should be added last.

Behold, the Ultimate Triangle of Specificity! 🙌

ITCSS: Diagram

Note: Harry doesn’t actually call it the “Ultimate Triangle of Specificity”… but we are. Why not? It’s a cool name.

The organization of specificity is defined by a series of “layers”.

Layers

Note: Tools are specific to pre/post-processing languages like Sass or PostCSS, as mixins and functions aren’t supported in native CSS.

  • Settings – Variable configurations for things like colors, fonts, sizes, etc…
  • Tools – Globally used mixins and functions.
  • Generic – CSS resets and normalizing rules to create a foundation for your styles.
  • Elements – Style rules for bare HTML elements (like h1 or button).
  • Objects – Style rules for elements responsible for layout or structuring.
  • Components – Style rules for UI components.
  • Trumps – Helper or utility rules that tweak Objects or Components by adjusting and override existing rules.

Reach

In addition to specificity, the Triangle also illustrates the number of things your rules will impact, or “Reach”.

ITCSS: Key Metrics

In the example below, we have two CSS rules: a super generic one and an incredibly specific one.

styles.scss
// Super super generic
a {
  color: hotpink;
}

// Incredibly specific
.s-purchase-page .c-modal a.linky {
  color: orangered;
}

The super generic one isn’t very specific, can be easy overridden with other rules. However, it has an incredible amount of “Reach”, since it updates every single <a> tag.

On the other hand, the incredibly specific rule, only affects <a> tags in a very specific circumstance, so it’s “Reach” and impact is minimal.

See also

References

↑Back to top
© Help Scout 2024