.b{
// желательно использовать для общих стилей
}
b--m{
// желательно использовать для внешнего вида.
}
.b__e{
// желательно использовать для позиционирования.
}/// Block Element
/// @access public
/// @param {String} $element - Element's name
@mixin element($element) {
&__#{$element} {
@content;
}
}
/// Block Modifier
/// @access public
/// @param {String} $modifier - Modifier's name
@mixin modifier($modifier) {
&--#{$modifier} {
@content;
}
}.block {
/* CSS declarations for `.block` */
@include element('element') {
/* CSS declarations for `.block__element` */
}
@include modifier('modifier') {
/* CSS declarations for `.block--modifier` */
@include element('element') {
/* CSS declarations for `.block--modifier__element` */
}
}
}Object-fit
<a href='#'>Кнопка</a>, но оно не очень похоже на кнопку, поэтому:<a class='button' href='#'>Кнопка</a>// COMMON
.button{
display: inline-block;
padding: 0.5em 1em;
text-align: center;
text-decoration: none;
}// SIZE
<a class='button button_size_m' href='#'>Кнопка</a>
<a class='button button_size_l' href='#'>Кнопка</a>
// COLOR
<a class='button button_primary' href='#'>Кнопка</a>
<a class='button button_secondary' href='#'>Кнопка</a>/* _MODS_ */
// SIZE
.button{
&_size_s{
font-size: 1rem;
}
&_size_l{
font-size: 2rem;
}
}
// COLOR
.button{
&_primary{
background: #607D8B;
color: #ffffff;
}
&_secondary{
background: #8BC34A;
color: #ffffff;
}
}<a class='button button_primary button_size_l header__button' href='#'>Кнопка</a>// PARENT__BLOCK
.header{
&__button{
display: block;
width: 200px;
margin: 0 auto;
}
}