Naming
This system uses baseline
BEM with
--
(double dash) denoting modifiers to classes and
__
(double underline) denoting elements in a block. For example:
<div class="block-element">
<span class="block-element__item">
<span class="block-element__nested-item"></span>
</span>
</div>
<div class="block-element--smaller">
<span class="block-element__item"></span>
</div>
<div class="block-element">
<span class="block-element__item--red"></span>
</div>
For
scss
it means that we should use nesting of classes whenever possible:
.block-element {
background: blue;
&--smaller{
font-size: .7em;
}
&__item{
color: white;
}
&__nested-item{
border: 1px solid;
}
}