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

Question

[Станислав Ботев]

Верстаю потихоньку сайт для себя самого. Читаю то одно, то другое. Узнал про БЭМ и решил применить его принципы на практике. Посмотрите код, правильно ли я использовал идею Блоки-Элементы-Модификаторы?
Страничка На домен не обращайте внимания. Если есть косяки по вёрстке или стилям, пожалуйста, подскажите, чтобы уяснял ошибки сейчас и исправил.

Comments

[alex]

Нет не поняли. Я бы вам посоветовал забыть все, что вы якобы знаете про бэм, и поробовать еще раз. Вот неплохая статья https://habrahabr.ru/post/203440/ и ещё

Answer 1

[Сергей Горячев]

Не вижу БЭМа совсем. От слова вообще.
Что за дивы без классов <div></div>? Почему у заголовков нет класса <h2>Мои навыки:</h2>?
По БЭМ каждый тег на странице должен быть с классом, который является либо блоком, либо элементом.
https://frontender.info/MindBEMding/

main_section-first_images
Это что? Элемент с модификатором, у которого есть элемент?

Разделение "блок__элемент" с двумя нижними подчеркиваниями.
Разделение "блок--модификатор", "элемент--модификатор" с двумя дефисами (новая версия).
Или по первому варианту Яндекса с одним дефисом.

Стили не надо писать в самом файле, лучше подключать через link.
Тут есть небольшая оговорка, касающаяся оптимизации, стилей для первого экрана, но в данном случае, это не важно.

В целом, на три с минусом можно оценить данную верстку.
Но повторюсь, к БЭМу это не имеет никакого отношения.

Comments

[Станислав Ботев]

Спасибо за скорый ответ!
Любой должен иметь название?
должен означать БЭМ? Т.е. первым должен идти "блок", затем "элемент", потом уже "модификатор"? Нельзя "блок-элемент-элемент"?
Следовательно, я неправильно понял суть, буду штудировать дальше.
Сайт хостится на конструкторе, где нет возможности подключать свои .css, поэтому прописываю в файле. В будущем куплю хостинг.
Три с минусом? Для меня это похвала. Восьмой день учусь вёрстке.

[Сергей Горячев]

Любой должен иметь название?

БЭМ расчитан на то, чтобы в дальнейшем можно было без проблем его поддерживать.
Вот тебе пример, ты завтра решишь все заголовки h2 сделать красного цвета, но один захочешь оставить черным.
Если у h2 будет класс pageTitle например, ты сможешь использовать просто модификаторы pageTitle--red, pageTitle--black.

должен означать БЭМ? Т.е. первым должен идти "блок", затем "элемент", потом уже "модификатор"? Нельзя "блок-элемент-элемент"?

Нет, именно так и должно быть, "блок__элемент--модификатор" (либо "блок--модификатор"), собственно, так это и было задумано.
Но никто не запрещает миксовать таким образом.

<div class="header">
   <div class="header__item logo">
      <div class="logo--dark"></div>
   </div>
</div>

Как видишь, у меня средний див является и блоком logo и элементом header__item.
Каждый из них нужен для определения своих стилей.

[alvvi]

Sergey Goryachev: немного оффтоп, но вот у меня при таком наименовании выходит так, что зачастую у класса logo никаких стилей нет, просто потому что внешнюю геометрию я там задать не могу(исходя из методологии), а больше не для чего он и не нужен, поскольку по сути своей это обертка. Это нормально?

[Сергей Горячев]

Илья Ростопка: А если нужно будет сделать еще один логотип, скажем через полгода, в подвале сайта, но он будет отличаться по размеру. Что ты будешь делать? Обертку копировать? Логичнее выносить самостоятельные элементы в блоки.

[alvvi]

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

[Сергей Горячев]

Илья Ростопка: Выше же пример конкретно написан.

<div class="header">
   <div class="header__item logo">
      <a href="#" class="logo__link"></a>
   </div>
</div>

элемент header__item как обертка. logo это блок. внутри лого что-то должно же быть. например a.logo__link или img.logo__image. совсем пустой logo это по всем канонам неправильно.

[alvvi]

Sergey Goryachev: ладно, видимо нужно привести свой пример, чтобы вы поняли, о чем я говорю

<div class="header">
   <div class="header__item slider">
      <img class="slider__img" />
      <span class="slider__thumbnail">Hello World</span>
   </div>
</div>

Вот, по сути header__item определяет внешнюю геометрию для слайдера. А теперь допустим, что ничего кроме внешней геометрии блоку slider и не надо и никаких общих свойств у slider__img и slider__thumbnail естественно нет. Вроде бы с точки зрения БЭМ-а все отлично, но класс slider то получается остался без стилей.

[alvvi]

Sergey Goryachev: так он не пустой с точки зрения html, он пустой в CSS, потому что не имеет стилей оформления, а за его геометрию отвечает другой класс, элемент его родителя.

[Сергей Горячев]

Илья Ростопка: И пусть остается. Ничего страшного. Зато если нужно будет, всегда можно будет добавить, не трогая разметку.