БЭМ вебинар

Я

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

ндекс

2

Я

Верстаем промо-страницупо БЭМ-методологии

Белицкий Дмитрий, Разработчик интерфейсов, служба разработки БЭМ

ндекс

Белицкий ДмитрийРазработчик интерфейсов, служба разработки БЭМ

Обо мне

dmtry@yandex-team.ru @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