БЭМ и CSS

БЭМинар
19 марта 2015,
Начало в 17:00

План БЭМинаров

• БЭМ и сборка — собираем БЭМ-проект с помощью gulp
• BEMJSON + BEMHTML. мета-описание страницы в БЭМ терминах и декларативная БЭМ-шаблонизация
• ENB — сборщик БЭМ-проектов, зависимости блоков
• jQuery и БЭМ. Независимые блоки в JavaScript, декларативный JavaScript
• i-bem.js Декларативный JavaScript в БЭМ-терминах
• Библиотека bem-components — open-source компоненты от Яндекс, создание собственной темы
• Динамическое приложение на express и БЭМ

Блок

Независимый блок

Элемент

Модификатор

БЭМ

• Плюсы методологии:
  • Реиспользование кода
  • Удобство расположения блоков на файловой системе
  • Упрощенное взаимодействие в команде — все говорят в одних терминах
  • Проще долгосрочная поддержка
  • Декларативность не только в CSS, но и в JavaScript и шаблонах

На потом

• Полезные ссылки:
  • Методология. Основные определения
  • История создания БЭМ
  • Видео доклад Виталия Харисова История создания БЭМ. Кратко, сбивчиво и неполно
  • Статья «Side Effects in CSS»

Продолжим

Пришел менеджер и все усложнил

• Возникла необходимость сделать еще три похожие страницы:
  • Страница с Гарри Поттером для подростков
  • Страница с доступным текстом и контрастной цветовой схемой для пенсионеров
  • Страница в розовом для девушек

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

• это набор реализаций блоков, сгруппированных в одну директорию
  • common.blocks/ — это общие для всех страниц стили
  • potter.blocks/ — стили, специфичные для страницы
  • pink.blocks/ — стили, специфичные для страницы

На потом

• Полезные ссылки:
  • Методология. Организация файловой системы