БЭМ

I

Теория БЭМ. Основные понятия и принципы

http://ru.bem.info/

Це блок

Простой блок

Составной блок

Элемент

☑ вставить котиков в презентацию

Модификатор

( модификатор, модификация, мода )

Значение модификатора

БЭМ головного мозга

II

Синтаксис. Общие правила

English
Бз скрщнй
строчный регистр
Дефис-в-качестве-пробела

Синтаксис. Блок

имя-блока

column
page-title
form-fields-list

            <div class="column">Колонка</div>
            <h1 class="page-title">Заголовок страницы</h1>

Синтаксис. Элемент

имя-блока__имя-элемента
product__summary

            <div class="product">
                   <div class="product__summary">
                           Краткое описание продукта
                       </div>
            </div>

Неправильно:

            <div class="product">
               <div class="product__summary">
                  <div class="product__summary__price">
                       2.99 $
                  </div>
               </div>
            </div>

Правильно:

            <div class="product">
               <div class="product__summary">
                  <div class="product__price">
                       2.99 $
                  </div>
               </div>
            </div>

Синтаксис. Модификатор

для блока:
блок_модификатор_значение-модификатора
link_type_pseudo

            <a href="/" class="link">Простая ссылка</a>
            <span class="link link_type_pseudo">Псевдоссылка</span>

для элемента:
блок__элемент_модификатор_значение-модификатора
menu__item_state_selected

            <div class="menu">
               <a href="about.html" class="menu__item">О компании</a>
               <span class="menu__item menu__item_state_selected">
                   Новости
               </span>
            </div>

Синтаксис. Префикс

Обязательный префикс*

b-

* на самом деле нет

Во-первых, это красиво ...

wat

<table class="b-table">

Синтаксис. Префикс

Обязательный префикс

b-

Пространство имен
Устоявшаяся нотация

Синтаксис. Итого

            <ul class="b-list b-list_type_simple">
               <li class="b-list__item">Блок</li>
               <li class="b-list__item">Элемент</li>
               <li class="b-list__item">Модификатор</li>
               <li class="b-list__item b-list__item_content_blank"></li>
               <li class="b-list__item">PROFIT</li>
            </ul>

БЭМ-дерево

— это как DOM-дерево, только БЭМ.
Json, XML, YAML, ...

                    <b:list>
                       <e:item>Б</e:item>
                       <e:item>Э</e:item>
                       <e:item>М</e:item>
                    </b:list>

                    <ul class="b-list">
                       <li class="b-list__item">Б</li>
                       <li class="b-list__item">Э</li>
                       <li class="b-list__item">М</li>
                    </ul>

                    <b:page>
                       <b:header>
                           <b:logo>
                               <e:image x:src="logo.png"/>
                           </b:logo>
                           <b:tagline>BEM Them All!</b:tagline>
                       </b:header>
                       ...
                    <b:page>

III

АНБ в БЭМ

АНБ — абсолютно независимый блок

использование исключительно классов
(отказ от выбора узлов по ID и по тегу)
отказ от каскадных селекторов
нотация классов

Связи между БЭМ-сущностями

Блок и элементы блока
Элементы блока между собой
Модификация блока и элементы блока
Блоки, элементы, модификации из разных блоков

Связь. Блок + элементы блока

                .b-region .b-region__title {
                    margin-right: 20px;                  
                }

Бессмысленая, так как связь заложена на уровне синтаксиса

Связь. Элемент блока + элемент блока

                
                <tr class="b-table__row">...</tr>
                <tr class="b-table__row b-table__row_type_even">...</tr>

                
                .b-table__row {}
                .b-table__row:nth-child(even) {}

гипотетически хорошая, но встречается редко

Связь. Модификация + элемент блока

                .b-list_type_simple .b-list__item {}

                <ul class="b-list b-list_type_simple">
                  <li class="b-list__item">
                      <ol class="b-list b-list_type_numeric">
                          <li class="b-list__item">

приемлимая, но допускает неприятные эффекты

Связь. Сущности из разных блоков

                .b-product .b-link {...} /*«межблочный каскад»*/

неприемлимая, но ...

по-разному:

                           .b-article .b-link {}
                           .b-pagination .b-link {}

миксы!

БЭМ-микс

Микс — совмещение разных БЭМ-сущностей на узле DOM-дерева.


            <span class="b-logo">
               <img src="logo.png" class="b-logo__image" alt="logo"/>
            </span>
            <a href="/" class="b-logo b-link">
               <img src="logo.png" class="b-logo__image" alt="logo"/>
            </a>

Достоинства миксов

Серая сторона миксов

.b-pagination__item .b-link

незапланированные эффекты
«узаконенный каскад»
повышается риск нарушения правильной связности
межблочные связи


            <article class="b-product b-product_type_sale
                b-article b-article_content_product">
                   <header class="b-article__header"/>

                           <h3 class="b-product__title"/>Title</h3>

                   </header>
                   <div class="b-product_description b-article__content">

            .b-product_type_sale .b-product__title {}
            .b-article_content_product .b-article__header {}

Микс != глобальный модификатор

.b-inline {display:inline;}
<h4 class="b-product__title b-inline"/>

Глобальные модификаторы противоречат БЭМ-принципам.
Блок должен иметь ценность сам по себе.

IV

Не умножай сущности

Блок vs. Модификация

     .b-menu_type_main -> b-main-menu
     .b-menu_type_main .b-menu__item -> b-main-menu__item

Библиотека блоков. Внутри

Библиотека блоков. Снаружи

Уровни переопределения

БЭМ-принципы

Нормализованные сущности
Модификации-предикаты
GRASP
- Low Coupling - АНБ + !МБК
- High Cohesion - декомпозиция блока вместо МБК

.b-menu__item .b-link vs. b-menu__item-text

Читать и смотреть

@bem_ru #BEM #БЭМ #b_

http://events.yandex.ru/events/yasubbotnik/

Василий Чернов

Ведущий верстальщик, Softline

@bivihoba
bivihoba@ya.ru

bivihoba.ru/slides/bem

Бинго!

БЭМ настолько же Bootstrap, как UML — Jquery UI.