ITCSS - Inverted Triangle CSS - is a way to structure your CSS files in a project so you can easily manage and organize CSS styles.
ITCSS works well with other methodologies like BEM, Atomic CSS, Sass, etc.
It's created/suggested by Harry Roberts (https://twitter.com/csswizardry?lang=en), and here you can find infos: https://csswizardry.net/talks/2014/11/itcss-dafed.pdf
1 - Settings
- functions (used sometimes to define values in settings)
- Global variables and configuration
2 - Tools
- Mixins, utilities, functions
3 - Base: ground zero styles
- No classes:
- normalize/reset
- type selectors
4 - Classes
- Utility classes
5 - Layout (Objects)
- Cosmetic-free and reusable design patterns, only define layout and positioning: containers, grid, column
- First layer of class-based selector
6 - Components
- Specific cosmetic elements of UI
- first layer that introduce visual styling: buttons, forms, products-list
- Use explicit class names (eg. .products-list)
7 - Modules
- Multi-part components: navbar, cardlist
8 - Trumps
- Overrides and helper classes