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 есть обсуждение на форуме в этом топике. Кроме того, есть возможность использования шаблонизатор ВH для PHP.
Вопрос: Блок может иметь несколько связанных с ним элементов?
Ответ: Да, конечно. Но если количество элементов сильно разрастается, то нужно задуматься над архитектурой самого блока. Возможно, его нужно распилить на части.
Вопрос: Будет ли часть про работу на сервере: статичную страничку мы на БЭМ переведем, а про то как, получая сырые данные, дальше все это дело шаблонизировать хотели бы послушать. Про bemtree и все такое.
Ответ: Заключительной частью серии вебинаров будет как раз написание динамических приложений. Однако, уже сейчас можно посмотреть мастер-классы Динамический БЭМ-сайт на Node.js и Разрабатываем сайт с нуля на полном стеке БЭМ-технологий.
Вопрос: Элемент может содержать в себе блок?
Ответ: Да, таким образом создаются составные блоки. Например, элементы блока dropdown будут состоять из блоков link и popup.
Вопрос: Почему menuitem и menulink обозначаются одинаково? Ведь menulink находится внутри menuitem?
Ответ: Уровень вложенности не важен. Главное — это принадлежность элемента к блоку. Внутри элемента может находиться другой элемент или блок.
Вопрос: По БЭМ, выходит, селекторы с участием +, ~, > вообще не подходят?
Ответ: Если вам нужно гарантированно заложиться на некую связанность элементов блока в DOM-дереве, то почему бы и нет.
Вопрос: Как быть с многоуровневыми блоками, то есть блоками, в которых могут быть другие блоки? Что-то типа headline->leftblock->promo->button->icon.
Ответ: Блок вполне может состоять из других блоков — это не противоречит методологии. Также блоки могут быть и в качестве обертки.
Вопрос: А миксовка не опасна с точки зрения независимости блоков?
Ответ: Микс — это расширение уже существующей функциональности блока. Поэтому от него независимость блока не пострадает. Микс поможет нам достичь нужного результата — использовать готовый блок и расширить его внешний вид или поведение.
Вопрос: Получается, что методология отвергает саму сущность каскадных таблиц стилей? Или каскадность позволительна в какой то мере?
Ответ: Каскад допускается, когда какой-то элемент нужно изменить в зависимости от состояния блока. Например, у вас есть форма, но она отличается от всех других. Ей вы добавляете некий модификатор и пишете form_type_buy .form__button { color: yellow }. Знание родителя о потомках не ломает принцип независимости.
Вопрос: Киньте ссылку на стайлгайд для css, пожалуйста.
Ответ: В bem-components мы используем csscomb.
Вопрос: Расскажите, как использовать классы модульных сеток вместе с БЭМ-методологией. Когда отдельные блоки внутри сеток, а также внутри блока, необходима ли сеточная структура?
Ответ: Посмотрите на библиотеку bem-grid, которая показывает пример использования сетки в БЭМ терминах.
Вопрос: Будет ли что-то про сравнение БЭМ и Web-components?
Ответ: Web-components и БЭМ решают схожие задачи. БЭМ делает это уже много лет и в разных браузерах, Web-components — пока нет. Мы обсуждали эту тему на нашем форуме.
Надеемся, что ваше знакомство с БЭМ началось.
До встречи на следующих «БЭМинарах» и Stay BEMed!