Так по бэму сверстано или нет?

Question

[olya_097]

<section class="promo">
		
		
		<section class="promo__main">
			
			<!-- Текст -->
			<div class="promo__text">
				<h1 class="promo__title">Функциональное питание для котов</h1>
				<p class="promo__description">ЗАНЯЛСЯ СОБОЙ? ЗАЙМИСЬ КОТОМ!</p>
			</div>
			<!-- Кнопка -->
			<a class="promo__btn">Подобрать программу</a>
			<!-- Картинка  -->
			<div class="promo__image"></div>

		</section>


		<!-- Фон -->
		<div class="promo__bg"></div>

	</section>

Comments

[Ankhena]

О, Оля перешла на новый шаблон академии.

Это не противоречит БЭМ.
Но кнопка это блок.

Картинке не нужна обертка (разве что picture).

А promo__bg вообще не html тег, это либо псевдоэлемент либо просто фон.

[olya_097]

Ankhena, ну да
promo__bg псевдоэлемент
но просто он есть на половине экране на декстопе
на других разрешениях нет
по-другому нельзя ведь реализовать?

[Ankhena]

olya_097, я предложила 2 варианта на выбор, можете воспользоваться любым из них ;)

[Андрей]

По этому отрывку невозможно однозначно сказать по БЭМ или нет.

Одно замечание:
<a class="promo__btn">Подобрать программу</a>
это не кнопка, это ссылка без href. Кнопка это

<button class="promo__btn">Подобрать программу</button>

[Ankhena]

Еще перебор с section'ами. Но это уже не к БЭМ.

При правильном именовании классов комментариев в коде, как у вас, быть не должно. Потому что всё понятно по названиям классов.

[Сергей delphinpro]

Ankhena,

Но кнопка это блок.

Вовсе необязательно =) Вдруг это уникальная кнопка под дизайн блока, которой больше нигде нет и не будет?
upd Посмотрел макет ниже, всё-таки здесь кнопку стоит сделать блоком. =)

olya_097, Тут упомянули комментарии. Так вот, если вы делаете чисто верстку, которую потом будут передавать программисту для интеграции в cms, то ставьте такие комментарии:

<div class="super-block">
... много-много html
</div><!-- // .super-block -->

Комментируйте таким образом все более или менее крупные блоки (высотой более половины экрана). Программист обязательно помянет вас добрым словом, когда ему нужно будет разбирать вашу верстку на части.

Ну и на вопрос ответ — да, это БЭМ. Всё норм.

[Ankhena]

Сергей delphinpro, ага, поддерживаю, такие комментарии имеют смысл. Давно не было новых программистов в моей жизни, забыла о них))

[olya_097]

Ankhena, комментарии при вёрстке я и не делаю, это для того чтобы узнать по бэмк было или нет
Комментарии ясное дело не нужны
И не совсем понятно ваша фраза про новых программистов
К чему было сказано

[olya_097]

Сергей delphinpro, , комментарии при вёрстке я и не делаю, это для того чтобы узнать по бэмк было или нет
Комментарии ясное дело не нужны

[Ankhena]

olya_097, Фраза была Сергею. Вообще о том, что во-первых сама ставлю свою верстку на CMS, во-вторых, о том, что при постоянной работе с одними и теми же командами, знаешь что им нужно. А когда делается только верстка, которая попадет неизвестно к кому, тогда, конечно, хорошим тоном будет комментировать код.

Answer 1

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

Да, по БЭМ, без дизайна больше не скажешь.
Единственное что, я бы точно заменил promo__text например на promo__content

Ankhena,

Но кнопка это блок.

Не обязательно, если кроме контекста блока она нигде не будет использоваться.

Картинке не нужна обертка (разве что picture).

Все зависит от ситуации, вообще в БЭМ методологии обертки достаточно хорошая практика.

А promo__bg вообще не html тег, это либо псевдоэлемент либо просто фон.

При чем тут тег? Если это фон и возможно он будет анимироваться каким-то образом или вообще там будет динамический фон, то вполне не плохое решение.

Comments

[olya_097]

вот мобильная

планшет

десктоп

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

olya_097, В целом такой подход имеет место быть, кнопку действительно можно сделать отдельным блоком например btn, а позиционировать через микс promo__btn. То есть ваша кнопка будет иметь такие классы

<a class="btn promo__btn">Подобрать программу</a>

где btn имеет основные свойства кнопки, а promo__btn имеет свойства относящиеся непосредственно к тому месту где находиться, то есть в блоке promo, дополняя или переопределяя основные

[olya_097]

Виталий, а вкладывать секшин в секшин нормально?

[olya_097]

Виталий, а заменить на так же можно?

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

olya_097, Это уже вопрос не про БЭМ, но я бы вам советовал пользоваться дивами и не забивать голову html5 тегами.

[olya_097]

Виталий, второй вопрос не правильно написала
можно ли заменить <div class="promo__image"></div> на<img class="promo__image">

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

olya_097, Как раз именование классов, отвязывает нас от тегов, если вы хотите использовать блок как контейнер под графику, то почему бы и нет.

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

olya_097, вот этот БЭМап очень информативный, советую к просмотру https://www.youtube.com/watch?v=sX8xQrwk6ko

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

olya_097, Если вам помог мой ответ, отметьте его как решение.

[olya_097]

Виталий, да, спасибо