BEM CSS

В исходниках этой презентации спрятались подсказки!

В комментах html написаны тезисы доклада и комментарии к слайдам требующим пояснений.

Презентация: delka.github.io/talks/2015/frontendweekend-bem/

Ihor Zenich

• twitter.com/ihorzenich
• ihor_zenich@epam.com

Презентация: bit.ly/bem-css-guide

Имена БЭМ-классов создают дополнительный уровень логики

Есть DOM-дерево, а есть БЭМ-дерево.

<input class="big_red_button">
<input class="big_red_button order-button">
<input class="order-button discount-checkout__submit">
        

О чём будем говорить?

1. Как вручную сверстать «по-БЭМ»
2. Как не писать классы типа device-template-generic-indicator-control-slider-bar-d :)

Код, который тяжело поддерживать

Что в этом коде относится к классу user ?

<div class="media user premium">
  <img class="img photo avatar" src="" />
  <p class="body bio">...</p>
</div>
    

… и код, который ЛЕГКО поддерживать

Если мы перепишем этот код на BEM CSS, то все будет понятно просто из имён классов!

<div class="media user--premium">
  <img class="media__img user__photo avatar" src="" />
  <p class="media__body user__bio">...</p>
</div>
    

Full stack BEM?

Когда он будет вам нужен — вы это сами поймёте.
Это будет момент, когда вам надоест писать html руками и вы захотите его генерировать.

— Мы используем БЭМ, но не FullStack, а #b_ в CSS.
— Нет, не как в Яндексе.
— Как?
— Ну как Гарри Робертс писал…
— Как именно, он разное писал?
— Fuck.

Each time we have to understand what exactly BEM we are talking about. Both with customer and internally in the team.

Давайте приглядимся

Независимый блок

НБ или просто блок, это самодостаточный элемент страницы, который при перемещении в другое место на странице или на другую страницу не теряет своей самодостаточности.

Обновленное определение блока

Логически и функционально независимый компонент страницы, аналог компонента в Web Components. Блок инкапсулирует в себе поведение (JavaScript), шаблоны, стили (CSS) и другие технологии реализации. Независимость блоков обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.

Правила независимости блока

1. для описания элемента используется class, но не id
2. каждый блок имеет префикс
3. в таблице стилей нет классов вне блоков

Как его таким написать?

Просто писать стили тупо на каждый блок.

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

А с препроцессорами БЭМ позволяет писать еще и очень чистый и логичный код.

Как проверить?

Просто навести на блок в инспекторе кода.
У него не должно быть каскада.

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

Элемент

Элемент – это часть блока, отвечающая за отдельную функцию.
Он может находиться только в составе блока и не имеет смысла в отрыве от него.

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

DOM-дерево

<ul>
  <li>
    <a>
      <span></span>
    </a>
  </li>
</ul>
    

DOM-дерево

.ul {}
.ul > li {}
.ul > li > a {}
.ul > li > a > span {}
    

БЭМ-дерево

<ul class="menu">
  <li class="menu__item">
    <a class="menu__link">
      <span class="menu__text"></span>
    </a>
  </li>
</ul>
    

БЭМ-дерево

.menu {}
.menu__item {}
.menu__link {}
.menu__text {}
    

БЭМ дерево — чистая логика

БЭМ-дерево не зависит ни от чего, даже от размещения в документе.

БЭМ-дерево не привязано к визуальному представлению блоков, оно отображает только логику, это и есть новый уровень семантики!

Я тоже раньше так писал

      .form-buy-results__to-city__slider__tab__column_buy
    

Так делать нельзя

Как надо?

<div class="block">
    <div class="block__elem1">
        <div class="block__elem2"></div>
    </div>
    <div class="block__elem3"></div>
</div>
    

А в CSS

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
    

Элемент у элемента?

Если вам нужно сделать элемент у элемента, значит вам нужно:

• или создать новый блок
• или сделать ваше БЭМ-дерево с одинарной вложенностью элементов

Есть 2 варианта как это переписать

<div class="block">
    <div class="block__elem1">
        <div class="block__elem1__elem2"></div>
    </div>
</div>
    

Делать новый блок

<div class="block1">
    <div class="block1__elem1 block2">
        <div class="block2__elem1"></div>
    </div>
</div>
    

CSS будет линейным:

.block1 {}
.block1__elem1 {}
.block2 {}
.block2__elem1 {}
    

Делать БЭМ-дерево с одноуровневой вложенностью элементов

<div class="block1">
    <div class="block1__elem1">
        <div class="block1__elem2"></div>
    </div>
</div>
    

CSS по-прежнему будет линейным:

.block1 {}
.block1__elem1 {}
.block1__elem2 {}
    

Попытка вложить имя элемента в имя блока

Чтоб «схитрить» и «как-будто не вложить», написать не .block__el1__el2 а .blockel1__el2 или .block__el1el2. Так нельзя.

.block {}
.blockel1 {}
.blockel1__el2 {}
    

Будут проблемы при переносе

Будут проблемы при переносе

Попытались перенести «странный элемент» в другое место - получили элемент что завис «в воздухе» без блока-родителя

<div class='someblock'>
    <div class='blockel1__el2'></div>
</div>
    

Так можно делать только если .blockelem сохранит логический смысл при переносе в другой блок.

element > element нельзя в CSS, но можно в HTML!

Обратите внимание - вы не можете вкладывать элементы в элементы в CSS, но можете и должны вкладывать элементы в элементы в HTML! DOM-дерево и БЭМ-дерево могут быть разными.

Запрет есть исключительно про нейминг!

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

Бьём на максимально атомарные блоки!

NB: это и есть суть БЭМ, то, что многие не понимают.

Погружаясь вглубь DOM, нужно стараться создавать новые и новые блоки, а не строить связи родитель__элемент__элемент.

Вспоминаем как мы это делаем:

<div class="block1">
    <div class="block1__elem1 block2">
        <div class="block2__elem1"></div>
    </div>
</div>
    

HTML: как правильно вкладывать блоки в блоки?

<div class="b-blog">
    <div class="b-blog_item b-post">
    </div>
</div>
        

Миксование создаст связь между блоками!

В этой DOM-ноде смешиваются стили от 2-х разных блоков:

• от одного (.b-blog__item) — стили раскладки, позиционирование,
• а от второго (.b-post) — внешний вид самого блока.

Эти стили объединяются в одном html-элементе и создают таким образом связи между блоками.

CSS: как правильно вкладывать блоки в блоки?

.b-blog {
  // блок 
  @at-root .b-post {
    // ещё один блок 
  }
}

Скомпилируется в:

.b-blog {
  /* стили блока */
}
.b-post {
  /* ещё один блок */
}

Мы написали вариант #1: микс элемента родителя + новый блок

Позиционирование — на элементе родителя и блоке родителя, стили блока — на новом блоке.

<div class="b-blog">
    <div class="b-blog_item b-post">
    </div>
</div>
        

#2: Микс блоков и сетки

Позиционирование — на классах сетки, стили блоков — на самих блоках.

<div class="b-blog b-grid">
    <div class="b-grid__col b-post">
    </div>
</div>
        

Можно добавить микроформатов/микроданных

Это не нужно для БЭМ, просто я люблю микроформаты, Гугл любит микрофрматы и Яндекс тоже любит микроформаты :) Классно что мы можем добавлять любые имена классов куда-угодно, все стили у нас — только на БЭМ-классах.

Мы написали BEM-дерево:

<div class="block1">
    <div class="block1__elem1 block2">
        <div class="block2__elem1"></div>
    </div>
    <div class="block1__elem2"></div>
</div>
    

Нет каскада:

.block1 {}
.block1__elem1 {}
.block1__elem2 {}
.block2 {}
.block2__elem1 {}
    

6 видов

1. Модификатором
   • модификатором блока
   • модификатором элемента
2. Контекстом (т.е. каскадом от блока выше)
3. Уровнем переопределения (добавлением-перезаписью файла стилей)
4. Миксованием (добавлением классов других блоков)
   • включая глобальный класс

Просто добавляйте модификатор!

<div class="block-name__elem_key_value">
    

А для элементов — делай каскад от модификатора.

Модификаторы для элементов, можно?

Если речь идет о простых правках, типа «активный пункт меню», то да, можно:

<a class="menu__link menu__link_state_active">
    

Булевые модификаторы

Кстати в таких простых случаях, можно писать модификаторы просто одним словом:

<a class="menu__link menu__link_active">
    

1. block__el__el

Например, слайдеры очень часто верстают дикой вложенностью.

2. Повышение специфичности

В html как-будто всё ok:

<div class="block">
  <div class="block__el">
    

А на деле сели в машину и сгорели:

/* CSS */
.block .block__el {}
    

3. Стили вне блоков

<ul class="menu checkoutForm big myfuckingclass-bold">
    

Почему это ошибки?

Да потому что из-за этого потом тяжелей вносить правки и сложно переместить блок в другое место.

Проблемы со стилями:

1. CSS Frameworks
2. Инлайн стили
3. !important
4. Чрезмерно увеличенный вес селектора
5. Позиция в очереди подключения

Ошибки разработчиков:

1. Элемент элемента
2. Элемент вне блока
3. Контекстная зависимость блоков
4. Контекстная зависимость элемента
5. Наглый модификатор элемента (кроме самого себя трогает еще и другие элементы этого же блока)
6. Блок, вложенный в себя
7. Использование стилевых классов в JS

Ошибки разработчиков:

1. Использование холстеров «как-бутстрап»: <ul class="b-list h-mt-20 h-mb-50 h-pointer h-left h-colorred">
2. Неиспользование холстеров (модификаторы --float_left)
3. Единоразовые элементы (создание одинаковых элементов с разными именами типа .list__item1,.list__item2,…)
4. Oldschool reborn (высокая специфичность и класс только на блоке)
5. Looooooooong naming
6. Модификация элементами (смена имени элемента вместо добавления модификатора)

Вывести текст из WYSIWYG?

Как назначаются стили для типографики? Не будешь же назначать каждому тегу какой-то класс?

Добавить .b-text блоку родителю

И использовать каскад.

.b-text h2 {}
.b-text p {}
.b-text img {}
.b-text ul li {}
    

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

Как писать BEM CSS в Sass

.b-list {
  /* стили блока  */
  //…
  &__item {
    /* стили элемента */
  }
  &__link {
    /* элемент #2… */
  }
}

Скомпилируется в:

.b-list {
  /* стили блока  */
}
.b-list__item {
  /* стили элемента */
}
.b-list__link {
  /* элемент #2… */
}

Sass: модификаторы блоков

.b-list {
  /* стили блока */
  &--style_numered {
    /* стили модифицированного блока */
  }
}

Скомпилируется в:

.b-list {
  /* стили блока  */
}
.b-list--style_numered {
  /* стили модифицированного блока */
}

Sass: модификаторы элементов

.b-list {
  /* стили блока */
  &__item {
    /* стили элемента */
    &--active {
      /* стили модифицированного элемента */
    }
  }
}

Скомпилируется в:

.b-list {
  /* стили блока */
}
.b-list__item {
  /* стили элемента */
}
.b-list__item--active {
  /* стили модифицированного элемента */
}

Скомпилируется в:

.b-list {
  /* стили блока */
}
.b-list__item {
  /* стили элемента */
}
.b-list--style_numered b-list__item {
  /* стили элемента модифицированного блока */
}

Скомпилируется в:

.b-list {/* блок */}
.b-list__item {/* элемент */}
.b-list__link {/* элемент */}
.b-list__item--active .b-list__link {
  /* наглый модификатор элемента */
}

Как «правильно» модифицировать блоки (внешний вид) от контекста?

1. Можно юзать каскад, но это тонкая работа — для случая «перебить чуть-чуть стилей, ведь этот блок нам не понадобится переносить в изменённом виде куда-то отдельно».
2. Добавить модификатор блоку — просто и надежно, но не создает логической связи между блоком-родителем и вложенным в него блоком, что должен изменятся.
3. Использовать миксование: создать элемент родителя, навесить на него нужные стили и смиксовать с вложенным блоком.

Пример переверстки по БЭМ (упрощенный)

• Было: http://net-craft.com/old
• Стало: http://net-craft.com/
  • http://net-craft.com/wp-content/themes/netcraft/dev/sass/main.scss

Пример кода Яндекс-БЭМ

Верстаем надпись «Привет», input и кнопку.

Осталось кнопочку добавить…

      {
        block : 'button',
        mods : {theme : 'islands', size : 'm',
                type : 'submit'},
        text : 'Нажать'
      }
    ]
  }
]
})
    

Это ещё не всё.

Тепер надо написать BEMHTML.

block('hello')(
    js()(true),
    tag()('form')
);
    

BEMIT: пространства имен

Продвинутое использование префиксов и суффиксов от Гарри Робертса. Попытка описать взаимосвязь между независимыми блоками с точки зрения SMACSS и OOCSS.

<div class="o-media@md  c-user  c-user--premium">
  <img src="" class="o-media__img@md  c-user__photo" />
  <p class="o-media__body@md  c-user__bio">...</p>
</div>
    

БЁМ: шутка всерьез

БЭМ в котором можно писать как хочешь. Хоть с элементами элементов.

.block__element__subelement
    

Теперь я использую БЁМ — это примерно как БЭМ, только вы можете писать его как хотите, а не как укажет партия или церковь. Ура!

Префиксы

Были в раннем БЭМ. Сейчас пропагандируются Гарри Робертсом и используются многими не-Яндекс разработчиками. Используются для создания своего пространства имен и логического разделения блоков.

Префиксы

b-, l-, g-, i-, h-, m-, c- и js-,

qa-, o-, c-(другой :), u-, t-, s-, is-, has-…

Стиль Гарри Робертса

Многим нравится зарубежный формат модификаторов, через --, он читабельней.

<a class="block-name__element-name--state_active">

Стиль camelCase

А через camelCase – ещё читабельней!

<a class="blockName__elementName--state_active">

Стиль без подчеркиваний

Некоторые идут ещё дальше и заменяют __ на -. camelCase единственный гарантирует что вы поймете где блок, а где элемент.

<a class="blockName-elementName--state_active">

JS-блоки

$('.js-fancybox').fancybox();
    

Это миксование css-блока и js-блока на одной dom-ноде. Канонический БЭМ считает, что они не нужны, т.к. js-функционал нет смысла отделять от блока. Гарри Робертс и не-Яндекс разработчики их активно используют и пропагандируют: т.к. разделение позволяет легко копировать css-блок без связанного с ним JS.

Google MDL

Библиотека блоков от Google, css-реализации их Material Design придуманного для Android.

<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button>
                  mdl-button--raised>
                  mdl-js-ripple-effect>
                  mdl-button--accent">
  Button
</button>
    

U.S. Goverment: 18F BEM

.accordion
.accordion-item
.accordion-item-selected
 
.nav_bar
.nav_bar-link
.nav_bar-link-clicked
    

BEML

Препроцессор BEM для HTML через Grunt/Gulp

<div block="b-animals">
  <div elem="cat" mod="size:big, color:red"></div>
</div>
    

posthtml-bem

Препроцессор BEM для HTML через PostHTML.
Синтаксис почти такой же, но с отличиями!

<div block="MadTeaParty">
  <div elem="march-hare" mods="type:mad">March Hare</div>
  <div elem="march-hare" mods="mad">March Hare</div>
</div>
    

Please use "mods" for the attribute modifiers instead of "mod" and a space as a separator of modifiers instead of a comma.

BEMto

Написание BEM в Jade.

+b.block1
  +e.element1 Foo
  +b.block2
    +e('a')(href="#bar").element Bar
  +e.element2 Baz
    

Вы можете создавать свои гайдлайны

БЭМ дает лишь базовый набор правил, конкретную реализацию и синтаксис вы выбираете сами.

• Harry Roberts
• iDeus
• Artem Sapegin
• CodeRiver (Yuriy Artyukh, cssing.org.ua)
• AzaGroup

Реализации БЭМ:

• OPOR
• BEViS
• BEMIT
• БЁМ
• 18F BEM
• Harry Roberts BEM
• iDeus BEM
• Coderiver BEM
• AzaBEM

MCSS → BEM

Как автор MCSS, рекоммендую теперь уже использовать именно БЭМ. С тех пор он стал менее строгим, и более понятным. MCSS может пригодится только на очень большом, монолитном проекте.

SMACSS → BEM

Most common misspelling is “SMACCS”.
I should just rename it to BEM.

БЭМ включает в себя много техник

Кое-что мы с вами обсудили/упомянули:

• почему нельзя вкладывать блоки
• bem-tools и альтернативные тулзы для упрощенного написания БЭМ-нейминга в HTML:
  • BEML — html-препроцессор для BEM
  • posthtml-bem — тоже самое, но через PostHTML
  • bemto — миксины для написания BEM в Jade
• миксование
• зачем нужны пространства имен/префиксы (включая js- блоки)

Но многое осталось за кадром

• Я не рассказал вам как разбивать блоки на файлы и складывать в файловой системе
• почему не нужно использовать не использовать @extend s Sass
• о i-bem.js
• и об абстрактных блоках (i-)
• …контекстных блоках (m-)
• …холдер-блоках (h-)
• …уровнях переопределения
• …глобальных модификаторах
• …и про историю BEM — почему все так?