Пишемо БЕМ правильно

Були в ранньому БЕМ. Зараз пропагуються Гаррі Робертсом і використовуються багато не-Яндекс розробниками. Використовуються для створення свого простору імен і логічного поділу блоків.

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 - чому все так?

Читати далі

Схожі статті