How I Structure My CSS

Matthias Ott:

In this post, I will share my current take on CSS structure. It does not religiously follow any particular methodology, although people familiar with Harry Roberts’ ITCSS (“Inverted Triangle CSS”) will definitely recognize parts of his methodology.

The folder structure indeed looks very familiar:

/scss/
├── 1-settings
├── 2-design-tokens
├── 3-tools
├── 4-generic
├── 5-elements
├── 6-skeleton
├── 7-components
├── 8-utilities
├── _shame.scss
└── main.scss

Thanks for sharing, Matt. Always great to compare (and in this case validate) my own approach to other people’s work.

How I Structure My CSS →