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

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

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

Содержание

• Уровни
• Блоки
• Поддерживаемые браузеры
• Технологии
• Инструменты
• Принципы работы
• Использование
• Разработка
• Команда основной разработки
• Рабочий процесс

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

• История изменений
• Миграция на последующие версии

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

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

• common.blocks — поддержка всех устройств и браузеров.
• desktop.blocks — поддержка браузеров для настольных устройств.
• touch.blocks — реализация специфических особенностей для touch-платформ.
• touch-phone.blocks — реализация специфических особенностей для смартфонов.
• touch-pad.blocks — реализация специфических особенностей для планшетов.
• design/<common|desktop|touch|touch-phone|touch-pad>.blocks — реализация различных дизайнов (тем).

Блоки

• attach
• button
• checkbox
• checkbox-group
• control
• control-group
• dropdown
• icon
• image
• input
• link
• menu
• menu-item
• modal
• popup
• progressbar
• radio
• radio-group
• select
• spin
• textarea
• z-index-group

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

• Desktop

  • Firefox (две последние стабильные версии)
  • Chrome (две последние стабильные версии)
  • Safari (две последние стабильные версии)
  • Yandex (две последние стабильные версии)

• Touch

  • Android 5+
  • iOS 12+

Технологии

• ES-модули
• i-bem.js
• BEMHTML
• DEPS
• PostCSS

Инструменты

Сборка

• Vite — сборка и сервер разработки
• PostCSS — обработка CSS (через Vite)
• Autoprefixer — вендорные префиксы

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

• ESLint 10 — линтинг JavaScript

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

• Playwright — регрессионное тестирование в браузере

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

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

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

В зависимости от того, что изменяет состояние компонента (модификатор или поле), используются разные события:

• Для реакции на изменения «состояния» полей value применяется событие change.
• Для реакции на установку/снятие модификатора применяются события на изменение модификатора.

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

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

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

Особенности реализации модификатора focused

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

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

• focused — выставляется при клике на контрол курсором мыши.
• focused-hard — выставляется при переходе на контрол с помощью клавиатуры или через JavaScript. Создан для более явного визуального выделения компонента при получении фокуса. Например, в теме islands большинство контролов получают дополнительную рамку при установке модификатора focused-hard.

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

Установка

npm install bem-components

Требования: Node.js >= 20

Зависимости (peerDependencies):

• bem-core ^5.0.0
• jquery ^4.0.0

Сборка из исходного кода

git clone https://github.com/bem/bem-components.git
cd bem-components
npm install
npm run build

Результат сборки для трёх платформ будет в директории dist/:

• dist/desktop/
• dist/touch-pad/
• dist/touch-phone/

Разработка

• Рабочая копия
• Внесение изменений
• Тестирование

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

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

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

Установка зависимостей:

npm install

Сборка всех платформ:

npm run build

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

npm run dev

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

npm run lint

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

Регрессионное тестирование в браузере

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

npm run test:browser        # запуск тестов в headless-режиме
npm run test:browser:ui     # запуск тестов с UI Playwright

Запуск всех проверок

npm test                    # запускает lint + test:browser

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

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

• veged
• dfilatov
• tadatuta

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

Текущие задачи отслеживаются через GitHub Issues.

Лицензия

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