Files names and block names

Atomic Design System architecture with SCSS, ITCSS

Search…

Files names should use the the same firsts words of the block name
this allow us to find the related css file just by looking at a piece of markup. 
exemple : 
<!--...-->
<form class="go-login">
<!--...-->
organisms/_o.login.scss
.go-login {
    /*...*/
}
​
you can create families of blocks by referring to the first word of the block names in a filename
it is mostly useful for related atoms or utilities that you want to keep in a same file :
note that for families, the file-name is plural and the first word of the block family is singular
atoms/_a.headings.scss
.ga-heading {
    /*... no styles here, because it's not modifiers, just a block family */
    &-large {
        /* heading-large styles */
    }
    
    &-medium {
        /* heading-medium styles */
    }
}
note the notation, we don't use a modifier delimiter (.ga-heading--large but .ga-heading-large with one dash )
Keep related usage files together by using the same first word
├── atoms/
│   ├── ...
│   ├── _a.input-field.scss
│   ├── _a.input-switch.scss
│   ├── _a.input-checkbox.scss
│   ├── _a.input-radio.scss
│   └── ...

Conventions - Previous

File structure

Next - implementation guides

Settings and tools

Last modified 3yr ago

Copy link