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

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

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

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

• и об абстрактных блоках
• …контекстных блоках
• …миксовании
• …глобальных модификаторах

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

• видах префиксов, которых в современном BEM как бы нет.
• и про путь BEM - почему все так?

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

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

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

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

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

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

			.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

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

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

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

1. block__el__el

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

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

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

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

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

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

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

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

• Использование префиксов
• Сокращённые модификаторы
• JS-блоки

Префиксы

• b-
• l-
• i-
• js-

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

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

.block-name__elem_key_value
.blockName__elem.-key_value
		

JS-блоки

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

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

• http://nano.sapegin.ru/all/opor-methodology
• https://github.com/ideus-team/guidelines/blob/master/frontend/bem.md

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

• http://net-craft.com/old
• http://net-craft.com/
• http://net-craft.com/wp-content/themes/netcraft/dev/sass/main.scss

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

.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.name
• twitter.com/delaz
• igor@delka.name

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