SlideShare a Scribd company logo
1 of 29
Download to read offline
БЭМ вебинар
Я
БЭМинар
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

More Related Content

What's hot

Библиотека bem-components
Библиотека bem-componentsБиблиотека bem-components
Библиотека bem-componentsYandex
 
Тема для WordPress в БЭМ. Владимир Гриненко, Яндекс
Тема для WordPress в БЭМ. Владимир Гриненко, ЯндексТема для WordPress в БЭМ. Владимир Гриненко, Яндекс
Тема для WordPress в БЭМ. Владимир Гриненко, Яндексyaevents
 
БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014Ivan Voischev
 
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Ontico
 
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...Ontico
 
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)Ontico
 
Alex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projectsAlex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projectsAlexander Baumgertner
 
JavaScript завтра / Сергей Рубанов (Exante Limited)
JavaScript завтра / Сергей Рубанов  (Exante Limited)JavaScript завтра / Сергей Рубанов  (Exante Limited)
JavaScript завтра / Сергей Рубанов (Exante Limited)Ontico
 
Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
Дмитрий Кушников — БЭМ глазами бэкенд-разработчикаДмитрий Кушников — БЭМ глазами бэкенд-разработчика
Дмитрий Кушников — БЭМ глазами бэкенд-разработчикаYandex
 
Отладка кода в браузере / Антон Шувалов (Rambler&Co)
Отладка кода в браузере / Антон Шувалов (Rambler&Co)Отладка кода в браузере / Антон Шувалов (Rambler&Co)
Отладка кода в браузере / Антон Шувалов (Rambler&Co)Ontico
 
Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...
Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...
Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...Yandex
 
Yarfrontend #2. Как мы делали гуя...
Yarfrontend #2. Как мы делали гуя...Yarfrontend #2. Как мы делали гуя...
Yarfrontend #2. Как мы делали гуя...oelifantiev
 
Сергей Бережной "Внедрение БЭМ в существующие системы"
Сергей Бережной "Внедрение БЭМ в существующие системы"Сергей Бережной "Внедрение БЭМ в существующие системы"
Сергей Бережной "Внедрение БЭМ в существующие системы"Yandex
 
BEM — block, element, modification conception
BEM — block, element, modification conceptionBEM — block, element, modification conception
BEM — block, element, modification conceptionVadim Patsev
 
архитектура крупных Word press сайтов
архитектура крупных Word press сайтовархитектура крупных Word press сайтов
архитектура крупных Word press сайтовМаксим Бровченко
 
Bemer: декларативная шаблонизация на учебном примере — Артём Курбатов, Яндекс
Bemer: декларативная шаблонизация на учебном примере — Артём Курбатов, ЯндексBemer: декларативная шаблонизация на учебном примере — Артём Курбатов, Яндекс
Bemer: декларативная шаблонизация на учебном примере — Артём Курбатов, ЯндексYandex
 
Lviv Euro Drupal Camp 2015_Как подружить дизайнеров и Drupal-разработчиков
Lviv Euro Drupal Camp 2015_Как подружить дизайнеров и Drupal-разработчиковLviv Euro Drupal Camp 2015_Как подружить дизайнеров и Drupal-разработчиков
Lviv Euro Drupal Camp 2015_Как подружить дизайнеров и Drupal-разработчиковdeWeb
 
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)Yandex
 

What's hot (19)

Библиотека bem-components
Библиотека bem-componentsБиблиотека bem-components
Библиотека bem-components
 
Тема для WordPress в БЭМ. Владимир Гриненко, Яндекс
Тема для WordPress в БЭМ. Владимир Гриненко, ЯндексТема для WordPress в БЭМ. Владимир Гриненко, Яндекс
Тема для WordPress в БЭМ. Владимир Гриненко, Яндекс
 
БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014БЭМ в Мануфактуре РИФ-Воронеж 2014
БЭМ в Мануфактуре РИФ-Воронеж 2014
 
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
 
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...
 
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
 
Alex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projectsAlex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projects
 
JavaScript завтра / Сергей Рубанов (Exante Limited)
JavaScript завтра / Сергей Рубанов  (Exante Limited)JavaScript завтра / Сергей Рубанов  (Exante Limited)
JavaScript завтра / Сергей Рубанов (Exante Limited)
 
Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
Дмитрий Кушников — БЭМ глазами бэкенд-разработчикаДмитрий Кушников — БЭМ глазами бэкенд-разработчика
Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
 
Отладка кода в браузере / Антон Шувалов (Rambler&Co)
Отладка кода в браузере / Антон Шувалов (Rambler&Co)Отладка кода в браузере / Антон Шувалов (Rambler&Co)
Отладка кода в браузере / Антон Шувалов (Rambler&Co)
 
Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...
Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...
Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем — Евгений Конс...
 
Yarfrontend #2. Как мы делали гуя...
Yarfrontend #2. Как мы делали гуя...Yarfrontend #2. Как мы делали гуя...
Yarfrontend #2. Как мы делали гуя...
 
Сергей Бережной "Внедрение БЭМ в существующие системы"
Сергей Бережной "Внедрение БЭМ в существующие системы"Сергей Бережной "Внедрение БЭМ в существующие системы"
Сергей Бережной "Внедрение БЭМ в существующие системы"
 
BEM — block, element, modification conception
BEM — block, element, modification conceptionBEM — block, element, modification conception
BEM — block, element, modification conception
 
архитектура крупных Word press сайтов
архитектура крупных Word press сайтовархитектура крупных Word press сайтов
архитектура крупных Word press сайтов
 
Bemer: декларативная шаблонизация на учебном примере — Артём Курбатов, Яндекс
Bemer: декларативная шаблонизация на учебном примере — Артём Курбатов, ЯндексBemer: декларативная шаблонизация на учебном примере — Артём Курбатов, Яндекс
Bemer: декларативная шаблонизация на учебном примере — Артём Курбатов, Яндекс
 
Lviv Euro Drupal Camp 2015_Как подружить дизайнеров и Drupal-разработчиков
Lviv Euro Drupal Camp 2015_Как подружить дизайнеров и Drupal-разработчиковLviv Euro Drupal Camp 2015_Как подружить дизайнеров и Drupal-разработчиков
Lviv Euro Drupal Camp 2015_Как подружить дизайнеров и Drupal-разработчиков
 
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
Владимир Варанкин — Сервер-сайд в БЭМ-терминах (Node.js)
 
Bootstrap
BootstrapBootstrap
Bootstrap
 

Viewers also liked

БЭМ в Мануфактуре
БЭМ в МануфактуреБЭМ в Мануфактуре
БЭМ в МануфактуреYandex
 
BEM for Javascript at CampJS III
BEM for Javascript at CampJS IIIBEM for Javascript at CampJS III
BEM for Javascript at CampJS IIIYandex
 
Тестирование CSS-регрессий с gemini – OdessaJS
Тестирование CSS-регрессий с gemini – OdessaJSТестирование CSS-регрессий с gemini – OdessaJS
Тестирование CSS-регрессий с gemini – OdessaJSSevInf
 
Maintainable Frontend Development with BEM
Maintainable Frontend Development with BEMMaintainable Frontend Development with BEM
Maintainable Frontend Development with BEMVarya Stepanova
 
Пишем БЭМ правильно
Пишем БЭМ правильноПишем БЭМ правильно
Пишем БЭМ правильноIhor Zenich
 
Замыкания и область видимости
Замыкания и область видимостиЗамыкания и область видимости
Замыкания и область видимостиRodion Golovushkin
 
Frontend в режиме реального времени [05.03.15]
Frontend в режиме реального времени [05.03.15]Frontend в режиме реального времени [05.03.15]
Frontend в режиме реального времени [05.03.15]GoIT
 
Александр Баумгертнер — Преимущества БЭМ для небольших проектов и компаний
Александр Баумгертнер — Преимущества БЭМ для небольших проектов и компанийАлександр Баумгертнер — Преимущества БЭМ для небольших проектов и компаний
Александр Баумгертнер — Преимущества БЭМ для небольших проектов и компанийYandex
 
Всё ли ты знаешь о JavaScript ООП?
Всё ли ты знаешь о JavaScript ООП?Всё ли ты знаешь о JavaScript ООП?
Всё ли ты знаешь о JavaScript ООП?Vitaly Hornik
 
BEM It! for Brandwatch
BEM It! for BrandwatchBEM It! for Brandwatch
BEM It! for BrandwatchMax Shirshin
 
Жидков Игорь - Elliptics
Жидков Игорь - Elliptics   Жидков Игорь - Elliptics
Жидков Игорь - Elliptics Yandex
 
Коллективная разработка документации: от индивидуального авторства к командн...
 Коллективная разработка документации: от индивидуального авторства к командн... Коллективная разработка документации: от индивидуального авторства к командн...
Коллективная разработка документации: от индивидуального авторства к командн...Yandex
 
Тропинка через минное поле — Леонычев Юрий
Тропинка через минное поле — Леонычев ЮрийТропинка через минное поле — Леонычев Юрий
Тропинка через минное поле — Леонычев ЮрийYandex
 
Андрей Соболевский - Вокруг Базельской задачи: Бернулли, Эйлер, Риман
Андрей Соболевский - Вокруг Базельской задачи: Бернулли, Эйлер, РиманАндрей Соболевский - Вокруг Базельской задачи: Бернулли, Эйлер, Риман
Андрей Соболевский - Вокруг Базельской задачи: Бернулли, Эйлер, РиманYandex
 
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...Yandex
 
Большие данные в физике элементарных частиц на примере LHCb - Guy Wilkinson, ...
Большие данные в физике элементарных частиц на примере LHCb - Guy Wilkinson, ...Большие данные в физике элементарных частиц на примере LHCb - Guy Wilkinson, ...
Большие данные в физике элементарных частиц на примере LHCb - Guy Wilkinson, ...Yandex
 
Антон Качалов - Популярно об IPMI и UEFI
Антон Качалов - Популярно об IPMI и UEFI Антон Качалов - Популярно об IPMI и UEFI
Антон Качалов - Популярно об IPMI и UEFI Yandex
 
Константин Горский - Дизайн
Константин Горский - ДизайнКонстантин Горский - Дизайн
Константин Горский - ДизайнYandex
 
вера сивакова
вера сиваковавера сивакова
вера сиваковаYandex
 

Viewers also liked (20)

БЭМ в Мануфактуре
БЭМ в МануфактуреБЭМ в Мануфактуре
БЭМ в Мануфактуре
 
BEM for Javascript at CampJS III
BEM for Javascript at CampJS IIIBEM for Javascript at CampJS III
BEM for Javascript at CampJS III
 
Тестирование CSS-регрессий с gemini – OdessaJS
Тестирование CSS-регрессий с gemini – OdessaJSТестирование CSS-регрессий с gemini – OdessaJS
Тестирование CSS-регрессий с gemini – OdessaJS
 
Maintainable Frontend Development with BEM
Maintainable Frontend Development with BEMMaintainable Frontend Development with BEM
Maintainable Frontend Development with BEM
 
Пишем БЭМ правильно
Пишем БЭМ правильноПишем БЭМ правильно
Пишем БЭМ правильно
 
Замыкания и область видимости
Замыкания и область видимостиЗамыкания и область видимости
Замыкания и область видимости
 
Frontend в режиме реального времени [05.03.15]
Frontend в режиме реального времени [05.03.15]Frontend в режиме реального времени [05.03.15]
Frontend в режиме реального времени [05.03.15]
 
Александр Баумгертнер — Преимущества БЭМ для небольших проектов и компаний
Александр Баумгертнер — Преимущества БЭМ для небольших проектов и компанийАлександр Баумгертнер — Преимущества БЭМ для небольших проектов и компаний
Александр Баумгертнер — Преимущества БЭМ для небольших проектов и компаний
 
Files and JS
Files and JSFiles and JS
Files and JS
 
Всё ли ты знаешь о JavaScript ООП?
Всё ли ты знаешь о JavaScript ООП?Всё ли ты знаешь о JavaScript ООП?
Всё ли ты знаешь о JavaScript ООП?
 
BEM It! for Brandwatch
BEM It! for BrandwatchBEM It! for Brandwatch
BEM It! for Brandwatch
 
Жидков Игорь - Elliptics
Жидков Игорь - Elliptics   Жидков Игорь - Elliptics
Жидков Игорь - Elliptics
 
Коллективная разработка документации: от индивидуального авторства к командн...
 Коллективная разработка документации: от индивидуального авторства к командн... Коллективная разработка документации: от индивидуального авторства к командн...
Коллективная разработка документации: от индивидуального авторства к командн...
 
Тропинка через минное поле — Леонычев Юрий
Тропинка через минное поле — Леонычев ЮрийТропинка через минное поле — Леонычев Юрий
Тропинка через минное поле — Леонычев Юрий
 
Андрей Соболевский - Вокруг Базельской задачи: Бернулли, Эйлер, Риман
Андрей Соболевский - Вокруг Базельской задачи: Бернулли, Эйлер, РиманАндрей Соболевский - Вокруг Базельской задачи: Бернулли, Эйлер, Риман
Андрей Соболевский - Вокруг Базельской задачи: Бернулли, Эйлер, Риман
 
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
 
Большие данные в физике элементарных частиц на примере LHCb - Guy Wilkinson, ...
Большие данные в физике элементарных частиц на примере LHCb - Guy Wilkinson, ...Большие данные в физике элементарных частиц на примере LHCb - Guy Wilkinson, ...
Большие данные в физике элементарных частиц на примере LHCb - Guy Wilkinson, ...
 
Антон Качалов - Популярно об IPMI и UEFI
Антон Качалов - Популярно об IPMI и UEFI Антон Качалов - Популярно об IPMI и UEFI
Антон Качалов - Популярно об IPMI и UEFI
 
Константин Горский - Дизайн
Константин Горский - ДизайнКонстантин Горский - Дизайн
Константин Горский - Дизайн
 
вера сивакова
вера сиваковавера сивакова
вера сивакова
 

Similar to Вебинар по БЭМ: верстаем веб-страницу

Презентация к докладу про БЭМ by Mikhail Troshev
Презентация к докладу про БЭМ  by Mikhail TroshevПрезентация к докладу про БЭМ  by Mikhail Troshev
Презентация к докладу про БЭМ by Mikhail Troshev1 1
 
Тема для WordPress в БЭМ
Тема для WordPress в БЭМТема для WordPress в БЭМ
Тема для WordPress в БЭМVarya Stepanova
 
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтендаBEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтендаDALEE digital agency
 
BEM for corporate sites — failover frontend
BEM for corporate sites — failover frontendBEM for corporate sites — failover frontend
BEM for corporate sites — failover frontendAlex Yaroshevich
 
Владимир Гриненко — БЭМ: новости проектов и последние релизы
Владимир Гриненко — БЭМ: новости проектов и последние релизыВладимир Гриненко — БЭМ: новости проектов и последние релизы
Владимир Гриненко — БЭМ: новости проектов и последние релизыYandex
 
Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчика
Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчикаАнтон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчика
Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчикаYandex
 
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...Yandex
 
Документирование блоков. Раскрываем все плюсы
Документирование блоков. Раскрываем все плюсыДокументирование блоков. Раскрываем все плюсы
Документирование блоков. Раскрываем все плюсыYandex
 
БЭМ: новости проектов и последние релизы — Владимир Гриненко
БЭМ: новости проектов и последние релизы — Владимир ГриненкоБЭМ: новости проектов и последние релизы — Владимир Гриненко
БЭМ: новости проектов и последние релизы — Владимир ГриненкоYandex
 
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...Yandex
 
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvcСергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvcYandex
 
Александр Титула-Бойченко "Приложения для соцсетей. Универсальные приложения ...
Александр Титула-Бойченко "Приложения для соцсетей. Универсальные приложения ...Александр Титула-Бойченко "Приложения для соцсетей. Универсальные приложения ...
Александр Титула-Бойченко "Приложения для соцсетей. Универсальные приложения ...Yandex
 
Сергей Татаринцев — bem-tools v1.0.0
Сергей Татаринцев — bem-tools v1.0.0Сергей Татаринцев — bem-tools v1.0.0
Сергей Татаринцев — bem-tools v1.0.0Yandex
 
Документирование блоков. Раскрываем все плюсы — Инна Белая, Яндекс
Документирование блоков. Раскрываем все плюсы — Инна Белая, ЯндексДокументирование блоков. Раскрываем все плюсы — Инна Белая, Яндекс
Документирование блоков. Раскрываем все плюсы — Инна Белая, ЯндексYandex
 
Сергей Бережной — bem-core v1.0.0
Сергей Бережной — bem-core v1.0.0Сергей Бережной — bem-core v1.0.0
Сергей Бережной — bem-core v1.0.0Yandex
 
Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»
Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»
Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»Yandex
 
Bemer: декларативная шаблонизация на учебном примере. Артём Курбатов. Moscow...
Bemer: декларативная шаблонизация на учебном примере. Артём Курбатов. Moscow...Bemer: декларативная шаблонизация на учебном примере. Артём Курбатов. Moscow...
Bemer: декларативная шаблонизация на учебном примере. Артём Курбатов. Moscow...MoscowJS
 
Елена Джетпыспаева — Открытие. Новости и планы БЭМ-сообщества
Елена Джетпыспаева — Открытие. Новости и планы БЭМ-сообществаЕлена Джетпыспаева — Открытие. Новости и планы БЭМ-сообщества
Елена Джетпыспаева — Открытие. Новости и планы БЭМ-сообществаYandex
 

Similar to Вебинар по БЭМ: верстаем веб-страницу (20)

Презентация к докладу про БЭМ by Mikhail Troshev
Презентация к докладу про БЭМ  by Mikhail TroshevПрезентация к докладу про БЭМ  by Mikhail Troshev
Презентация к докладу про БЭМ by Mikhail Troshev
 
Тема для WordPress в БЭМ
Тема для WordPress в БЭМТема для WordPress в БЭМ
Тема для WordPress в БЭМ
 
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтендаBEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
BEM на корпоративном веб-ресурсе — отказоустойчивость фронтенда
 
BEM for corporate sites — failover frontend
BEM for corporate sites — failover frontendBEM for corporate sites — failover frontend
BEM for corporate sites — failover frontend
 
Владимир Гриненко — БЭМ: новости проектов и последние релизы
Владимир Гриненко — БЭМ: новости проектов и последние релизыВладимир Гриненко — БЭМ: новости проектов и последние релизы
Владимир Гриненко — БЭМ: новости проектов и последние релизы
 
Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчика
Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчикаАнтон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчика
Антон Виноградов, Альфа-Банк — Инструменты БЭМ-разработчика
 
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
 
Документирование блоков. Раскрываем все плюсы
Документирование блоков. Раскрываем все плюсыДокументирование блоков. Раскрываем все плюсы
Документирование блоков. Раскрываем все плюсы
 
БЭМ: новости проектов и последние релизы — Владимир Гриненко
БЭМ: новости проектов и последние релизы — Владимир ГриненкоБЭМ: новости проектов и последние релизы — Владимир Гриненко
БЭМ: новости проектов и последние релизы — Владимир Гриненко
 
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
Жека Константинов, Дима Белицкий, Слава Аристов — Мастер-класс: разрабатываем...
 
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvcСергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
Сергей Максимов — Мастер-класс: Организация приложения на основе bem-mvc
 
Александр Титула-Бойченко "Приложения для соцсетей. Универсальные приложения ...
Александр Титула-Бойченко "Приложения для соцсетей. Универсальные приложения ...Александр Титула-Бойченко "Приложения для соцсетей. Универсальные приложения ...
Александр Титула-Бойченко "Приложения для соцсетей. Универсальные приложения ...
 
Сергей Татаринцев — bem-tools v1.0.0
Сергей Татаринцев — bem-tools v1.0.0Сергей Татаринцев — bem-tools v1.0.0
Сергей Татаринцев — bem-tools v1.0.0
 
Документирование блоков. Раскрываем все плюсы — Инна Белая, Яндекс
Документирование блоков. Раскрываем все плюсы — Инна Белая, ЯндексДокументирование блоков. Раскрываем все плюсы — Инна Белая, Яндекс
Документирование блоков. Раскрываем все плюсы — Инна Белая, Яндекс
 
Сергей Бережной — bem-core v1.0.0
Сергей Бережной — bem-core v1.0.0Сергей Бережной — bem-core v1.0.0
Сергей Бережной — bem-core v1.0.0
 
Yac2012
Yac2012Yac2012
Yac2012
 
БЭМ
БЭМБЭМ
БЭМ
 
Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»
Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»
Артем Курбатов — Мастер-класс «Динамический БЭМ-сайт на Node.js»
 
Bemer: декларативная шаблонизация на учебном примере. Артём Курбатов. Moscow...
Bemer: декларативная шаблонизация на учебном примере. Артём Курбатов. Moscow...Bemer: декларативная шаблонизация на учебном примере. Артём Курбатов. Moscow...
Bemer: декларативная шаблонизация на учебном примере. Артём Курбатов. Moscow...
 
Елена Джетпыспаева — Открытие. Новости и планы БЭМ-сообщества
Елена Джетпыспаева — Открытие. Новости и планы БЭМ-сообществаЕлена Джетпыспаева — Открытие. Новости и планы БЭМ-сообщества
Елена Джетпыспаева — Открытие. Новости и планы БЭМ-сообщества
 

More from Yandex

Предсказание оттока игроков из World of Tanks
Предсказание оттока игроков из World of TanksПредсказание оттока игроков из World of Tanks
Предсказание оттока игроков из World of TanksYandex
 
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...Yandex
 
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров ЯндексаСтруктурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров ЯндексаYandex
 
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров ЯндексаПредставление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров ЯндексаYandex
 
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...Yandex
 
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...Yandex
 
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...Yandex
 
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...Yandex
 
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...Yandex
 
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...Yandex
 
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...Yandex
 
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеровКак защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеровYandex
 
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...Yandex
 
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...Yandex
 
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...Yandex
 
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...Yandex
 
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...Yandex
 
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...Yandex
 
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...Yandex
 
Эталонное описание фильма на основе десятков дубликатов
Эталонное описание фильма на основе десятков дубликатовЭталонное описание фильма на основе десятков дубликатов
Эталонное описание фильма на основе десятков дубликатовYandex
 

More from Yandex (20)

Предсказание оттока игроков из World of Tanks
Предсказание оттока игроков из World of TanksПредсказание оттока игроков из World of Tanks
Предсказание оттока игроков из World of Tanks
 
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
 
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров ЯндексаСтруктурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
 
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров ЯндексаПредставление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
 
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
 
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
 
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
 
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
 
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
 
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
 
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
 
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеровКак защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
 
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
 
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
 
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
 
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
 
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
 
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
 
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
 
Эталонное описание фильма на основе десятков дубликатов
Эталонное описание фильма на основе десятков дубликатовЭталонное описание фильма на основе десятков дубликатов
Эталонное описание фильма на основе десятков дубликатов
 

Вебинар по БЭМ: верстаем веб-страницу