БЭМ в дикой природе

      .block__el__el
      .b-block
      .block--mod
      …

DOM-дерево

<UL>
  <LI>
    <A>
      <SPAN></SPAN>
    </A>
  </LI>
</UL>

БЭМ-дерево

  <UL class="menu">
    <LI class="menu__item">
      <A class="menu__link">
        <SPAN class="menu__text"></SPAN>
      </A>
    </LI>
  </UL>

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

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

Презентация: bit.ly/bem-in-the-wild

ещё один доклад про БЭМ…

Ну сколько
уже можно, а?…

В прошлом году мы обсуждали ручную вёрстку по БЭМ…

Презентация:
bit.ly/bem-css-right
Видео доклада: youtube.com/watch?v=kBgHdSOj33A

Презентация содержит больше слайдов и примеров, чем оригинальное видео.

Что значит «по-БЭМ»?

— Мы используем БЭМ, но не 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.

Непонятость БЭМ

Проблема с документацией

Яндекс-БЭМ (Full Stack BEM)

Виталий Харисов

Сергей Бережной

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

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

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

({
  block : 'page',
  title : 'hello',
  head : [
    { elem : 'css', url : 'hello.min.css' }
  ],
  scripts : [{ elem : 'js', url : 'hello.min.js' }],
  mods : { theme : 'islands' },
  content : [
    {
      block : 'hello',

Верстаем-верстаем, это BEMJSON

content : [
  {
    block : 'hello',
    content : [{
        elem : 'greeting',
        content : 'Привет, %пользователь%!'
      },{
        block : 'input',
        mods : {theme : 'islands', size : 'm'},
        name : 'name',
        placeholder : 'Имя пользователя'
      },

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

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

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

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

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

Кстати CSS и JS тоже надо писать

Даже разработчики Google Material Design не смогли с первого раза правильно написать имена классов по БЭМ :)

Диалекты БЭМ

OPOR

Артем Сапегин

OPOR

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

.logo {color: saddlebrown;}
.page_about .logo {color: ghostwhite;}
social-button i {}
<div class="social-button"><i></i></div>
.scrollable
a.fake
.is-expanded
.js-select
.header
  .header-i

BEViS

Вадим Макишвили

BEViS

Диалект БЭМ, с более строгими правилами для максимальной надежности верстки, придуманный Вадимом Макишвили для Яндекс.Карт.

Нет миксов.
Нет модификаторов.
Есть состояния:

<div class="popup _orientation_top"></div>
<button class="button _pressed _focused"></div>
.button._pressed {}

BEMIT

Гарри Робертс и Николас Галлахер

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">

Сокращенные модификаторы

Зарубежом их назвали „Individual modifiers: a shorter syntax“. У нас перевели как «Обособленные модификаторы: сокращенный синтаксис». Яндекс в официальной документации называет их «Стиль No-namespace».

<div class="blockName__elem -key_value">
.blockName {
  &__elem {
    &.-key_value {
    }
  }
}

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 / posthtml-bem / BEMto

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

bem.info

getbem.com

Это всё БЭМ

Методология и реализации

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

BEM is like Agile

Роберт Харитонов

MCSS → BEM

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

Роберт Харитонов

Джонатан Снук

SMACSS → BEM

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

Jonathan Snook

ru.bem.info/
forum/

Slack WSD
/bem

Пробуйте!

%Company% BEM

Читать дальше

Cоветы от ведущих БЭМ-разработчиков: ошибки и best practices
BEM Quick Start Guide — БЭМ: UnOfficial Team
Мажорный релиз новой документации — БЭМ: Яндекс Team
Full BEM Stack в HTML — Владимир Гриненко
Классификация ошибок BEM CSS (со стр. 50) — Александр Корецкий @n2j7
Material Design Lite CSS — Google
i-bem.js
варианты использования префиксов от Гарри Робертса
BEMIT — Harry Roberts
BEViS: документация и доклад — Вадим Макишвили
История БЭМ

…и дальше

что такое блок, префикс b- и что такое независимый блок
контекстные блоки (темы) (раздел «Внутри контекстного блока»)
layout-блоки и холдер-блоки
как позиционировать БЭМ-блоки относительно друг друга
абстрактные блоки (раздел „i-, от include“) и их реализация в Sass через %extend-only-selector+extend или лучше через mixin+include
уровни переопределения (раздел «Модификация файлами») и структура блоков на файловой системе
глобальные модификаторы
Откуда взялся зарубежный синтаксис модификаторов и js-классы — Nicolas Gallagher

Спасибо!

Igor Zenich
EPAM

Презентация: bit.ly/bem-in-the-wild