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

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

Пример 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. Не нужно использовать повторно
  • Вопрос задан
  • 204 просмотра
Решения вопроса 1
Get-Web
@Get-Web Куратор тега HTML
Front-End Developer
Первый пример более правильный. Кнопка является отдельным блоком, который вы модифицируете в контексте pop-up, а содержимое кнопки является элементом кнопки. Такую кнопку вы можете без проблем использовать в любом месте сразу же с элементом button__text и модифицировать в контексте других блоков.

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

Даже если не нужно использовать повторно, возможно в будущем понадобиться. Сделав один раз более гибкий блок, вы упростите себе поддержку вашего проекта.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@unsweet
Я бы вообще так сделал
<div class="pop-up">
  <img src="#" alt="Картинка">
  <textarea class="pop-up__textarea" cols="30" rows="10"></textarea>
  <а class="button pop-up__button">Текст на кнопке</а>
</div>

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

А по вопросу: тут нужно смотреть, насколько разные кнопки используются, в целом я бы использовал первый вариант.
Ответ написан
etozhetisachniy
@etozhetisachniy
2й вариант более правильный, т.к ты наследуешь парент.
НО Я НЕ ЭКСПЕРТ :D
Ответ написан
@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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы