Is it ITCSS?
A little tool to check if your stylesheets follow ITCSS, [Harry Roberts]' school of thought for a better CSS organisation and utilisation.
What is ITCSS?
ITCSS is a school of thought that aims at organising CSS in a maintainable, extensible and predictable manner.
ITCSS stands for "Inverted Triangle CSS" and basically means all CSS is organised from lower specificity (i.e. broader impact) to higher specificity (i.e. smaller impact).
There are seven layers specified, all optional.
- Settings: Global variables, config switches
- Tools: Default mixins and functions
- Generic: Ground-zero styles (Normalize.css, resets, box-sizing)
- Base: Unclassed HTML elements (type selectors)
- Objects: Cosmetic-free design patterns
- Components: Designed components, chunks of UI
- Trumps: Helpers and overrides
Layers one and two are meant to be used for postprocessors.
Status of isitcss
It's a work-in-progress and is very limited yet, contributions absolutely welcome!
Current, known limitations:
- only listing a single selector per line
Installation of isitcss
It can be globally installed via npm install -g isitcss or locally for usage with npm scripts.
Usage of isitcss
isitcss your-stylesheet.css
You can also run it in quiet mode that outputs the number of violations in the exit code instead of STDOUT:
isitcss --quiet your-stylesheet.css