Как лучше писать отступы для BEM блоков?

Question

[wakenbyWork]

Вообщем мне посоветовали так писать отступы для bem блоков:

<div class="bem-block mt-20 mb-40"></div>

1) Хорошая ли практика так делать?

2) Если в адаптиве отступы меняются, то норма ли писать такое?:

.mb-40 {
    margin-bottom: 40px;
    
    @media (max-width: 767px) {
      margin-bottom: 20px;
    }
  }

Ведь не у всех блоков с классом mb-40 в адаптиве может меняться отступ на более меньшей, и будет путаница((

Comments

[Михаил]

на tailwind посмотрите

[Сергей delphinpro]

Если в адаптиве отступы меняются, то норма ли писать такое?:

не норма

<div class="bem-block mt-20 mt-md-40"></div>

.mt { margin-top: 20px; }

@media (min-width: 767px) {
  .mt-md-40 { margin-top: 40px; }
}

[Егор Живагин]

Дальше очень субъективное мнение:
Сколько раз видел этот подход, столько раз с командой от него избавлялся. Захлямляются классы в разметке, сокращения до двух букв плохо читаются, стили одного компонента становятся разбиты на несколько мест/файлов. Плюс, как вы сами сказали, не везде одинаковые изменения для адаптива, поэтому выносить медиа-запросы в такие общие классы - не всегда хорошая идея.
То же самое гораздо удобнее делать через scss-переменные или миксины. Если у вас очень много классов, отступы которых должны вести себя одинаково - это нормальный подход.
Если у разных классов отступы ведут себя по-разному - зачем выносить это в общие классы?

Answer 1

[Realetive]

То, что написал Сергей delphinpro, не имеет отношения к БЭМ — из-за таких «советов» у Егор Живагин потом куча проблем и ложное представление о методологии.
Как советует Михаил — посмотрите на Tailwind — там куча примеров готовых компонентов с уже расставленными классами. Так вот, Tailwind к БЭМ тоже не имеет никакого отношения, хотя именно там используются «атомарные стили» вида mt-40 / pd-20 / и т. д. Понимание концепции БЭМ стоит начинать с bem.info, а если останутся или появятся вопросы — в официальный канал @bem_ru.

Comments

[Сергей delphinpro]

Это был не совет. И я нигде в своем комменте не упомянул БЭМ. Даже в ответе не стал писать. Мой коммент был именно по "правильности" организации и использования таких атомарных хелперов.

Если же говорить о БЭМе, то тут у блоков вообще не должно быть внешней геометрии. Я сто раз подробно и не очень об этом писал на этом сайте, повторяться надоело.

[Realetive]

Сергей delphinpro, но вопрос-то был про БЭМ. В БЭМе атомарные хелперы — антипаттерн, т. к. сами по себе противоречат принципу Абсолютно независимого блока. Про отсутсвие «внешней геометрии» (а margin-свойство влияет на внешнюю геометрию, как и position или явное задание width / height) — вы абсолютно правы, но пример вводит в заблуждения с точки зрения соответствия методологии.