Vextor-ltd
@Vextor-ltd
Webdeveloper

Как правильно использовать модификаторы в методологии BEM?

Привык добираться до нужного элемента разнообразными средствами CSS без использования методологии БЭМ. Но как добраться до элемента с использованием данной методологии, когда нужен, например, первый или последний элемент, или чётные или нечетные элементы, или определенные элементы? Ну, если необходимо, выбрать первый и последний элемент, то можно конечно модификатор подвесить в качестве дополнительного класса, но не знаю правильно ли это. И как быть в остальных случаях?
  • Вопрос задан
  • 301 просмотр
Решения вопроса 1
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
Зависит от ситуации, если есть возможность, лучше использовать модификатор.
БЭМ хорошо решает проблему специфичности, благодаря чему поведение становится более предсказуемое.
Например у нас есть какой-то блок(или элемент, не важно) .box__item и мы хотим первому добавить отступ слева, например так:
.box__item:first-child {
    margin-left: 10px;
 }

Все весело и прикольно пока нам не понадобилось переопределять стили... К примеру нам надо на экране выше 720px задать всем box__item одинаковые отступы:
@media (min-width: 720px) {
.box__item {
    margin-left: 20px;
 }
}

И тут то и начались проблемы, специфичность первого .box__item повышена и простой класс его не переопределит, первый блок так и останется с 10-ю пикселями, теперь нужно либо повысить специфичность всех .box__item, либо к каждому переопределению .box__item цеплять :first-child
.box__item,
.box__item:first-child {
    margin-left: 20px;
 }

Уже не так красиво? Конечно тем кто привык к вложенным селекторам это кажется обычным делом, но значит они еще не вкусили всего кайфа БЭМ, когда ты переопределяешь что хочешь и где хочешь не ожидая подвоха.
Простой модификатор может легко решить эту проблему и следующее переопределение .box__item без подводных камней задаст именно те стили какие мы хотели, можно даже не задумываться о том, что что-то пойдет не так
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
vovaspace
@vovaspace
Frontend Engineer
Вполне норм использовать :first-child и т. д. для элемента. Если речь идёт о блоке, то он уже не должен знать о своём расположении.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы