GrabDuck

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

:

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 и предложенное ею структурирование стилей мне по душе.

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

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

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

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

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

Открой файл:

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

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

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

Я содержу сразу в одном файле стандартные стили, оптом идут стили для режима чтения справа на лево, и потом тут же пишу стили для 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

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

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

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

  -->

Желаю удачи )