В текущей статье я расскажу тебе как использовать 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 и предложенное ею структурирование стилей мне по душе.
Идея в том что бы иметь возможность создавать группы стилей обрамляя их соответствующим комментарием.
Вот пример пустой группы:
1 2 3 |
/* @group My Group */ /* @end */ |
По сути не имеет значение какой вид имеет разделитель (заголовок) у стилей, хотя если говорить про БЭМ, то он и не обязателен вовсе. Дефолтный шаблон файла стилей созданные bem-tools будет следующего содержания:
1 2 3 4 |
.b-ИМЯ_БЛОКА { /* ... */ } |
Мне такой подход несколько непривычен.
В силу того что я использую для написания стилей CSSEdit, а так же уже привык к табулированному коду, то мне удобно что бы CSS-файл создавался с уже подготовленным для меня содержимым.
Открой файл:
/Users/ИМЯ_ПОЛЬЗОВАТЕЛЯ/node_modules/bem/lib/techs/css.js
нас будет интересовать следующий код:
1 2 3 4 5 6 7 |
return Template.process([ '{{bemSelector}}', '{', ' /* ... */', '}'], vars); vars); |
Я несколько изменил этот код под себя, но при этом не теряя логики построения стилей согласно БЭМ и не усугубив читабельность кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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
1 |
cd ~/ |
1 |
chmod +x buildcss |
Этим ты сделаешь файл исполняемым. Теперь скачай последнюю версия YUI Compressor и положи файл по адресу: ~/lib/yui/yuicompressor-x.y.z.jar Далее открой buildcss любым редактором и ты увидешь вверху строки:
1 2 |
buildFile="global.css"; # Имя конечного файла yui=$HOME'/lib/yui/yuicompressor-2.4.6.jar'; # путь к компрессору |
Измени, при желании, имя собранного файла. Проверь что бы путь и версия компрессора совпадали с твоими. В общем на этом всё. Для того что бы запустить скрипт перейди в Терминале в папку blocks
1 |
cd /путь/к/папке/blocks |
и запусти скрипт
1 |
~/buildcss |
-->
Желаю удачи )