Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
БЭМ вебинар
Я
БЭМинар
19 марта 2015,
Начало в 17:00
ндекс
2
Я
Верстаем промо-страницу
по БЭМ-методологии
Белицкий Дмитрий,
Разработчик интерфейсов, служба разработки БЭМ
ндекс
Белицкий Дмитрий
Разработчик интерфейсов, служба разработки БЭМ
Обо мне
dmtry@yandex-team.ru @dabelitsky
github.com/dab
Верстаем веб-страницу
5
БЭМинар:
БЭМ и сборка — собираем БЭМ-проект с помощью gulp
BEMJSON + BEMHTML. мета-описание страницы в БЭМ терминах и
декларативная...
00:00 -00:45
8
Блок
9
Независимый блок
10
Элемент
11
Модификатор
12
Плюсы методологии:
Реиспользование кода
Удобство расположения блоков на файловой системе
Упрощенное взаимодействие в коман...
Полезные ссылки:
Методология. Основные определения
История создания БЭМ
Видео доклад Виталия Харисова История создания БЭМ...
Вопросы?
25
Пришел менеджер и все усложнил
Возникла необходимость сделать еще три похожие страницы:
Страница с Гарри Поттером для подр...
это набор реализаций блоков, сгруппированных в одну
директорию
common.blocks/ — это общие для всех страниц стили
potter.bl...
Полезные ссылки:
Методология. Организация файловой системы
На потом
28
Всем БЭМ
29
Вебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницу
Вебинар по БЭМ: верстаем веб-страницу
Upcoming SlideShare
Loading in …5
×

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

Вебинар для тех, кто только начинает знакомиться с БЭМ. Необходимы базовые знания HTML и CSS, понимание общих процессов веб-разработки.

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

Содержание вебинара

Что такое БЭМ - Методология и платформа - Преимущества методологии - Независимые блоки - БЭМ и WebComponents

БЭМ и верстка - Разбиение интерфейса на блоки и элементы, использование модификаторов - Типичные ошибки верстки и решения проблем

Файловая система - Расположение блоков в файловой системе - Уровни переопределения

  • Be the first to comment

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

  1. 1. БЭМ вебинар
  2. 2. Я БЭМинар 19 марта 2015, Начало в 17:00 ндекс 2
  3. 3. Я Верстаем промо-страницу по БЭМ-методологии Белицкий Дмитрий, Разработчик интерфейсов, служба разработки БЭМ ндекс
  4. 4. Белицкий Дмитрий Разработчик интерфейсов, служба разработки БЭМ Обо мне dmtry@yandex-team.ru @dabelitsky github.com/dab
  5. 5. Верстаем веб-страницу 5 БЭМинар:
  6. 6. БЭМ и сборка — собираем БЭМ-проект с помощью gulp BEMJSON + BEMHTML. мета-описание страницы в БЭМ терминах и декларативная БЭМ-шаблонизация ENB — сборщик БЭМ-проектов, зависимости блоков jQuery и БЭМ. Независимые блоки в JavaScript, декларативный JavaScript i-bem.js Декларативный JavaScript в БЭМ-терминах Библиотека bem-components — open-source компоненты от Яндекс, создание собственной темы Динамическое приложение на express и БЭМ План БЭМинаров 6
  7. 7. 00:00 -00:45 8
  8. 8. Блок 9
  9. 9. Независимый блок 10
  10. 10. Элемент 11
  11. 11. Модификатор 12
  12. 12. Плюсы методологии: Реиспользование кода Удобство расположения блоков на файловой системе Упрощенное взаимодействие в команде — все говорят в одних терминах Проще долгосрочная поддержка Декларативность не только в CSS, но и в JavaScript и шаблонах БЭМ 14
  13. 13. Полезные ссылки: Методология. Основные определения История создания БЭМ Видео доклад Виталия Харисова История создания БЭМ. Кратко, сбивчиво и неполно Статья «Side Effects in CSS» На потом 24
  14. 14. Вопросы? 25
  15. 15. Пришел менеджер и все усложнил Возникла необходимость сделать еще три похожие страницы: Страница с Гарри Поттером для подростков Страница с доступным текстом и контрастной цветовой схемой для пенсионеров Страница в розовом для девушек Продолжим 26
  16. 16. это набор реализаций блоков, сгруппированных в одну директорию common.blocks/ — это общие для всех страниц стили potter.blocks/ — стили, специфичные для страницы pink.blocks/ — стили, специфичные для страницы Уровень переопределения 27
  17. 17. Полезные ссылки: Методология. Организация файловой системы На потом 28
  18. 18. Всем БЭМ 29

×