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

Igor Zenich, iDeus.

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

Зачем ещё один доклад про BEM?!

Что он несёт?!.

Ошибки

CSS подмножество BEM

2007 год

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

@mursya меня бы убила

Непонятость BEM

Но как писать код вручную?

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

Artur Kornakov, @fliptheweb

Я не буду говорить о bem-tools

Не буду говорить о

Суть #b_

.block

Главное - понятие независимого блока

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

BEM.Клуб на Я.рушке, Независимый блок

Формальное определение

Правила независимости блока:
  1. для описания элемента используется class, но не id
  2. каждый блок имеет префикс
  3. в таблице стилей нет классов вне блоков
BEM.Клуб на Я.рушке, История создания BEM (часть первая)

.block__element

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

			.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 {}

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

<div class='block'>
    <div class='block__elem1'>
        <div class='block2'></div>
    </div>
</div>

Не пишите странные имена

.block {}
.block__elem1 {}
.blockelem1__elem2 {}

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

Бейте на блоки!

DOM-дерево

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

BEM-дерево

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

Модификация

6 видов

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

Статья на Frontender Magazine

https://github.com/FrontenderMagazine/bem-css-methodology-complete-guide/blob/master/rus.md

Делай модификатор!

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

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

BEM допускает ошибки

Ошибки

1. block__el__el

Например слайдер - это отдельный блок, а его содержимое - другой блок

2. Межблочный каскад

и высокая специфичность

Я написал про это статью

http://delka.name/blog/2013/04/bem-otkroveniya-prinyavshih-veru/

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

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

Диалекты BEM и JS-блоки.

Вот это вот всё на 5 минут:

Префиксы

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

А также альтернативный синтаксис и camelCase.

.block-name__elem_key_value
.blockName__elem.-key_value

JS-блоки

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

Это всё BEM

Примеры гайдлайнов по BEM

Сладкое!

Пример переверстки по BEM

Так как же выводить текст из БД?

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

Собираем вопросы

https://docs.google.com/document/d/1KD9tNdArCv1U1NvFX7rYPvUdbpPGVkuPZ2723KW5p4Y/edit

Спасибо!

Igor Zenich, iDeus

Презентация: delka.github.io/talks/wsd/2014/bem/

Powered by Shower