Быстрый старт «C чего начать»
Эта статья рассказывает о том, как быстро создать свой проект с использованием принципов и полного наобора технологий БЭМ. Для изучения материала, представленного в статье, необходимо знание JavaScript'а.
Мы пошагово продемонстрируем процесс разработки простого проекта и узнаем преимущества его применения на практике.
Начнем...
Сделаем очень простой пример: создадим макет пустой страницы с блоком приветствия, который содержит текст Hello, BEM!.
Выполним шаги:
- Подготовим среду разработки
- Устанавим заготовку БЭМ-проекта
project-stub - Создадим макет простой страницы с помощью BEMJSON
- Добавим блок
- Напишем шаблон: приветствие по образцу
- Настроим оформление и поведение блока (CSS и JS)
- Добавим блок из библиотеки bem-components
(пример видео для быстрого старта angular http://www.youtube.com/watch?v=uFTFsKmkQnQ)
Перед началом работы убедимся, что на компьютере установлены:
Node.js – это программная платформа, основанная на языке JavaScript и позволяющая легко создавать быстрые и масштабируемые сетевые приложения.
Чтобы создать новый проект, скопируем себе шаблонный репозиторий для создания БЭМ-проектов project-stub и установим утилиты bem-tools.
project-stub подготовлен разработчиками БЭМ и содержит необходимый минимум конфигурационных файлов и папок, который позволяет быстро развернуть проект с нуля.
В нем по умолчанию подключены основные БЭМ-библиотеки:
$ git clone --depth=1 https://github.com/bem/project-stub.git project-hello
$ cd project-hello
$ npm install
Здесь выполняется:
- копирование заготовки проекта в локальный каталог
project-hello; - локальная установка
bem-toolsв каталог созданного проекта(./project-hello/node_modules/.bin/bem);
Для работы с файлами по БЭМ-методологии будем использовать необходимый инструментарий — утилита bem (bem-tools).
Организовать цикл разработки (правка—компиляция—просмотр—правка...) поможет команда bem server. Запустить его нужно в терминале локально, находясь в корневой папке проекта.
NB: При первой сборке в каталог проекта копируются библиотеки bemhtml и bem-core
$ ./node_modules/.bin/bem server
Сервер принимает соединения по адресу http://localhost:8080/ и выполняет сборку страницы по запросу от браузера, например: http://localhost:8080/desktop.bundles/index.
Комбинация клавиш Ctrl + C – остановит сервер, в активном окне терминала.
Подробнее: Варианты локальной и глобальной установки bem-tools Команды bem-tools.
Язык описания макета (структуры) статической страницы (БЭМ-дерева) — BEMJSON.
Макеты статических HTML-страниц размещаются в каталоге desktop.bundles.
Создадим макет пустой страницы (назовем ее test):
$ ./node_modules/.bin/bem create -l desktop.bundles -b test
Посмотрим исходный код страницы (desktop.bundles/test/test.bemjson.js):
({
block: 'page',
title: 'hello',
head: [
{ elem: 'css', url: '_hello.css' }
],
scripts: [{ elem: 'js', url: '_hello.js' }],
content: [
{
block: 'content',
content: [
'block content'
]
}
]
})Здесь используется:
блок page из библиотеки блоков bem-core.
NB: В проекте подключена библиотека блоков bem-core. Мы можем использовать и модифицировать блоки оттуда
Просмотрим результат сборки страницы в браузере: (http://localhost:8080/desktop.bundles/test/test.html).
Подробнее:
Сделаем очень простой макет — разместим на нашей новой странице test один блок приветствия с текстом Hello, BEM!.
Отредактируем исходный BEMJSON (desktop.bundles/test/test.bemjson.js):
({
block: 'page',
title: 'test',
head: [
{ elem: 'css', url: '_test.css', ie: false},
{ elem: 'css', url: '_test', ie: true },
{ block: 'i-jquery', elem: 'core'},
{ elem: 'js', url:'_test.js'},
],
content: [
{
block: 'hello',
content: 'Hello, BEM!'
}
]
})Здесь:
блок hello поместили в содержание страницы (поле content блока page);
текст приветствия — в поле content блока hello.
NB: Если в проекте не определены шаблоны блока, HTML генерируется шаблонами по умолчанию из библиотеки bemhtml
Просмотрим результат. Фрагмент HTML-кода, описывающий тело страницы, выглядит так:
<body class="page__body page">
<div class="hello">Hello, BEM!</div>
</body>Здесь:
блоку hello соответствует элемент div;
в атрибуте class указано имя блока.
BEMHTML поэлементно преобразует входное БЭМ-дерево в формате BEMJSON в выходной HTML-документ.
Сделаем блок hello более универсальным — пусть он генерирует приветствие для указанного имени. Указывая разные имена, можно будет использовать один и тот же блок hello на разных страницах или многократно на одной странице.
NB: Объекты BEMJSON могут содержать произвольные поля данных, а шаблоны могут использовать эти поля
Создадим в нашем блоке поле name для хранения имени пользователя. Исправим test.bemjson.js:
{ block: 'hello', name: 'BEMHTML' }Теперь чтобы генерировать шаблонный текст приветствия, нам нужно создать в проекте файлы для блока hello и определить BEMHTML-шаблон.
Блоки, определённые в проекте, размещаются в каталоге desktop.blocks. Каталог для блока и нужные файлы удобно создавать с помощью команды bem create:
$ ./node_modules/.bin/bem create -l desktop.blocks -b hello
Напишем шаблон для блока hello в файле desktop.blocks/hello/hello.bemhtml:
block hello, content: ['Hello, ', this.ctx.name, '!']Здесь:
block hello, content — предикат шаблона (будет вызван при обработке блока hello в стандартной моде content);
При создании блока в проекте project-stub по умолчанию были сгенерированы файлы трех технологий:
hello.bemhtmlhello.csshello.js
Реализация блока в технологиях CSS и JS не является частью шаблонизатора BEMHTML, однако используeтся вместе с ним в любом реальном проекте.
NB: BEMHTML помещает имена БЭМ-сущностей в атрибут class HTML-элементов. В CSS используются только селекторы по классу.
Например, чтобы покрасить блок приветствия в зеленый цвет, достаточно написать в CSS блока (desktop.blocks/hello/hello.css):
.hello
{
color: green
}
Чтобы включить клиентский JavaScript для блока, необходимо определить для блока шаблон по моде js:
block hello, js: trueЕсли для блока был инициализирован клиентский JS, BEMHTML добавляет в список HTML-классов i-bem, а также атрибут со значением параметров клиентского JS (по умолчанию — onclick, см. мода jsAttr). JS-фреймворк при инициализации добавляет HTML-класс hello_js_inited:
<div class="hello i-bem hello_js_inited" onclick="return {"hello":{}}">NB: Блок i-bem (часть библиотеки bem-core) — JS-фреймворк, позволяющий писать клиентский JavaScript в терминах БЭМ
Пусть, например, при клике на блоке выводится предупреждение с текстом Hello. Файл desktop.blocks/hello/hello.js:
BEM.DOM.decl('hello', {
onSetMod: {
'js': {
'inited': function() {
this.bindTo('click', function() { alert('Hello') });
}
}
}
})##7. Добавить блок из библиотеки bem-components
Подключим два готовых блока из библиотеки bem-components. Для этого просто скопироуем BEMJSON
блоков input и button из примеров документации и вставим в содержимое (content) блока страницы:
({
block: 'page',
title: 'test',
head: [
{ elem: 'css', url: '_test.css', ie: false},
{ elem: 'css', url: '_test', ie: true },
{ block: 'i-jquery', elem: 'core'},
{ elem: 'js', url:'_test.js'},
],
content: [
{
block: 'hello',
content: 'Hello, BEM!'
},
{
block : 'input',
mods : { theme : 'islands', size: 'm' },
placeholder : 'Введите слово'
},
{
block : 'button',
text : 'Кнопка',
mods : { theme : 'islands', size : 'm' }
}
]
})Описание JS-фреймворка i-bem.js
BEMHTML. Справочное руководство
Библиотека блоков bem-core
БЭМ-методология