File structure

Atomic Design System architecture with SCSS, ITCSS

Search…

File structure

Here a schema of the SCSS files structure and their naming scheme
styles/
├── settings-tools/
│   ├── _s.tokens.scss (generated)
│   ├── _s.colors.scss
│   ├── _s.magic-unit.scss
│   ├── _t.media-querie.scss
│   ├── ...
│   └── _allsettings.scss (this is a sub bundle containing all variables, mixins, and functions))
├── generics/
│   └── _g.reset.scss
├── elements/
│   ├── _e.lists.scss
│   ├── _e.input-fields.scss
│   ├── _e.headings.scss
│   ├── ...
│   └── _all-elements.scss (this is a sub bundle containing generic elements))
├── layouts/
│   ├── _l.grid.scss
│   ├── _l.drop-around.scss
│   ├── _l.drawer.scss
│   ├── _l.modal.scss
│   └── ...
├── atoms/
│   ├── _a.button.scss
│   ├── _a.headings.scss
│   ├── _a.input-field.scss
│   ├── _a.input-switch.scss
│   ├── _a.input-checkbox.scss
│   ├── _a.input-radio.scss
│   └── ...
├── molecules/
│   ├── _m.option-menu.scss
│   ├── _m.headings.scss
│   ├── _m.input-field.scss
│   ├── _m.input-switch.scss
│   ├── _m.input-checkbox.scss
│   ├── _m.input-radio.scss
│   ├── _m.modale-box.scss
│   └── ...
├── organisms/
│   ├── _o.navigation.scss
│   ├── _o.footer.scss
│   ├── _o.product-list.scss
│   ├── _o.search.scss
│   ├── _o.login.scss
│   └── ...
├── utilities/
│   ├── _u.spaces.scss
│   ├── _u.colors.scss
│   ├── _u.background.scss
│   ├── _u.text.scss
│   └── ...
​
Notes :
Some editors truncate the files names in the opened tabs, it's why we use a prefix before the file name : To make developper experience easier when working with a lot of opened files.
You can also see that there is a bundle that contain settings and tools. It is easier to import all tools and variables at once, and has no impact on the compiled css file size.

Conventions - Previous

Naming things

Next - Conventions

Files names and block names

Last modified 3yr ago

Copy link

Outline

Here a schema of the SCSS files structure and their naming scheme

Notes :