Atomic Design System architecture with SCSS, ITCSS
  • Introduction
  • Core principles
    • Atomic Design
    • ITCSS
    • Unifying ITCSS with ADS
    • Single Responsibility Principle (SRP)
    • Open / Close Principle (OCP)
  • Conventions
    • BEM : presentation
    • Our flavor of BEM
    • Prefixes
    • How to use the Modifier entity
    • How to use the Element entity
    • Media / responsives modifiers
    • General formatting
    • Declaration Orders
    • Comments
    • Naming things
    • File structure
    • Files names and block names
  • implementation guides
    • Settings and tools
    • Responsive and modularity rules
Powered by GitBook
On this page
  • Inverted triangle architecture (ITCSS)
  • What is ITCSS?
  • The ITCSS architecture layers
  • The layers are organized following those metrics

Was this helpful?

  1. Core principles

ITCSS

PreviousAtomic DesignNextUnifying ITCSS with ADS

Last updated 6 years ago

Was this helpful?

Inverted triangle architecture (ITCSS)

What is ITCSS?

Inverted Triangle architecture for CSS. A sane, scalable, managed architecture. A school-of-thought, not a library. A meta framework; a framework for frameworks. Incredibly simple.

The ITCSS architecture layers

  1. Settings: Global variables, config switches.

  2. Tools: Default mixins and functions.

  3. Generic: Ground-zero styles (Normalize.css, resets, box-sizing).

  4. Base/Elements: Unclassed HTML elements (type selectors).

  5. Objects: Cosmetic-free design patterns.

  6. Components: Designed components, chunks of UI.

  7. Utilities: Helpers and overrides.

The layers are organized following those metrics

  • From the generic to the explicit.

  • From low specificity to high specificity.

  • From global reach to localized reach.

I strongly recommend you to watch by Harry Roberts, and read this about it. You also can read the used in his talk

the video presentation
good article
PDF version of the slides
The ITCSS architecture layers
The ITCSS metrics organisation