bem-bl и другие нужные блоки в виде html/css/js сниппетов
Методология написания кода - АНБ с префиксами l- и g- (http://www.slideshare.net/yandex/minsk-harisov стр. 85).
##Схема именования: Согласно БЭМ, но с вариацией camelCase. Пример: .blockName__elementName.-state_current (блок__элемент.-модификатор). По возможности в имя добавляются микроформаты (в том числе чтоб не придумывать как назвать блок). Состояния описываем просто как -state_current, а в css используем multiple selectors: .mainNavigation__item.-state_current ведь мы не поддерживаем IE6/7 :)
##Описание библиотеки В библиотеке находятся типовые блоки, стандартные, часто-необходимые на сайтах. Они имеют приставку "b", это означает что это типовой блок из библиотеки. Например bLogo, bSearch. Также это дань уважения "b-"-методологии. Это не совсем namespace т.к. это не сторонние блоки, а интегрированные внутрь текущего проекта сниппеты.
##Схема использования Блоки НЕ будут как-то подключаться к проекту, понятия сборки нет и не предполагается.
Код пишется руками. Сниппет копируется из библиотеки блоков, переименовывается (если он будет описывать какой-то новый уникальный блок) и в него вносятся правки под конкретную ситуацию. НЕ миксами, НЕ постфиксами, НЕ уровнями переопределений, а внесением правок в скопированный сниплет. Потому что мы не собираем вёрстку из готовой библиотеки блоков, у нас как обычно: css/main.css, js/main.js, CMF, шаблоны. Библиотека блоков есть, но из неё просто копируется что нужно на проект. Никаких связей не создаётся, всё полностью независимо, отдельные репозитории. Нет и не может быть задач вида "обновить какой-то блок на всех страницах разных проектов".
Например у нас есть блок .bMenuHoriz - типовое горизонтальное меню. А нам нужно сделать главное меню на сайте. Мы копируем блок .bMenuHoriz, переименовываем его в .mainNavigation и дорабатываем его базовые стили под нужды конкретного дизайна.
##Доработка библиотеки
- Если в процессе доработки было написаны такие стили для сниппета, что могут и должны быть базовыми для всех подобных блоков, то вносятся соответствующие правки в базовые стили сниппета в репозитории.
- Сделали что-то, что может пригодится на других проектах - создали новый сниплет в библиотеке.
##Префиксы: Используем префиксы для специальных блоков: g- и l-. "b-" не используется т.к. все блоки в конечном итоге должны прийти к b- (как показывает практика Яндекса), т.е. у любого НЕспециального блока у нас обычное имя, без префикса "b-".
##Специальные блоки
- Выделенные layout-блоки
- global-стили.
Layout-блоки - это те, что формируют обвязку страницы. Их имена мы взяли из обвязки Wordpress (там хорошие, логичные, уникальные, понятные и привычные имена), переведя её в camelCase. В терминах БЭМ префикс l- (layout) используется для явного выделения блоков, которые используются для раскладки других блоков и ни для чего более. В стилях l-блока должны использоваться только правила для расположения (position, display, margin, padding, width, etc), но не для оформления (font, background, border, etc). Но мы позволяем использовать для него оформление, для нас это просто главные структурные блоки конкретного проекта. В современном БЭМ от l- блоков отказались, для нас же это скорее психологическо/семантический трюк, чтоб выделить главное на странице.
Global-стили - это то что называется "Helper classes" в HTML5 Boilerplate. Мы добавили им префикс "g-"
- .g-ir
- .g-clearfix и т.д.