Верстка по БЭМ. Как будет правильнее?

Question

[Алексей]

Начал осваивать БЭМ, часто встречаю такие разные способы именования дочерних элементов, в связи с этим возник вопрос. Допустим у нас есть какой то попап с картинкой, полем ввода и кнопкой

Пример 1. Бывает так:

<div class="pop-up">
	<img src="#" alt="Картинка">
	<textarea class="pop-up__textarea" cols="30" rows="10"></textarea>
	<button class="button pop-up__button">
		<span class="button__text"></span>
	</button>
</div>

Пример 2. А бывает так:

<div class="pop-up">
	<img src="#" alt="Картинка">
	<textarea class="pop-up__textarea" cols="30" rows="10"></textarea>
	<button class="pop-up__button button">
		<span class="pop-up__text"></span>
	</button>
</div>

Какой пример правильный?
1. При условии, что кнопку нужно будет использовать повторно
2. Не нужно использовать повторно

Answer 1

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

Первый пример более правильный. Кнопка является отдельным блоком, который вы модифицируете в контексте pop-up, а содержимое кнопки является элементом кнопки. Такую кнопку вы можете без проблем использовать в любом месте сразу же с элементом button__text и модифицировать в контексте других блоков.

2. Не нужно использовать повторно

Даже если не нужно использовать повторно, возможно в будущем понадобиться. Сделав один раз более гибкий блок, вы упростите себе поддержку вашего проекта.

Answer 2

[unsweet]

Я бы вообще так сделал

<div class="pop-up">
  <img src="#" alt="Картинка">
  <textarea class="pop-up__textarea" cols="30" rows="10"></textarea>
  <а class="button pop-up__button">Текст на кнопке</а>
</div>

Ибо зачем громоздить лишние встроенные элементы.

А по вопросу: тут нужно смотреть, насколько разные кнопки используются, в целом я бы использовал первый вариант.

Comments

[Ankhena]

И классы именно в таком порядке class="button pop-up__button", потому что ты должен своим классом переопределять стили деолтной кнопки.

Не вводите в заблуждение. Без разницы в каком порядке классы идут в html, важен порядок в css.

https://jsfiddle.net/zs176ue3/

Answer 3

[Nikita]

2й вариант более правильный, т.к ты наследуешь парент.
НО Я НЕ ЭКСПЕРТ :D

Comments

[Алексей]

Но ведь если я захочу использовать кнопку в другом месте - получится каша в коде. Стиль кнопки определит .button, а стиль текста в ней .pop-up__text.

Логичнее чтоб было так: Стиль кнопки определит .button, а стиль текста в ней .button__text

[cssfish]

когда ту кнопку вставишь в другое место, никакого pop-up__text там уже не будет
вот в чем суть )

Answer 4

[cssfish]

Вся суть коммерческой разработки в том, что ты вообще не знаешь, где и что будет использоваться повторно. Поэтому с ростом безумия входящих требований растет безумие кода, в плане игры "на шаг впереди".

Не видя проекта - рассматривать эти оба варианта бессмысленно, т.к. можно набросать еще всяких разных, и они тоже будут рабочими. да хоть такой:

<div class="pop-up">
  <img src="#" alt="Картинка" class="pop-up__img ">
  <textarea class="pop-up__textarea textarea" cols="30" rows="10"></textarea>
  <button class="button pop-up__button">
    <span class="button__text pop-up__button_text"></span>
  </button>
</div>

Comments

[Алексей]

<span class="button__text pop-up__button_text"></span>

А именно "pop-up__button_text" - что то я тут запутался.

"_text" - модификатор для элемента? Если да то почему он присваивается "span" а не "button"?
или
"_text" - еще один элемент? Так Ведь БЭМ запрещает вкладывать элементы в элементы

[cssfish]

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

пишите на своем уровне понимания, не следуйте чужим правилам бездумно.

по вопросу - я отделяю элемент двумя подчеркиваниями, модификатор двумя тире. а все одиночные тире и подчеркивания использую где хочу (такая у меня система, например). вот и выходит, что:

блок .button
элемент. button__text

блок .pop-up
элемент .pop-up__button
элемент .pop-up__button_text

последние два - это разные элементы блока .pop-up. Потому что да, в БЭМ есть косяк - он "запрещает вкладывать элементы в элементы", но по факту это постоянно требуется. И на этот случай придумали обозначать вложенный блок как бы "независимым" именем элемента(но таким, чтоб понять к чему он относится :). Что конечно фигня, но вот как-то так оно и работает...

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

cssfish, А как вы тогда разделяете ключ-значение? Одним тире? тогда в вашем контесте реализации БЭМ pop-up должен выглядеть вот так pop_up

[cssfish]

Виталий, в моем - да