Правильно ли сверстано по БЭМ?

Question

[ihabia]

Пытаюсь осваивать и внедрять методологию БЭМ, но пока есть сомнения со вложенностями, названия классов всё длиннее становятся, чем глубже ) Не уверен, что правильно пока понимаю это.
Я сверстал небольшую часть, хотелось бы узнать, правильно ли я делаю?

<header class="header">
    <div class="container">
        <div class="header__logo">
            <h2 class="header__title">APP Design</h2>
            <p class="header__description">Free PSD Website Template</p>
        </div>
        <form action="" class="header__search">
            <input type="text" placeholder="" class="header__search-field">
            <button class="header__search-button">Search</button>
        </form>
    </div>
</header>
<section class="featured">
    <div class="container">
        <div class="featured__img">
            <img src="images/phones.png" alt="">
        </div>
        <div class="featured__text">
            <h1 class="featured__title">Cursus penati saccum nulla.</h1>
            <p class="featured__description">
                This is a W3C standards compliant free PSD website template from OS Templates. This template is distributed using a Website Template Licence. For more free PSD templates visit
                <br><a class="featured__link" href="https://www.os-templates.com/">OS-Templates.com</a>
            </p>
            <a class="featured__btn" href="https://www.os-templates.com/">
                <img src="images/icon_iphone.png" class="featured__btn-icon">
                <span>Now on the app store</span>
            </a>
        </div>
    </div>
</section>

Comments

[Никита Юдин]

Правильно

[ihabia]

Никита Юдин, меня больше всего тревожит длина классов, грубо говоря, если бы в элементе .header__search-button были бы ещё вложенности, то тогда класс разрастается до "безобразия" , можно было бы конечно так же приписывать дальше к .header__search, но теряется принадлежность к .header__search-button. Вот этот момент мне не очень понятен.

[Rustam Bainazarov]

ihabia, это, по-вашему, длинное название класса? :))

Посмотрите, какие классы на крупных ресурсах. Даже того же Яндекса.

Всё нормально, словом.

[Никита Юдин]

ihabia, ВОТ можно почитать подробнее про длинные названия
Во-первых, button можно сократить до btn.
Во-вторых, все вложенные элементы в header__search будут начинаться на header__*, а не на header__search__*
То есть в именах указывается одноуровневая вложенность.
Например, header__search__link будет неправильно, а правильно будет написать header__link

Answer 1

[Сергей delphinpro]

ihabia, Класс не может разрастаться до безобразия из-за вложенности,
потому что вложенность всего лишь одна Блок -> Элемент.

В вашем случае у вас есть косяк в разметке.
1. Логотип это вполне самостоятельный блок.
2. Поиск тем более.
3. Вкладывать прослойки в блоки в принципе допустимо, это не косяк, но когда речь идет лишь о декорации, то вряд ли стоит.

Итого имеем четыре блока (ну и контейнер, как сущность модульной сетки):

<header class="header-section">
    <div class="container header">
        <div class="header__logo logo">
            <h2 class="logo__title">APP Design</h2>
            <p class="logo__description">Free PSD Website Template</p>
        </div>
        <form action="" class="header__search search-form">
            <input type="text" placeholder="" class="search-form__field">
            <button class="search-form__button">Search</button>
        </form>
    </div>
</header>

.header-section {}

.header {
  &__logo {}
  &__search {}
}

.logo {
  &__title {}
  &__description {}
}

.search-form {
  &__field {}
  &__button {}
}

Достаточно простая разметка, простые стили, независимые блоки.

Вторая секция более-менее нормально размечена.

Comments

[lamer350]

Как можно было так раскрыть тему по БЭМ в одном простом сообщении? Я смотрел в свое время с 10к видео уроков изучал все метологии и остановился на Яндексе и все равно допускаю ошибку топикмастера.

[ihabia]

Сергей delphinpro

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

Подскажите, а что означает прослойки?

[Сергей delphinpro]

ihabia, это я так обозначил посторонний элемент в блоке:

<div class="block">
  <div class="container"><!-- вот это -->
    <div class="block__element">
    </div>
  </div>
</div>

[Дмитрий Христоев]

- т.е. header вы назвали header-section, а вложенный контейнер .header? Где логика?
- вы написали, Логотип - это самостоятельный блок, так почему у него 2 класса, а не один logo?
- ну и лого h2, это уже вопрос к выше стоящему. Как может быть h2 выше h1? Вам сеошник по рукам надает.

[ihabia]

Дмитрий Христоев, я в сео не очень разбираюсь, но чисто по макету, самый крупный шрифт идет в блоке ниже, чем который в шапке

[Дмитрий Христоев]

ihabia,
1 - кто сказал что логотип должен быть h2? вот есть чеклист верстки https://github.com/ihorzenich/html5checklist/ это не значит, что я на 100% согласен, нет, но там есть пример, лого на главной h1, дальше лого - див. h1 - на остальных, название страницы. Такое, по крайней мере раньше, можно было везде увидеть на забугорных сайтах.
2 - вы делаете стилистику заголовков, но кроме h1, h2 и тд вы делаете .h1, .h2 - классы, и если вам надо поставить стилистику заголовка, ставите класс. Потому что расположение заголовков должен определять сеошник после анализа сайта.

[Сергей delphinpro]

Дмитрий Христоев,

- т.е. header вы назвали header-section, а вложенный контейнер .header? Где логика?

Да, это спорный момент. Я отметил, что это не косяк, но чаще всего это просто какой-нибудь фон во всю ширину страницы, а внутри уже расположен container сетки и непосредственно сам header. Т.е. здесь видится два отдельных блока — внешняя обертка (header-section, назовите класс как угодно) и сам а шапка (header).

вы написали, Логотип - это самостоятельный блок, так почему у него 2 класса, а не один logo?

Потому что ничто не мешает блоку быть одновременно элементов другого блока. На БЭМ инфо об этом есть отдельное упоминание и разъяснение. В простейшем случае для понимания — блок независимый, не позиционируется. Элемент может позиционироваться в своем блоке.
Например:

.header > .header__logo.logo
и
.footer > .footer__logo.logo

.logo { какие-то стили }

.header__logo { margin-left: 20px; }
.footer__logo { margin-left: 100px; }

ну и лого h2

Тут верное замечание. Я просто скопировал код. Мы же не о семантике говорим, а о БЭМе.

[Realetive]

lamer350, не знаю, поможет ли, но цель доклада была именно такая — как упростить «дробление» на блоки-элементы-модификаторы: https://youtu.be/QArmhI33zwY?t=6669 (начало с 1:51)

[ihabia]

Дмитрий Христоев, Не спорю, скорей всего много недочетов, т.к. это мой первый макет и я пытаюсь сделать его грамотно, поэтому задаю вопросы, что бы дальше в правильном направлении идти. Какого то ТЗ у меня нет, я делаю чтобы набить руку и попутно разбираю нюансы. На данном этапе ваш ответ пока сложно переварить ) Если можно в краце, как в моём случае будет грамотнее сделать заголовки. Вот этот макет: перейти
Собственно, то что справа от телефонов я сделал h1.

[ihabia]

Сергей delphinpro,

Т.е. здесь видится два отдельных блока — внешняя обертка (header-section, назовите класс как угодно) и сам а шапка (header).

А как быть с секциями, в моем случае <section class="featured">, так же быть с контейнером? Вроде секции принято называть главным блоком и уже что внутри, элементы. Или так как вы писали лучше сделать?:

<section class="featured-section">
	<div class="container featured">
		<div class="featured__img">

[Сергей delphinpro]

ihabia, все это весьма спорно. и так и так можно делать. и это нормально будет.

Просто внешняя обертка часто выполняет чисто декоративную функцию — какой-нибудь фон во всю ширину. Может быть несколько секций с одинаковым фоном. Отделяя обертку в отдельную сущность, мы легко можем использовать заданное ей фоновое оформление для других блоков.

[ihabia]

Сергей delphinpro, постепенно обрабатываю информацию ) и не сразу заметил, что это не CSS

.header {
  &__logo {}
  &__search {}
}

Подскажите, что это такое?

[Сергей delphinpro]

ihabia, https://sass-lang.com/guide

в css будет

.header {}
.header__logo {}
.header__search {}

[ihabia]

Сергей delphinpro, ах это sass, ещё не изучал, т.е. для него важно - есть ли между блоками header и header _logo , блок прослойка container. Если есть то уже так не запишешь (как я выше написал). Правильно я понял?

[Сергей delphinpro]

ihabia, нет. забей на sass/ это я по привычке написал. отношения к вопросу не имеет.

[ihabia]

Сергей delphinpro, А вы можете какой то материал по БЭМ посоветовать, понятный? на официальной документации как то не совсем для новичков написано.

[Сергей delphinpro]

ihabia, нет. бэм инфо хорошо написан.
В других статьях часто встречаются ошибки.
Других статей, именно с таким разжевыванием я не знаю.
Если не можете сразу въехать, попробуйте посмотреть доклады Яндекса по бэму (да и вообще по верстке у них интересные доклады есть)

[ihabia]

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

[Сергей delphinpro]

ihabia, не прав. вернитесь к моему примитивному примеру с логотипом в хедере и подвале.
Если в хедере у .logo будет отрицательный отступ, то в подвале он может быть совершенно излишним. А вот .header__logo { margin: -20px; } никак не повлияет на логотип в других местах.

[ihabia]

Сергей delphinpro, ясно, просто у меня тут блок-список, а внутри элементы с паддингами, и я хотел убрать падднинги слева и справа. Но получается если я этот блок перенесу в другое место то там надо будет тоже прописывать отрицательные маржины, потому что паддинги опять появятся ) я конечно мог определенным элементам убрать справа и слева паддинги, но чисто спортивный интерес, всегда думаю, ведь это будет адаптивно и тут уже не катит определенным элементам убирать паддинги )