Как правильно называть классы по БЭМ?

Question

[WebDev]

Допустим, есть блок сообщения, который состоит из шапки, тела и футера. Шапка в свою очередь состоит из имени и даты. Как в таком случае правильно назвать классы?

<div class="message">
    <div class="message__header">
        <div class="message__header__author-name"></div>
        <div class="message__header__publish-time"></div>
    </div>
   <div class="message__body">...</div>
   <div class="message__footer">...</div>
</div>

Меня смущают классы message__header__author-name и message__header__publish-time. Не слишком ли они длинные? До какой вложенности нужно удлинять название класса?

Comments

[alex-1917]

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

[alex]

Не слишком ли они длинные

т.е. вас смущает только длина? то что у этих классов неправильный бэм-синтаксис вас не смущает?

spoiler

элементы бывают только у блоков. элементов у элемента не бывает. элемент принадлежит блоку, неразрывно с ним связан и не имеет смысла вне его. поэтому в названии элемента всегда указывается названия блока. разделяются разделяются эти названия двойным подчеркиванием. в вашем примере пять элементов (header, author-name, publish-time, body, footer). все они принадлжет блоку message. учитывая все вышенаписанное, названия элементов блока message примут вид:

message__header
message__author-name
message__publish-time
message__body
message__footer

всё.

в нектороых случаях когда у вас напрашивается такая запись block__element1__element2, это говорит о том, что возможно вам нужно создать новый блок

Answer 1

[zoozag]

Вложенность

• Элементы можно вкладывать друг в друга.
  
• Допустима любая вложенность элементов.
  
• Элемент — всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию вида block__elem1__elem2