ITCSS stands for "Inverted Triangle architecture for CSS" and it's a sane, scalable, managed architecture for CSS.
It's a school of thought, not a library or framework, and it's very simple.
There are three metrics that we order stylesheets by in ITCSS:
- Generic to explicit
- Far-reaching to localized
- Low specificity to high specificity
The main idea is to use the above metrics to order and organize styles, by specificity, into "layers".
There are seven default layers in ITCSS:
- Settings: Global variables, config switches, brand colors, spacing units
- Tools: Default mixins and functions
- Generic: Ground-zero styles, low-specificity, far-reaching (e.g. Normalize.css, resets,
box-sizing). - Base: Unclassed HTML elements (type selectors), h1-h6, links, etc.
- Objects: Cosmetic-free design patterns, agnostically named, OOCSS
- Components: Designed components, chunks of UI, more explicitly named (e.g. carousels, menus)
- Trumps: Helpers, overrides, utilities, only affect one piece of the DOM at a time, usually carry
!important
"Settings" and "Tools" are only relevant if you're using preprocessors.
Need theming? Add a "Theme" layer after the Components layer.
Add layers, as needed, in the correct place. Specificity and explicitness of selectors should dictate this.