Upload
yandex
View
5.338
Download
8
Embed Size (px)
Citation preview
БЭМ вебинар
Я
БЭМинар19 марта 2015, Начало в 17:00
ндекс
2
Я
Верстаем промо-страницупо БЭМ-методологии
Белицкий Дмитрий, Разработчик интерфейсов, служба разработки БЭМ
ндекс
Белицкий ДмитрийРазработчик интерфейсов, служба разработки БЭМ
Обо мне
[email protected] @dabelitsky
github.com/dab
Верстаем веб-страницу
5
БЭМинар:
БЭМ и сборка — собираем БЭМ-проект с помощью gulp
BEMJSON + BEMHTML. мета-описание страницы в БЭМ терминах идекларативная БЭМ-шаблонизация
ENB — сборщик БЭМ-проектов, зависимости блоков
jQuery и БЭМ. Независимые блоки в JavaScript, декларативныйJavaScript
i-bem.js Декларативный JavaScript в БЭМ-терминах
Библиотека bem-components — open-source компоненты отЯндекс, создание собственной темы
Динамическое приложение на express и БЭМ
План БЭМинаров
6
00:00 -00:45
8
Блок
9
Независимый блок
10
Элемент
11
Модификатор
12
Плюсы методологии:
�Реиспользование кода
�Удобство расположения блоков на файловой системе
�Упрощенное взаимодействие в команде — все говорят в однихтерминах
�Проще долгосрочная поддержка
�Декларативность не только в CSS, но и в JavaScript и шаблонах
БЭМ
14
Полезные ссылки:
�Методология. Основные определения
�История создания БЭМ
�Видео доклад Виталия Харисова История создания БЭМ. Кратко,сбивчиво и неполно
�Статья «Side Effects in CSS»
На потом
24
Вопросы?
25
Пришел менеджер и все усложнил
Возникла необходимость сделать еще три похожие страницы:
�Страница с Гарри Поттером для подростков
�Страница с доступным текстом и контрастной цветовой схемойдля пенсионеров
�Страница в розовом для девушек
Продолжим
26
это набор реализаций блоков, сгруппированных в однудиректорию
�common.blocks/ — это общие для всех страниц стили
�potter.blocks/ — стили, специфичные для страницы
�pink.blocks/ — стили, специфичные для страницы
Уровень переопределения
27
Полезные ссылки:
�Методология. Организация файловой системы
На потом
28
Всем БЭМ
29