How I Structure My CSS

Written by / Original link on Oct. 18, 2021


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:

├── 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 →

This approach is a perfect fit to be used with Cascade Layers in the near future 😉

bram tutorialzine link structure bram

« Non-Euclidean Worlds Engine - Customise the React Native Developer Menu with Dev Settings API »