Синтаксис БЭМ в SASS
У меня простой HTML и CSS с БЭМ. Мне нужен стиль для класса .block__item-header-mark внутри класса .block__item-header — имеет раунд. Я использую CSS .block__item-header--has-round .block__item-header-mark { /стиль здесь/ }. Но я не думаю, что это хороший синтаксис.
Мой вопрос:
- Как вызвать .block__item-header-mark внутри .block__item-header--has-round с лучшим синтаксисом в моем коде SCSS?
- Мой синтаксис БЭМ хорош?
Код
.block {
&__item {
&-header {
&--has-round {
/* How to call .block__item-header-mark with better syntax ??? */
.block__item-header-mark {
/*overide style*/
}
}
&-mark {
/*normal style*/
}
}
}
}<div class = "block">
<div class = "block__item">
<div class = "block__item-header block__item-header--has-round"><span class = "block__item-header-mark"></span></div>
<div class = "block__item-body"></div>
</div>
</div>Классы БЭМ на вашем HTML идеально подходят. В CSS я не думаю, что вам нужно использовать всю иерархию, так как если вам нужен какой-то селектор для переопределения вашего стиля, математика будет сложной. Максимально ограничьте специфичность вашего селектора CSS.
Ответы 1
Вы можете создать переменную для ссылки на желаемую область
.block {
&__item {
&-header {
$header: &;
&--has-round {
#{ header }-mark {
/* override style */
}
}
&-mark {
/*normal style*/
}
}
}
}&--has-round &-mark <- не нарушит ли это БЭМ?
@zerkms Я не думаю, что это нарушает, но опять же, я давно не использовал БЭМ и могу ошибаться
@zerkms has-round — это модификатор, поэтому я вижу ошибку в том, что он должен быть &_has-round &-mark
Да, но &--has-round &-mark каскадный и больше не "плоский".
В моей голове модификаторы не были плоскими. Каскад имеет совсем другое значение, чем противоположность плоскому, поэтому я немного запутался во втором комментарии. я отредактирую свой ответ
Это совершенно прекрасный подход.