This is a general documents with my insights about ITCSS
| Triangle elements | +Info | Description |
|---|---|---|
| SETTINGS | 1 | used with pre... |
| TOOLS | 2 | globally used... |
| GENERIC | 3 | reset and/or... |
| ELEMENTS | 4 | styling for... |
| OBJECTS | 5 | class-based s... |
| COMPONENTS | 6 | specific UI... |
| UTILITIES | 7 | utilities and... |
- XFIVE ITCSS: Scalable and Maintanable CSS Architecture
- An introduction to Object Oriented CSS (OOCSS)
- create a repo with and schaffold structure
Footnotes
-
used with preprocessors and contain font, colors definitions, etc. ↩
-
globally used mixins and functions. It’s important not to output any CSS in the first 2 layers. ↩
-
reset and/or normalize styles, box-sizing definition, etc. This is the first layer which generates actual CSS. ↩
-
styling for bare HTML elements (like H1, A, etc.). These come with default styling from the browser so we can redefine them here. ↩
-
class-based selectors which define undecorated design patterns, for example media object known from OOCSS ↩
-
specific UI components. This is where the majority of our work takes place and our UI components are often composed of Objects and Components ↩
-
utilities and helper classes with ability to override anything which goes before in the triangle, eg. hide helper class ↩