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

Question

[Влад]

Привык добираться до нужного элемента разнообразными средствами CSS без использования методологии БЭМ. Но как добраться до элемента с использованием данной методологии, когда нужен, например, первый или последний элемент, или чётные или нечетные элементы, или определенные элементы? Ну, если необходимо, выбрать первый и последний элемент, то можно конечно модификатор подвесить в качестве дополнительного класса, но не знаю правильно ли это. И как быть в остальных случаях?

Answer 1

[Виталий Першин]

Зависит от ситуации, если есть возможность, лучше использовать модификатор.
БЭМ хорошо решает проблему специфичности, благодаря чему поведение становится более предсказуемое.
Например у нас есть какой-то блок(или элемент, не важно) .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 без подводных камней задаст именно те стили какие мы хотели, можно даже не задумываться о том, что что-то пойдет не так

Comments

[Влад]

А как тогда с т.з. бэкэнда генерить эти модификаторы? Ведь он не умеет работать со свойствами браузера. На том же PHP никак ты не определишь экран выше 720px. Кроме как отдать всё на откуп CSS других вариантов я не вижу. А вы?

[Виталий Першин]

Vextor-ltd, Я вообще не понял вашу мысль. Ваши модификаторы модифицируют то что вам надо, на тех экранах на которых вы укажите, опишите конкретную задачу.

[Влад]

Виталий, P@Get-Web,

...
<div class="block__element">
<div class="block__element block__element--modificator">
<div class="block__element">
<div class="block__element">
...

Как вы нагенерите на бэкенде такую разметку при условии, что модификатор добавляется в том случае, когда экран выше 767px, а на остальных экранах без модификатора?

[Виталий Першин]

Vextor-ltd,

Как вы нагенерите на бэкенде такую разметку при условии, что модификатор добавляется в том случае, когда экран выше 767px, а на остальных экранах без модификатора?

Генерируйте сразу с модификатором, а сам модификатор адаптируйте под необходимые вам экраны через media, так же как вы это делали бы псведоклассами

Определение экрана это не проблема бекенда, если вы не выдаете разную разметку для разных устройств.. А вопрос в первую очередь должен звучать не как, а зачем? Зачем вам надо в этом месте использовать модификатор, поэтому я прошу конкретную задачу, а не абстрактный пример. У вас есть макет с которым у вас сложности или еще что-то что вызывает у вас трудности, покажите, возможно есть совсем другие способы решить проблему или я наконец-то пойму чего хотите вы. В первом своем предложении я написал, что все зависит от ситуации, а далее я написал какую конкретно проблему решает БЭМ, если ваша задача без псевдокласса не решается, значит используйте псевдокласс.

Answer 2

[Vladimir Lewandowski]

Вполне норм использовать :first-child и т. д. для элемента. Если речь идёт о блоке, то он уже не должен знать о своём расположении.

Comments

[Влад]

А, т.е. псевдоэлементы в этом случае с т.з. БЭМ ничем не отличаются от псевдоклассов? Фу ты.. наоборот ))