ITCSS is a way of planning and structuring CSS for large and long-running project.
Selectors move from generic to specific, this means lower specificity selectors (those that affect a lot of DOM) appear towards the top, and the specificity increases as the project progresses. Ordering things this way takes advantage of the way CSS actually works.
ITCSS defines seven layers:
![ITCSS structure](https://prtksxna.com/wp-content/uploads/2020/04/itcss@2x.png)
Settings: Global project settings like font sizes and color palettes.
Tools: Globally used mixins and functions.
Generic: Things like CSS resets and box-sizing rules.
Elements: Bare, unclassed HTML elements. Should bind directly to tags (h1 {}
).
Objects: Layout systems and containers.
Components: Recognizable pieces of the UI. Should bind to classes only (.post-title {}
).
Trumps: Inelegant and heavy-handed helper classes, hacks and overrides.
The CSS files should be broken down and kept as granular as possible. The recommended naming convention is _<layer>.<partial>.scss
(for example: _settings.colors.scss
, _elements.headings.scss
, _components.tabs.scss
). These can then be imported in the above order in the final stylesheet.