Skip to content

README.ru.md

Latest commit

 

History

History
221 lines (153 loc) · 10.8 KB

README.ru.md

File metadata and controls

221 lines (153 loc) · 10.8 KB

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

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

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

GitHub Release

Содержание

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

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

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

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

Блоки

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

  • Desktop

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

  • Touch

    • Android 5+
    • iOS 12+

Технологии

Инструменты

Сборка

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

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

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

  • 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.

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

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

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

Лицензия

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