EN RU
Форум

Методология

Технологии

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

Библиотеки

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

Быстрый старт. Собираем статическую страницу

Описание урока

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

Вы научитесь:

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

Страница приветствия

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

Важно! В документе не рассматриваются вопросы сборки БЭМ-проекта.

Минимальные требования

Чтобы начать работу, необходимо установить:

Важно! Пользователям операционной системы Windows необходимо установить Git Bash.

Что используем

Клонируем БЭМ-проект

Чтобы быстро развернуть БЭМ-проект, воспользуемся локальной копией шаблонного репозитория project-stub, который содержит необходимый минимум конфигурационных файлов. В project-stub по умолчанию подключены основные БЭМ-библиотеки:

Копию project-stub можно сделать с помощью Git.

Примечание. В операционных системах OS X или Linux все команды выполняются в терминале. Пользователям Windows необходимо выполнять команды в Git Bash. Убедитесь, что Git Bash запущен от имени администратора.

Чтобы создать локальную копию project-stub, выполните следующие действия:

После сборки и установки всех зависимостей файловая структура проекта будет иметь следующий вид:

start-project/
    .bem
    .enb/                 # Конфигурационные файлы для сборщика ENB
    common.blocks/        # Базовые реализации блоков
    desktop.blocks/       # Директория блоков проекта
    desktop.bundles/      # Директории бандлов проекта
    node_modules/         # Установленные модули Node (пакеты)
    .bemrc                #
    .editorconfig         # Конфигурация EditorConfig для поддержки разных редакторов и IDE
    .gitignore            # Исключение файлов и директорий в Git
    .travis.yml           # Автоматический запуск линтеров в Continuous Integration
    favicon.ico           #
    gulpfile.js           # Конфигурационный файл для сборщика Gulp
    package.json          # Описание проекта для npm
    README.md             # Текстовое описание проекта

Создаем страницу

Директория desktop.bundles в проекте содержит файлы, полученные в результате сборки. Такие файлы в БЭМ-методологии называются бандлами. В простейшем случае бандлы собираются для каждой страницы: одной директории бандла соответствует одна страница проекта. По умолчанию в проекте присутствует страница index.

Чтобы добавить новую страницу:

Описываем страницу в BEMJSON-файле

Чтобы создать описание страницы, необходимо представлять ее структуру. Создадим блок-контейнер hello, в котором разместим поле ввода, кнопку и текст приветствия. Блоки input (поле ввода) и button (кнопка) возьмем из готовой библиотеки bem-components, а текст приветствия реализуем как элемент greeting блока hello.

Подробнее о BEMJSON-формате входных данных.

Чтобы описать структуру страницы, отредактируйте файл desktop.bundles/hello/hello.bemjson.js:

Чтобы убедиться, что на странице появились все описанные блоки и элементы, откройте страницу hello в браузере: http://localhost:8080/desktop.bundles/hello/hello.html.

Создаем блоки

Блоки из готовой библиотеки появились на странице, но они не взаимодействуют. Теперь создадим блок hello, который будет брать данные из поля ввода и подставлять их в приветствие. Для этого:

Описываем поведение блока

Создаем шаблон блока

BEMHTML — технология, которая преобразует входные данные из BEMJSON-файла в HTML.

Чтобы создать шаблон:

Добавляем стили блоку

Полный код файла desktop.bundles/hello/hello.bemjson.js.

Результат

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

О том, как создать более сложный статический проект, читайте в статье Создаем статический проект на БЭМ.