EN RU
Форум

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы

Библиотека BEM Components

bem-components — это библиотека с открытым кодом, которая предоставляет набор готовых визуальных компонентов (блоков). Содержит контролы форм и другие базовые компоненты для построения интерфейсов.

Библиотека предоставляет темы оформления. В данной версии представлена тема islands, реализующая дизайн Яндекса. Предусмотрена одновременная поддержка нескольких тем и возможность создания новых.

GitHub Release Build Status Coverage Status devDependency Status

Содержание

Дополнительная информация

Уровни переопределения

Блоки

Поддерживаемые браузеры

Поддержка Internet Explorer 8

Для поддержки Internet Explorer 8 подключите на страницу:

Технологии

Инструменты

Сборщики

Оптимизаторы

Проверка кода

Прочее

Использование

Существует несколько способов начать работу с bem-components. Выбор подходящего способа использования зависит от требований проекта и его совместимости с технологиями и инструментами библиотеки, а также от вашего опыта работы с БЭМ-проектами.

Выберите способ поставки, наиболее подходящий вашему проекту:

DistSourceCompiledПредсобранный CSS- и JavaScript-код и шаблоны библиотеки. Подключается ссылками на страницу. Не требует сборки и совместимости с вашим проектом.Полный исходный код библиотеки. Для использования необходима предварительная сборка. Требует полной совместимости проекта с технологиями и инструментами библиотеки.Полный исходный код библиотеки. Для использования необходима предварительная сборка. Отличается от способа «Source» тем, что PostCSS скомпилирован в CSS. Подходит для проектов, не использующих PostCSS.

Способ использования библиотеки определяет порядок ее подключения в проект:

Подключение исходного кода библиотеки (Source и Compiled)

Рекомендуемый способ подключения — использование инструментов ENB или bem-tools.

В качестве примера воспользуйтесь project-stub, где библиотека подключена по умолчанию. Также можно создать проект и подключить в него библиотеку с помощью генератора на Yo, который позволяет создать необходимую конфигурацию проекта.

Подключение предсобранных файлов библиотеки (Dist)

Самый простой способ подключить библиотеку в проект — скачать предварительно собранные файлы библиотеки и добавить их в HTML страницы с помощью элементов <link> и <script>. Сделать это можно разными способами:

О том, как работать с подключенными файлами библиотеки, читайте в разделе Работа с библиотекой.

Состав предсобранной библиотеки

Доступны отдельные наборы файлов для трех платформ:

Каждый набор включает в себя:

В каждый набор также включены аналогичные dev-версии (с сохранением форматирования и комментариев).

Подключение файлов с CDN

Самый быстрый и простой способ подключить библиотеку в проект — добавить элементы <link> и <script> в HTML страницы:

<link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css">
<script src="https://yastatic.net/bem-components/latest/desktop/bem-components.js+bemhtml.js"></script>

Схема подключения файла с CDN: //yastatic.net/название-библиотеки/версия/платформа/имя-файла.

Пример: //yastatic.net/bem-components/latest/desktop/bem-components.dev.js+bemhtml.js.

Загрузка в виде архива

Выберите необходимую версию библиотеки и скачайте архив. Распакуйте. Добавьте файлы на страницу с помощью элементов <link> и <script>:

<link rel="stylesheet" href="desktop/bem-components.css">
<script src="desktop/bem-components.js+bemhtml.js"></script>

Сбор файлов из исходного кода

Код библиотеки находится на Github: https://github.com/bem/bem-components.

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

# Клонируйте исходный код библиотеки
git clone https://github.com/bem/bem-components.git
# Перейдите в папку библиотеки
cd bem-components
# Установите необходимые зависимости
npm install
# Соберите Dist
npm run dist

В результате сборки файлы будут доступны в папке bem-components-dist. Подключите файлы в HTML страницы:

<link rel="stylesheet" href="bower_components/bem-components-dist/desktop/bem-components.css">
<script src="bower_components/bem-components-dist/desktop/bem-components.js+bemhtml.js"></script>

Установка с помощью Bower

При условии, что Bower уже установлен в ваш проект, выполните следующую команду:

bower i bem/bem-components-dist

В результате сборки файлы будут доступны в папке bem-components-dist. Подключение не отличается от предыдущего способа:

<link rel="stylesheet" href="bower_components/bem-components-dist/desktop/bem-components.css">
<script src="bower_components/bem-components-dist/desktop/bem-components.js+bemhtml.js"></script>

Работа с библиотекой в виде Dist

Работу с библиотекой можно разбить на два шага:

Первый шаг всегда одинаковый. Второй — выполняется тремя разными способами, которые можно произвольно комбинировать:

Способ I. Скопировать нужный HTML из примера. Для этого перейдите во вкладку HTML в шапке примера.

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

Способ II. Использовать шаблонизацию в браузере. Сборка библиотеки Dist включает предсобранные шаблоны BEMHTML и BH на выбор.

Для этого скопируйте из документации BEMJSON-код примера и вставьте его в HTML страницы. Используйте вкладку BEMJSON в шапке примера.

HTML страницы будет выглядеть следующим образом:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bem-components as a library</title>
    <link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css">
</head>
<body class="page page_theme_islands">
    <form class="form" action="/"></form>
<script src="https://yastatic.net/bem-components/latest/desktop/bem-components.no-autoinit.js+bemhtml.js"></script>
<script>
modules.require(['i-bem__dom', 'BEMHTML', 'jquery', 'i-bem__dom_init'], function(BEMDOM, BEMHTML, $, init) {
    var html = BEMHTML.apply({
        block : 'select',
        mods : { mode : 'check', theme : 'islands', size : 'm' },
        name : 'select1',
        val : [2, 3],
        text : 'Программа конференции',
        options : [
            { val : 1, text : 'Доклад' },
            { val : 2, text : 'Мастер-класс' },
            { val : 3, text : 'Круглый стол' }
        ]
    });

    BEMDOM.append($('.form'), html);    // https://ru.bem.info/libs/bem-core/current/desktop/i-bem/jsdoc/#append-1

    // NOTE: необходимо явно вызвать `init();`, если требуется инициализировать блоки, заранее присутствующие в HTML-разметке
});
</script>
</body>
</html>

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

Способ III. Выполнять {BEMHTML,BH}.apply() в Node.js и отдавать браузеру уже готовый HTML:

var BEMHTML = require('./dist/desktop/bem-components.bemhtml.js').BEMHTML;

BEMHTML.apply({
    block : 'select',
    mods : { mode : 'check', theme : 'islands', size : 'm' },
    name : 'select1',
    val : [2, 3],
    text : 'Программа конференции',
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}); // возвращает HTML-строку

Понимание принципов библиотеки

Блок и его состояния

Библиотека состоит из блоков, визуальное представление которых можно увидеть на витрине bem-components. У блоков есть состояния, которые определяют его поведенческую модель. Состояние блока выражается через модификаторы и специализированные поля. Изменение модификатора создает событие, которое можно использовать для работы с блоком.

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

Контролы в bem-components

Контролы в bem-components могут использоваться как базовая часть для создания других компонетов библиотек. Такие контролы не имеют моделей, как в HTML, и могут использоваться для решения задач, в которых не нужна семантика конкретной HTML-модели.

В качестве примера рассмотрим «поведенческую модель» HTMLInputElement, которая представляет собой высокоуровневый интерфейс, специально созданый для редактирования данных. Блоки в bem-components отличаются тем, что могут использоваться как базовая часть блока другой библиотеки, который будет решать эту же задачу. Но, помимо этого, они могут решать и другие интерфейсные задачи, в которых не нужна семантика HTML input.

Особенности реализации

Модификатор focused

Контролы в bem-components имеют два типа фокуса, которые выставляются с помощью модификаторов focused и focused-hard. Тип фокуса определяет внешний вид контрола.

Выбор модификатора происходит автоматически в зависимости от способа установки фокуса:

Разработка

Рабочая копия

Получение исходников:

$ git clone git://github.com/bem/bem-components.git
$ cd bem-components

Установка зависимостей (инструментов):

$ npm install

Для последующего запуска локально установленных инструментов потребуется export PATH=./node_modules/.bin:$PATH или любой альтернативный способ.

Установка зависимых библиотек:

$ bower install

Сборка примеров и тестов:

$ npm run build-all

Запуск сервера для разработки:

$ npm start
$ open http://localhost:8080/

NB Точечная сборка отдельных блоков описана в разделе Тесты на шаблоны.

Проверка кода:

$ npm run lint

Тестирование

Юнит-тесты на JavaScript

Команда npm run test-specs запускает юнит-тесты на JS.

Для запуска точечной сборки используйте команду enb make specs desktop.specs/<block-name> (например, enb make specs desktop.specs/input).

Тесты запускаются автоматически на Travis для каждого pull request'а.

Регрессионное тестирование верстки

Для тестирования верстки используется Gemini.

Тесты каждого блока находятся в отдельном файле вида block-name.gemini.js в директории gemini/. Локально тесты запускаются вручную. Тесты на Travis запускаются автоматически. В качестве Selenium Grid используется сервис SauceLabs.

Для запуска тестов локально необходимо:

При разработке новых тестов для ускорения локального запуска:

Подробно про использование Gemini с разными бекендами читайте в статье Введение в работу с Gemini.

NB В репозиторий необходимо сохранять скриншоты, собранные в SauceLabs. Это позволит избежать отличий в отрисовке шрифтов.

Перед коммитом новых или измененных эталонных изображений необходимо:

Тесты на шаблоны

Инструменты сборки библиотеки позволяют собирать и запускать тесты на BEMHTML- и BH-шаблоны блоков.

Добавление теста для блока

К блоку могут быть написаны несколько тестов и, соответственно, каждый тест будет состоять из пары файлов BEMJSON + HTML с одинаковыми именами.

desktop.blocks
    └── myblocks
        ├── myblock.bemhtml.js
        ├── myblock.bh.js
        ├── ...
        └── myblock.tmpl-specs
            ├── 10-default.bemjson.js
            ├── 10-default.html
            ├── 20-advanced.bemjson.js
            └── 20-advanced.html

Команда для сборки и запуска тестов:

magic run tmpl-specs

Сборка тестов на нужном уровне переопределения:

magic make desktop.tmpl-specs

Сборка тестов только для одного блока (точечная сборка):

magic make desktop.tmpl-specs/button

В случае успешной сборки, тесты будут запущены с последующим выводом результатов. Если результат применения шаблона не совпадает с эталонным HTML, то в логе будет ошибка с указанием отличий от эталона.

Все тесты автоматически запускаются на Travis для каждого pull request'a.

Команда основной разработки

Рабочий процесс

Список текущих задач отображается на специальном Agile Board.

Статусы задач:

Лицензия

© 2012 YANDEX LLC. Код лицензирован Mozilla Public License 2.0.