20.10

Блок, элемент, модификатор или просто БЭM

Недавно прошла организованная компанией Yandex конференция Yet another conference. Несколько докладов на ней было посвящено БЭМ. Презентации и видео  http://yac2011.yandex.ru/archive2011/video3/
Доклады выложены немного не в логичной последовательности. Первый доклад (Тема для WordPress в БЭМ) следует смотреть последним, поскольку в нем показан механизм расширения поддерживаемых утилитой bem технологий. 
Во втором докладе "Дом из готовых кирпичей"  рассказывается о подходе, инструментах, необходимых для работы и OpenSource framework'e, содержащем примеры компонентов. 
В третьем "BEMHTML. Not yet another шаблонизатор" показан как использовать bem в качестве шаблонизатора.
В четвертом - работа с JS.
Общая продолжительность видео почти 3 часа. Тема очень интересная, но каждый докладчик говорит о какой-то узкой теме, части общей концепции и общее представление о системе получить сложно. 
Коротко о чем там речь.

Недавно прошла организованная компанией Yandex конференция Yet another conference. Несколько докладов на ней было посвящено БЭМ - презентации и видео.

Доклады выложены немного не в логичной последовательности. Первый доклад (Тема для WordPress в БЭМ) следует смотреть последним, поскольку в нем показан механизм расширения поддерживаемых утилитой bem технологий. 

Во втором докладе "Дом из готовых кирпичей"  рассказывается о подходе, инструментах, необходимых для работы и OpenSource framework'e, содержащем примеры компонентов. 

В третьем "BEMHTML. Not yet another шаблонизатор" показан как использовать bem в качестве шаблонизатора в своих движках.

В четвертом - работа с JS, создание компонентов, их использование в нескольких проектах.

Общая продолжительность видео почти 3 часа. Тема очень интересная, но каждый докладчик говорит о какой-то узкой теме, части общей концепции и общее представление о системе получить сложно. Не хватает мастер-класса, показывающего как с нуля начать использовать БЭМ в своем проекте. Хорошее видео в тему, демонстрирующее особенности и преимущества технологии при работе с js и css ресурсами, но HTML взят уже готовый.

Коротко о подходе и о чем речь в докладах.

В яндексе проведена большая работа по применению компонентно-ориентированного подхода к верстке веб-приложений. Результатом данной работы стала методология БЭМ. Она основывается на 3 основных понятиях: блок, элемент, модификатор. 

Суть данного подхода - разбиение страницы на блоки и элементы, которые находятся внутри блоков и отдельно от них не существуют. Каждый блок имеет свой класс, уникальный для данного типа блока. Элементы также имеют свои классы, имена которых начинаются с имени класса родительского блока. Блоки и элементы могут иметь состояние, которое фиксируется с помощью модификаторов, которые по сути являются специальным классом. Подробней.
Особенность подхода применительно к верстке:
• полный отказ от использования идентификаторов и имен тэгов в CSS правилах
• по возможности отказ от использования каскада (допускается использование каскада внутри блока)
Верстка согласно этим принципам выглядит необычно, но предполагается, что HTML-код страницы генерируется автоматически согласно зависимостям от имеющихся блоков и поддерживаемым технологиям.
Блок в БЭМ - это независимый компонент, который можно легко перенести в другой проект. Блок может содержать разные ресурсы (поддерживать разные технологии) - html, css, JavaScript и т.п. На уровне проекта, можно изменить внешний вид или поведение существующего блока, добавить новые блоки.
Таким образом, с помощью БЭМ, реализуется компонентно-ориентированный подход в разработке front-end для веб-приложений. Внешний вид, html-код, логика работы каждого компонента определяется соответствующей технологией и хранится в отдельном файле.

Суть данного подхода - разбиение страницы на блоки и элементы, которые находятся внутри блоков и отдельно от них не существуют. Каждый блок имеет свой класс, уникальный для данного типа блока. Элементы также имеют свои классы, имена которых начинаются с имени класса родительского блока. Блоки и элементы могут иметь состояние, которое фиксируется с помощью модификаторов. По сути модификаторы являются специальными css-классами. Определение свойств, их значений и дополнительного функционала блоков и элементов выполняется с помощью модификаторов.

Особенность подхода применительно к верстке:

  • полный отказ от использования идентификаторов и имен тэгов в CSS правилах
  • по возможности отказ от использования каскада (допускается использование каскада внутри блока)
  • отказ от глобальных резетов - все определения стилей должны быть на уровне блоков и их элементов

Верстка согласно этим принципам выглядит необычно, но предполагается, что HTML-код страницы генерируется автоматически согласно зависимостям от имеющихся блоков и поддерживаемым технологиям.

Блок в БЭМ - это независимый компонент, который можно легко перенести в другой проект. Блок может содержать разные ресурсы (поддерживать разные технологии) - html, css, JavaScript и т.п. На уровне проекта, можно изменить внешний вид или поведение существующего блока, добавить новые блоки.

Инженерами Яндекса разработан ряд иснструментов для автоматизации сборки проекта из существующих компонентов. Благодаря им код компонентов теоритически может быть написан на любом языке - поддержку необходимых технологий можно добавить самостоятельно и описать на уровне проекта или дополнительной библиотеки. Трансформация в html, js, css происходит в процессе сборки страницы (разработчики рекомендую использовать make). Примечательно, что базовые веб-технологии инженеры яндекса, показывающие мастер-классы, называют ассемблером.

Таким образом, с помощью БЭМ, реализуется компонентно-ориентированный подход в разработке front-end для веб-приложений. Внешний вид, html-код, логика работы каждого компонента определяется соответствующей технологией и хранится в отдельном файле.

Ссылки по теме:

 

 

Раздел: Разное Тэги: html, БЭМ, верстка

Коментарии

#125.11.2016, 16:27 1 пишет:

1

#231.08.2017, 22:48 Bomoamork пишет:

Будущей маме важно понимать, что предпочтение роддома желательно начинать с вопроса о плановой мойке. А цепочка анализов для беременных осуществляют безвозмездно при предоставлении направления от доктора. Полезная и актуальная информация даст возможность сберечь на обследовании и родах.

Не ожидайте, что в женской консультации все подскажут. Удивите врача вопросом о способностях вашего областного перинатального центра. Успешная беременность и роды – подвиг будущей мамы, которая понимает свои полномочия.
<a href=http://mamatam.ru/pelenanie-novorozhdennogo-video-sovety>пеленание новорожденного видео посмотреть</a>

Оставьте комментарий

© 2010 Алексей Камедов

При копировании материалов блога ссылка на источник обязательна.