# Видео вебинара по БЭМ: верстаем веб-страницу 19 марта 2015 года мы провели **первый вебинар по БЭМ**. Он был полезен тем, кто только начинает знакомиться с БЭМ. Для понимания предмета необходимы базовые знания HTML и CSS и понимание общих процессов веб-разработки. В ходе вебинара мы на практике разобрали основы методологии БЭМ, посмотрели на типичные ошибки верстки и их решения, научились верстать по БЭМ с помощью текстового редактора и браузера. ## Содержание вебинара * Что такое БЭМ * Методология и платформа * Преимущества методологии * Независимые блоки * БЭМ и WebComponents * БЭМ и верстка * Разбиение интерфейса на блоки и элементы, использование модификаторов * Типичные ошибки верстки и решения проблем * Файловая система * Расположение блоков в файловой системе * Уровни переопределения Видео вебинара, презентацию и ответы на ваши вопросы мы собрали в этом посте. ## Видео вебинара ## Презентация вебинара ## Ответы на вопросы ------ **Вопрос**: Подходит ли БЭМ для single-page web application? Или БЭМ только про верстку? **Ответ**: Подходит, конечно. ------ **Вопрос**: Имеет ли смысл верстать по БЭМ для шаблона под Drupal? **Ответ**: Совсем не важно под что ты будешь верстать, БЭМ-методология легко ляжет и на Drupal. ------ **Вопрос**: Нужно ли проставлять атрибут role (banner, contentinfo и etc) при верстке сайтов? **Ответ**: Это вопрос про доступность. Это нужно для того, чтобы устройства экранного чтения могли правильно воспринимать разметку. ------ **Вопрос**: Как правильно именовать классы? Если делать короткие классы, как .phone-number, то они где-то пересекутся. Если .phone-settings__phone-number и подобные, то получается очень длинная портянка. **Ответ**: Не стоит бояться длинных классов, если это принесет пользу в плане надежности проекта, упростит рефакторинг и реиспользование кода. Gzip сожмет длинные и короткие классы до пары символов. ------ **Вопрос**: На сколько актуально и возможно вместе с БЭМ использовать классические фреймворки типа Yii, а также библиотеки типа material, bootstrap и тому подобные? **Ответ**: БЭМ дружит с библиотеками вида bootstrap и не ограничивает разработчика в возможностях использования технологий и инструментов. По поводу Yii есть обсуждение на форуме в [этом топике](https://ru.bem.info/forum/issues/45/). Кроме того, есть возможность использования шаблонизатор ВH для PHP. ------ **Вопрос**: Блок может иметь несколько связанных с ним элементов? **Ответ**: Да, конечно. Но если количество элементов сильно разрастается, то нужно задуматься над архитектурой самого блока. Возможно, его нужно распилить на части. ------ **Вопрос**: Будет ли часть про работу на сервере: статичную страничку мы на БЭМ переведем, а про то как, получая сырые данные, дальше все это дело шаблонизировать хотели бы послушать. Про bemtree и все такое. **Ответ**: Заключительной частью серии вебинаров будет как раз написание динамических приложений. Однако, уже сейчас можно посмотреть мастер-классы [Динамический БЭМ-сайт на Node.js](https://events.yandex.ru/lib/talks/1413/) и [Разрабатываем сайт с нуля на полном стеке БЭМ-технологий](https://ru.bem.info/talks/bemup-moscow-2014/#Мастер-класс-Разрабатываем-сайт-с-нуля-на-полном-стеке-БЭМ-технологий--Жека-Константинов-Дима-Белицкий-Слава-Аристов). ------ **Вопрос**: Элемент может содержать в себе блок? **Ответ**: Да, таким образом создаются составные блоки. Например, элементы блока dropdown будут состоять из блоков link и popup. ------ **Вопрос**: Почему menu__item и menu__link обозначаются одинаково? Ведь menu__link находится внутри menu__item? **Ответ**: Уровень вложенности не важен. Главное — это принадлежность элемента к блоку. Внутри элемента может находиться другой элемент или блок. ------ **Вопрос**: По БЭМ, выходит, селекторы с участием `+`, `~`, `>` вообще не подходят? **Ответ**: Если вам нужно гарантированно заложиться на некую связанность элементов блока в DOM-дереве, то почему бы и нет. ------ **Вопрос**: Как быть с многоуровневыми блоками, то есть блоками, в которых могут быть другие блоки? Что-то типа headline->leftblock->promo->button->icon. **Ответ**: Блок вполне может состоять из других блоков — это не противоречит методологии. Также блоки могут быть и в качестве обертки. ------ **Вопрос**: А миксовка не опасна с точки зрения независимости блоков? **Ответ**: Микс — это расширение уже существующей функциональности блока. Поэтому от него независимость блока не пострадает. Микс поможет нам достичь нужного результата — использовать готовый блок и расширить его внешний вид или поведение. ------ **Вопрос**: Получается, что методология отвергает саму сущность каскадных таблиц стилей? Или каскадность позволительна в какой то мере? **Ответ**: Каскад допускается, когда какой-то элемент нужно изменить в зависимости от состояния блока. Например, у вас есть форма, но она отличается от всех других. Ей вы добавляете некий модификатор и пишете form_type_buy .form__button { color: yellow }. Знание родителя о потомках не ломает принцип независимости. ------ **Вопрос**: Киньте ссылку на стайлгайд для css, пожалуйста. **Ответ**: В bem-components мы используем [csscomb](https://github.com/bem/bem-components/blob/v2/.csscomb.json). ------ **Вопрос**: Расскажите, как использовать классы модульных сеток вместе с БЭМ-методологией. Когда отдельные блоки внутри сеток, а также внутри блока, необходима ли сеточная структура? **Ответ**: Посмотрите на библиотеку [bem-grid](https://ru.bem.info/built-with-b/#bem-grid-1), которая показывает пример использования сетки в БЭМ терминах. ------ **Вопрос**: Будет ли что-то про сравнение БЭМ и Web-components? **Ответ**: Web-components и БЭМ решают схожие задачи. БЭМ делает это уже много лет и в разных браузерах, Web-components — пока нет. Мы обсуждали эту тему на [нашем форуме](https://ru.bem.info/forum/issues/301/). ------ Надеемся, что ваше знакомство с БЭМ началось. До встречи на следующих «БЭМинарах» и **Stay BEMed**!