Правильное использование БЭМ в CSS - PullRequest
Новая
       8

Правильное использование БЭМ в CSS

0 голосов
/ 02 сентября 2018

Я опытный человек с CSS, но недавно решил сделать решающий шаг и начать использовать BEM. По большей части я понимаю ценность использования такой плоской системы, избегая чрезмерно специфических селекторов и т. Д. *

Мой вопрос: правильный ли следующий подход? Это работает, технически, но также кажется хрупким: 

.badge {
  /* additional declarations */
  background: rgba(0, 0, 0, 0.2);
}
.badge--error {
  background: red;
}
.badge--success {
  background: green;
}

Это прекрасно работает из-за каскадной природы CSS. Таким образом, заданный по умолчанию фон успешно перезаписывается модификатором. Но если я помещу модификатор перед первоначальным объявлением, модификатор игнорируется (из-за одинаковой специфичности).

Есть ли проблемы с написанием БЭМ таким способом? Считается ли плохой практикой объявлять значение по умолчанию, например, background внутри блока, если оно будет перезаписано модификаторами? Должен ли по умолчанию background в этом случае жить в модификаторе .badge--default? Или я написал это по-настоящему в стиле БЭМ, а БЭМ фактически использует каскадирование CSS для того, чтобы оставаться плоским?

1 Ответ

0 голосов
/ 02 сентября 2018

Вы можете использовать переменные CSS 

.badge {
  background: var(--background);
}

.badge--error {
  --background: var(--error);
}

.badge--success {
  --background: var(--success);
}


:root {
  --background: yellow;
  --error: red;
  --success: green;
}
<div class="badge">
  a badge
</div>

<div class="badge badge--success">
  a badge success
</div>

<div class="badge badge--error">
  a badge error
</div>

<div class="badge" style="--background: purple">
  a badge random
</div>

Я не понимаю, почему модификатор не может изменить только фон, если он (не) установлен в начальном элементе.

Для BEM Я могу порекомендовать использовать препроцессор CSS, такой как SASS , поскольку он позволяет легко вкладывать элементы, поэтому меньше изменений в объявлении некоторого модификатора перед первоначальным объявлением. Благодаря вложенности ваш CSS становится намного более организованным. Также проще импортировать разные компоненты, чтобы каждый компонент мог жить в своем собственном файле.

С помощью SASS вы можете: 

.badge {
  &--error {}
  &--success {}
}
...