Статья подготовлена для студентов курса «Разработчик JavaScript» в образовательном проекте OTUS.
Вёрстка, да и просто сам CSS, являются отдельным пунктом нелюбви разработчиков к фронтенду. Поддержка CSS в больших проектах может превратиться в хождение по минному полю, даже если применяются современные библиотеки/фреймворки, поддерживающие компонентный подход.
Если же вы будете придерживаться методологий вёрстки, то сможете облегчить поддержку большого проекта и локализовать изменения при решении задач.
Существует несколько различных CSS-методологий:
1. “Как быстрее” — да, это тоже методология;
2. SMACSS;
3. OOCSS;
4. FUN;
5. Atomic CSS;
6. БЭМ, про который мы и будем сейчас рассказывать.
Что же такое БЭМ?
БЭМ — это сокращение от «Блок-Элемент-Модификатор». В рамках данной методологии компоненты и части страниц логически разбиваются на блоки и элементы, а их CSS-классы пишутся специальным образом, например:
или
Сразу скажем, что правила именования могут отличаться от проекта к проекту. Как и некоторые другие вольности. Поэтому мы разберём только основы БЭМ и наиболее частые ошибки, возникающие при знакомстве с БЭМ.
Блок
Блок — это отдельный функциональный элемент, который может использоваться повторно.
Главная страница (home-page) — хороший пример блока, хоть он и не будет использоваться повторно.
Кнопка (button) — замечательный пример блока. То, что это блок, можно легко сказать по тому, что он будет присутствовать в самых разных местах.
В терминах React, Angular и Vue каждый блок будет реализовываться соответствующим компонентом.
Итак, предположим, что наш блок — это «логотип компании» (company-logo). В HTML он будет иметь следующую разметку:
Блок не должен зависеть от того, где он находится, поэтому в CSS не должно быть, например, margin. Приведём пример CSS:
Элемент
Элемент — часть блока. У блока может быть несколько элементов, а может и не быть совсем. Допустим, у нашего блока есть два элемента — совёнок (owl) и текст логотипа (text).
Итак, наш блок с элементами будет иметь следующий вид. Обратите внимание на имена классов:
Обратите внимание на разделитель в имени класса — два подчёркивания __. Он как раз и отделяет имена блоков и элементов.
Элемент обязательно должен находиться внутри блока, но элементы могут находиться «друг в друге» в разметке в рамках одного блока.
Итак, пример неправильного БЭМ:
Элементы могут быть только у блоков. Приведём пример частой ошибки при использовании БЭМ:
Этот код может быть исправлен следующим образом:
И приведём CSS:
С первого взгляда, выглядит «не очень поддерживаемо». Со второго взгляда — можно код сократить, используя препроцессоры. На LESS эта простыня будет выглядеть куда приятнее:
На самом деле, код на LESS не превратится в код CSS выше, а будет даже чуть-чуть правильнее кода CSS, который написан выше. Предлагаем читателям самостоятельно понять почему.
Модификатор
Предположим, что скоро Новый год, и нам необходимо нашего совёнка одеть в новогоднюю шапочку. И при этом нам не хочется менять уже написанный код (собственно, мы и хотим поддерживаемости). Для этого и существуют модификаторы:
CSS код будет выглядеть следующим образом:
Обратите внимание, что в новом классе мы модифицировали только те свойства, которые необходимо. Это достигается за счёт того, что в тэге написаны классы company-logo__owl company__logo--new-year — исходные свойства применяются, потому что они есть в company-logo__owl, а перегруженные — потому что класс модификатора написан после.
В действительности, писать модификаторы непосредственно у элементов — не самая лучшая практика. Best practice состоит в том, чтобы писать модификаторы именно у блоков:
Миксин (микс, миксина, примесь)
Про это часто забывают, но в действительности БЭМ — это БЭММ — «Блок-Элемент-Модификатор-Миксин». Блок часто является элементом другого блока, плюс отображение может отличаться от того места, где он находится (точнее — от того блока, где блок является элементом).
Итак:
Обратите внимание на порядок следования классов, а именно, что header__logo стоит последним. Это позволяет изменять отображение блока как элемента в другом блоке.
Приведём пример CSS:
Если же мы напишем классы в другом порядке, то не сможем поменять цвет фона без !important:
Учитывайте это, когда будете разрабатывать React/Angular/Vue компоненты.
Вот мы и рассмотрели основы и некоторые ошибки. Если вас заинтересовал БЭМ, то настоятельно рекомендуем погрузиться в мир БЭМ здесь:
И не забывайте оставлять комментарии!
Материал подготовлен для студентов курса «Разработчик JavaScript». Ждем вас на занятиях.
ЗАПИСАТЬСЯ НА КУРС