Були в ранньому БЕМ. Зараз пропагуються Гаррі Робертсом і використовуються багато не-Яндекс розробниками. Використовуються для створення свого простору імен і логічного поділу блоків.
BEMIT: Простори назв
Просунуте використання префіксів і суфіксів від Гаррі Робертса. Спроба описати взаємозв'язок між незалежними блоками з точки зору SMACSS і OOCSS.
Стиль Гаррі Робертса
Багатьом подобається закордонний формат модифікаторів, через "-", він читабельності.
стиль camelCase
А через camelCase - ще читабельність!
Стиль без підкреслень
Деякі йдуть ще далі і замінюють "__" на "-". camelCase єдиний гарантує що ви зрозумієте де блок, а де елемент.
скорочені модифікатори
скорочені модифікатори
Правильно писати так:
.block-name__elem _key_value
Або так:
.blockName__elem --key_value
Немає дуракоустойчівие, модифікатор можуть перенести без блоку:
скорочені модифікатори
- Втрачаємо мікси блоків з модифікаторами!
- Не можемо використовувати Full BEM Stack!
Рішенням може бути запис модифікаторів в стовпчик
А ще можна юзати Jade, а в Яндексі взагалі не пишуть html-код руками, у них BEMJSON.
Це міксуванні css-блоку і js-блоку на одній dom-ноді. Канонічний БЕМ вважає, що вони не потрібні, тому що js-функціонал немає сенсу відокремлювати від блоку. Гаррі Робертс і не-Яндекс розробники їх активно використовують і пропагують: тому що поділ дозволяє легко копіювати css-блок без пов'язаного з ним JS.
Альтернативні реалізації: OPOR
Відомий приклад використання методології БЕМ стороннім розробником - Артемом Сапегін
Альтернативні реалізації: BEViS
Діалект БЕМ, з більш строгими правилами для максимальної надійності верстки, придуманий Вадимом Макішвілі для Яндекс.Карт.
Альтернативні реалізації:
Google MDL
Бібліотека блоків від Google, css-продажу їх Material Design придуманого для Android.
Full BEM Stack в HTML
Ви можете створювати свої гайдлайни
БЕМ дає лише базовий набір правил, конкретну реалізацію і синтаксис ви вибираєте самі.
Це все БЕМ
тонкощі БЕМ
БЕМ включає в себе багато технік
Дещо ми з вами обговорили / згадали:
- чому не можна вкладати блоки
- bem-tools і альтернативні тулзи для спрощеного написання БЕМ-нейминга в HTML:
- BEML - html-препроцесор для BEM
- posthtml-bem - те ж саме, але через PostHTML
- bemto - міксини для написання BEM в Jade
- міксуванні
- навіщо потрібні простору імен / префікси (включаючи js- блоки)
Але багато що залишилося за кадром
- Я не розповів вам як розбивати блоки на файли і складати в файлової системі
- чому не потрібно використовувати не використовувати @extend s Sass
- про i-bem.js
- і про абстрактні блоках (i-)
- ... контекстних блоках (m-)
- ... холдер-блоках (h-)
- ... рівнях перевизначення
- ... глобальних модифікатори
- ... і про історію BEM - чому все так?