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

Question

[andreyWayne]

plnkr.co/edit/PxIEqLnKxKNgCF9PTEzp?p=catalogue
Пример кода
Исправленная версия
plnkr.co/edit/PxIEqLnKxKNgCF9PTEzp?p=catalogue

Comments

[Леонид Князев]

<header class='header'>       // блок 'header'
  <div class='header__logo'>  // элемент 'logo' блока 'header'
    <img class='logo__image'> // элемент 'image' блока 'header'
  </div>
  <div class='header__title'> // элемент 'title' блока 'header'
    <h1 class='title__h1'>    // элемент 'h1' блока 'title' (отсутствует сам блок 'title')
    <h1 class='title__h1 title__h1_hover'> // элемент 'h1' с булевым модификатором 'hover' блока 'title'  (отсутствует сам блок 'title')
  </div>
</header>

Answer 1

[Алексей Бульба]

Нет понятия "основного блока".
1. .logo__image - элемент блока,только где сам блок .logo
2. .header__title - не блок, а элемент
3. .title__h1 - элемент, только где сам блок .title
4. Модификаторы отделяются "--" или "__" в зависимости от стиля.

Элементы не могу присутствовать на странице вне их блока.
Вложенный блоки и блоки без элементов допускаются.

На youtube от HTML Academy было видео с Макеевым о БЭМ, рекомендую ознакомится. Перед документацией)

Comments

[andreyWayne]

plnkr.co/edit/PxIEqLnKxKNgCF9PTEzp?p=catalogue
Так верно будет ?:)

[Lynn «Кофеман»]

> Элементы не могу присутствовать на странице вне их блока.
Могут, но в очень исключительных случаях.

[andreyWayne]

Алексей Тен, не понимаю...
Можете привести пример?

[Алексей Бульба]

andreyWayne, теперь лучше.

Алексей Тен, "Элемент — всегда часть блока и не должен использоваться отдельно от него." отрывок из документации. Для повторного использования какой-то части, имеется блок-хелперы.

[Realetive]

andreyWayne, пример очень специфичный и используется самими авторами БЭМ в `bem-components` — выпадающее меню `select`'а в момент раскрытия переносится в конец страницы, чтобы исключить конфликты `z-index`-перекрытий другими попапами. Но это скорее исключение (лишний раз доказывающее правило) и происходит уже с помощью JS, сама разметка при этом соответсвует требованию «элемент не может существовать вне блока».