Files names and block names

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 {
    /*...*/
}

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 )

├── atoms/
│   ├── ...
│   ├── _a.input-field.scss
│   ├── _a.input-switch.scss
│   ├── _a.input-checkbox.scss
│   ├── _a.input-radio.scss
│   └── ...

Last updated

Was this helpful?