Как пользоваться bem-tools?

В текущей статье я расскажу тебе как использовать bem-tools в создании проекта.

И так, как ты знаешь бэм-инструменты используются из под терминала. Так что и мы с тобой все операции будем делать именно там.

На заметку: работа с бэм-инструментами в данной статье описывается в Mac OS X. Что же касается других ОС то сомневаюсь что она чем-то будет отличатся.

Для того что бы вызвать хелп по bem-tools введи команду:

$ bem —help

Что бы узнать хелп по любой команде достаточно ввести «bem имя_команды —help». Пример

$ bem build —help

Теперь давай ближе к делу а руки чешутся :)

Создаю папку для тестов на винчестере и перейди в неё в терминале:

$ cd /путь/к/папке

Как создать уровень определений?

Для того что бы создать уровень определения (ну или же переопределения) следует выполнить следующее

$ bem create level blocks

В папке для тестирования была создана директория blocks. Для создания уровня переопределения достаточно выполнить:

$ bem create level blocks-intranet

Как видишь последнее значение этой команды является именем директории уровня переопределения.

Как создать Блок?

Теперь давай создадим Блок. В терминале выполняем команду:

$ cd blocks # переходим в папку с блоками

$ bem create block -t css b-button

Давай разберём каждый параметр команды

bem — запуск бэм-инструментов
create — создать сущность
block — создается сущность с типом Блок
-t css — создать технологию css (попросту говоря имеется ввиду созать CSS-файл)
b-button — имя блока и имя css-файла будет «b-button»

Ниже на скриншоте показано чего мы с тобой добились выполнив эти пару команд:

Для того что бы узнать что ещё можно создавать выполни:

$ bem create —help

А для того что бы сразу одной командой создать несколько блоков выполни:

$ bem create block -t css b-menu b-tree b-wizard b-toolbox

и вот что получится:

Как создать Элемент?

Предположим у нас есть Блок который содержит сложный элемент который, из-за его сложности, удобнее вынести во внешний файл.

Выполняем следующую команду и потом её разберём:

$ bem create elem -b b-menu -t css list

bem — вызываем бэи-инструменты
create — создаем сущность
elem — в качестве сущности выступает элемент
-b b-menu — создать элемент в Блоке «b-forms»
-t css — создать файл технологии css (создать css-файл для элементы)
list — имя элемента

Результат показан на скриншоте ниже.

Как создать Модификатор?

Создание модификатора существенно не отличается от создания элемента. Рассмотрим пример:

$ bem create mod -b b-button -t css color_red

bem
create
mod — создать модификатор
-b b-button — модификатор создать для блока «b-button»
-t css — создать css-файл
color_red — имя модификатора

Ну и в итоге мы получаем следующую картину:

Кастомизация шаблона CSS-файла

Для создания стилей я использую программой CSSEdit и предложенное ею структурирование стилей мне по душе.

Идея в том что бы иметь возможность создавать группы стилей обрамляя их соответствующим комментарием.

Вот пример пустой группы:

/* @group My Group */

/* @end */

/* @group My Group */

/* @end */

По сути не имеет значение какой вид имеет разделитель (заголовок) у стилей, хотя если говорить про БЭМ, то он и не обязателен вовсе. Дефолтный шаблон файла стилей созданные bem-tools будет следующего содержания:

.b-ИМЯ_БЛОКА
{
 /* ... */
}

.b-ИМЯ_БЛОКА

{

/* ... */

}

Мне такой подход несколько непривычен.

В силу того что я использую для написания стилей CSSEdit, а так же уже привык к табулированному коду, то мне удобно что бы CSS-файл создавался с уже подготовленным для меня содержимым.

Открой файл:

/Users/ИМЯ_ПОЛЬЗОВАТЕЛЯ/node_modules/bem/lib/techs/css.js

нас будет интересовать следующий код:

return Template.process([
    '{{bemSelector}}',
    '{',
    ' /* ... */',
    '}'],
    vars);
vars);

return Template.process([

'{{bemSelector}}',

'{',

' /* ... */',

'}'],

vars);

Я несколько изменил этот код под себя, но при этом не теряя логики построения стилей согласно БЭМ и не усугубив читабельность кода:

    return Template.process([
        '/* @group GroupName */',
        '',
        '   {{bemSelector}} { }',
        '',
        '/* @end */',
        '',
        '',
        '/* @group RTL */',
        '',
        '   .g-rtl {{bemSelector}} { }',
        '',
        '/* @end */',
        '',
        '',
        '/* @group IE */',
        '',
        '   ',
        '',
        '/* @end */'
        ],
        vars);

return Template.process([

'/* @group GroupName */',

'',

' {{bemSelector}} { }',

'',

'/* @end */',

'',

'/* @group RTL */',

'',

' .g-rtl {{bemSelector}} { }',

'',

'/* @end */',

'',

'/* @group IE */',

'',

' ',

'',

'/* @end */'

vars);

Я содержу сразу в одном файле стандартные стили, оптом идут стили для режима чтения справа на лево, и потом тут же пишу стили для Internet Explorer.

Т.е. по сути ты можешь подогнать шаблон создания CSS-файлов.

Как создать декларацию?

Декларация описывает какое то множество, как правило это подмножество всех реализованных и имеющихся блоков/элементов/модификаторов.

Пример декларации можешь посмотреть тут: https://github.com/bem/bem-tools/blob/nodejs/tests/decl.js

Мы исходим из того что для каждой страницы нужен определённый набор блоков. А значит что для неё следует писать свою декларацию.

В декларации описываются блоки, их элементы и модификаторы. Опираясь на пример выше ты сможешь написать свою декларацию.

Как сделать сборку?

Собрать все файлы в один CSS-файл можно сделать всего одной командой:

$ bem build -d decl.js -t css output_file_name

bem
build — создаёт файл который будет содержать @import записи
-d ~/decl.js — указывается путь декларации в которой будет описано какие блоки нужно собрать
-t css
output_file_name — имя файла в который будет собран build

На выходе ты получишь файл похожий по содержимому на этот: https://github.com/bem/bem-tools/blob/nodejs/tests/bla.css

В общем думаю для начала в качестве азов этого будет предостаточно.

Если будут возникать вопросы то не забывай про

$ bem —help

cd ~/

cd ~/

chmod +x buildcss

1	chmod +x buildcss

Этим ты сделаешь файл исполняемым. Теперь скачай последнюю версия YUI Compressor и положи файл по адресу: ~/lib/yui/yuicompressor-x.y.z.jar Далее открой buildcss любым редактором и ты увидешь вверху строки:

buildFile="global.css"; # Имя конечного файла
yui=$HOME'/lib/yui/yuicompressor-2.4.6.jar'; # путь к компрессору

1 2	buildFile="global.css"; # Имя конечного файла yui=$HOME'/lib/yui/yuicompressor-2.4.6.jar'; # путь к компрессору

Измени, при желании, имя собранного файла. Проверь что бы путь и версия компрессора совпадали с твоими. В общем на этом всё. Для того что бы запустить скрипт перейди в Терминале в папку blocks

cd /путь/к/папке/blocks

1	cd /путь/к/папке/blocks

и запусти скрипт

~/buildcss

1	~/buildcss

-->

Желаю удачи )