БЭМ. Блок и его модификатор?

Question

[kid-programmer]

На сайте есть несколько разных заголовков, будет ли правильно сделать блок .header с модификаторами изменяющими его на нужный стиль.

<div class="page">
  <div class="page__header">
    <h1 class="header header_page">Заголовк страницы</h1>
  </div>
  <div class="page__slider">
    <div class="slider">
          <div class=slider__item> 
            <h1 class="header header_slider">Заголовк слайдера</h1>
          </div>
    </div>
  </div>
<div>

.header{}
.header_slider{}
.header_page{}

Грубо говоря .header будет пустым а все стили будут в .header_slider и .header_page..
Вопрос... по БЭМ так делать или что-то не правильно и лучше сделать по другому, как бы сделали вы?

Comments

[IceJOKER]

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

[Сергей Протько]

IceJOKER: когда большинство делает так как им удобно выходит не очень хорошо... к сожалению. Строгие правила это хорошо, а когда человек начинает их осознавать, зачем это надо и чем хорошо, тогда уже можно их нарушать, придумывать свои варианты правил и т.д. Но сначала - обезъянка видит обезъянка делает.

[kid-programmer]

IceJOKER "а если другой будет этим заниматься, то поймет ли он?" как раз для этого всякие методики и паттерны и существуют =)

[IceJOKER]

Сергей Протько: но и не стоит изначально пытаться удовлетворить всем правилам и сделать все идеально - НЕ ПОЛУЧИТСЯ, а после уже сам поймет как лучше и как не стоит. правилам можно соответствовать при выборе названия селекторов и т.д., т.е. общие правила, а автор вопроса пытается все сделать идеально, в списке вопросов БЭМ,БЭМ,БЭМ....

[Сергей Протько]

IceJOKER: про то что не получится согласен. оно и не получается у автора) и он пытается выяснить как сделать правильно что бы учитывать это в будущем)

[IceJOKER]

kid-programmer: ну так прочтите их, следуйте им, но не стоит заморачиваться на каждом шаге

[IceJOKER]

Сергей Протько: в таком случае можно 100500 подобных вопросов задавать, со своего опыта знаю, что у самого появлялись сотни вопросов как сделать лучше. лучше дефиз или подчеркивание, id или нужно class юзать, как так , как этак, а так лучше или так?
это то что узнаешь с опытом. Можно смотреть исходники продвинутых, но вопросы автора с содержанием БЭМ уже бесят

[kid-programmer]

IceJOKER спокойствие главное спокойствие =)) можно и не заходить по ссылке... а так мне очень сильно помогли разобратся последнии два вопроса))))

[Сергей Протько]

kid-programmer: воспринимайте все блоки как независимые единицы и все будет чуточку проще. Представьте что кроме того блока который вы сейчас делаете ничего нет и тогда нет проблем.

[IceJOKER]

kid-programmer: я то спокоен )) главное , чтоб вы сами себя не довели пытаясь достичь совершенства )

Answer 1

[Думай Головой]

А может не стоит отказываться от контекста и начать уже нормально работать?)
Столько времени тратится на постижение дзена БЭМ...

Answer 2

[Сергей Протько]

как бы сделали вы?

базовые стили (общие) в header, остальное в модификаторы в зависимости от нужд. Ну и да, не привязывайте именование модификаторов к контексту, для того что бы скажем добавить заголовкам маргин сверху от слайдера у вас элементы есть (slide__header)

В целом если сделать так:

<div class="page">
  <div class="page__header">
    <h1 class="header">Заголовк страницы</h1>
  </div>
  <div class="page__slider">
    <div class="slider">
          <div class="slider__item slide"> 
            <h1 class="slide__header header header--small" >Заголовк слайда</h1>
          </div>
    </div>
  </div>
<div>

ну вот как-то так... для более нагладного примера лучше привести макет или что-то упрощенное но передающую суть проблемы.

Comments

[kid-programmer]

Сергей Протько "не привязывайте именование модификаторов к контексту" ну так а если только в слайдере такой набор стилей и больше нигде (размер шрифта, цвет). Я понял что по БЭМ позионирование восновном задают элементы. У h1 может быть только шрифт, размер и цыет отличатся и если напрмер 5 заголовков на странице и все разные, как тогда быть?

[Сергей Протько]

kid-programmer: ну тогда да, тогда модификатор. Что-то типа header--big-red. Ну или можно поступиться принципами и задать шрифты и цвет у элемента, но это так говорит здравый смысл.

[Сергей Протько]

kid-programmer: ну и опять же, не привязываться это значит в большинстве случаев. В этом конкретном случае header--slide норм. Как и задать стили в элементе и не париться.

[hjk]

Сергей Протько а откуда эта мода двойного подчёркивания в css? Я такое часто встречаю в последнее время, то тут, то там. Я не фронтендер и за тенденциями слежу слабо. Поясните, пожалуйста.

[Сергей Протько]

hjk: вот в заголовке прям есть такая аббривиатура как BEM. Если погуглить то вы найдете правила именования. Двойные подчеркивания и дефисы выбрали как недвусмысленный разделитель. Ну то есть два нижних подчеркивания разделяют блок и элемент (блок вэтом случае как пространство имен). Два дефиса - модификатор. Таким образом мы можем использовать подчеркивания и дефисы в именах блоков, элементов и модификаторов и при этом видно что к чему. Но конечно можно не загоняться так.

[hjk]

Сергей Протько: о, спасибо, я туплю, что не загуглил БЭМ сразу.