Як користуватись bem-tools
У цій статті я розповім тобі, як використовувати bem-tools у створенні проекту.
І так, як ти знаєш бем-інструменти використовуються з-під терміналу. Тож і ми з тобою всі операції робитимемо саме там.
На замітку : робота з бем-інструментами в даній статті описується в Mac OS X. Що ж до інших ОС то сумніваюся, що вона чимось відрізнятиметься.
Для того щоб викликати хелп по bem-tools введи команду:
Щоб дізнатися хелп по будь-якій команді, достатньо ввести «bem имя_команди -help». приклад
Тепер давай ближче до справи а руки сверблять :)
Створюю папку для тестів на вінчестері і перейди в неї в терміналі:
Як створити рівень визначень?
Для того щоб створити рівень визначення (або перевизначення) слід виконати наступне
$ 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 та запропоноване нею структурування стилів мені до вподоби.