Files names and block names

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
│   └── ...