БЭМ 3.0 – Новый биоэнергомассажер для тела Fohow

Стиль описания бэм

БЭМ не декларирует «особого» стиля описания классов. Однако, де-факто используется следующий стиль:

1) Несколько слов в одном названии разделяются дефисом (например, блок main-page или my-super-main-list)2) Элементы отделяются от блоков с использованием двух символов подчеркивания “__” (например, main-page__header или my-super-main-list__item)3) Модификаторы отделяются одним символом подчеркивания “_” (например, main-page__header_strong или my-super-main-list_blue)

“Что делать с “внучатыми” селекторами (и не только)?”

Для ясности, внучатый селектор используется, когда вам нужно обратиться к элементу, вложенному на два уровня. Эти плохие мальчики — проклятье моей жизни, и я уверен, что это одна из причин, по которой у людей появляется немедленное отвращение к БЭМ. Приведу пример:

Почему использование каскада — плохо?

У людей, впервые для себя открывших БЭМ может возникнуть вопрос — почему элементы описываются такими длинными цепочками? не проще ли:

.main-page

.main-page .header

и т.д.

Данный способ проще записывается, но, к сожалению, может нарушить независимость блоков.Пример:имеем следующую стуктуру:

.main-page
 		.header
 		.item
 			.article
 				.header
 				.text
 		.item
 		////

В этом случае .main-page .header будет применен не только к нужному .header, но и .item .article .header, что является ненужным. БЭМ предполагает уход от каскадных стилей (типа div .someClass li), которые:1) повышают специфичность веб-страниц;2) нарушают независимость блоков. (в отличие от БЭМ).

Именно поэтому, корректной структурой для БЭМ будет:

 	.main-page
 		.main-page__header
 		.main-page__item
 			.article
 				.article__header
 				.article__text
 		.main-page__item
 		////

. “Можем ли мы изменить реакцию типа компонента?”

Эту проблему поставил мне Arie Thulank, и к которой я пытался найти 100% решение.

Примером может быть выпадающее меню, которое превращается в набор вкладок в заданный момент, или закадровая боковая навигация, которая превращается в панель меню.

По сути, у одного компонента могут быть два разных состояния, продиктованных медиа-запросом.

Для этих двух примеров я склоняюсь к тому, чтобы просто сделать компонент c-navigation, так как изменение в заданный момент — это то, что он делает. Но это заставило меня задуматься, что на счет списков изображений, которые превращаются в карусель на больших экранах?

Это проблемный случай для меня, и, так как он хорошо документирован и прокомментирован, я думаю, что в идеале стоит создать отдельный одноразовый компонент для этого типа интерфейса, с понятным названием (таким как c-image-list-to-carousel).

Гарри Робертс упоминал об отзывчивых префиксах, одном из способов управлять этим. Его подход предназначен больше для изменений в макете и написания стилей, а не сдвигая все компоненты, но не вижу причин, по которым мы не можем применить эту технику здесь. Таким образом, вы можете назвать классы так:

“Какие наименования использовать?”

К этому времени вы возможно заметили использование c- в моих примерах. Этот префикс расшифровывается как “компонент (component)” и лежит в основе всех имен моих БЭМ классов. Идея позаимствована из техники наименований Гарри Роберта, которая улучшает читаемость кода.

Система, которую я принял, и множество префиксов, которые будут встречаться в примерах в этой статье:

Я обнаружил, что подобные имена невероятно улучшили читаемость моего кода. Даже если у меня не получится подсадить вас на БЭМ, то этот прием определенно стоит запомнить.

Вы бы могли также взять и другие префиксы, такие как qa- для тестов на качество (quality-assurance), ss- для различных хуков на стороне сервера (server-side) и т.д. Но список выше — уже хорошее начало, и ввести новые имена вы можете после того, как освоитесь с этой техникой.

Вы увидите хороший пример использования этого стиля наименований в следующей проблеме.

“Как мне называть врапперы (wrappers)?”

Некоторые компоненты требуют родительского враппера (или контейнера), который задает макет дочерним элементам. В этих случаях, я всегда пытаюсь абстрагировать макет в модуль макета, такой как l-grid и добавлять каждый компонент как содержимое l-grid__item.

В нашем карточном примере, если бы мы хотели расположить список из четырех c-cardов, я бы использовал следующую разметку:

“Кросскомпонентные… Компоненты?”

Еще одна часто встречающаяся проблема — компоненты, чьи стили или позиционирование затрагиваются родительским контейнером. Различные решения этой проблемы детально описаны у Simurai. Я вам расскажу только о том подходе, который я считаю самым эффективным.

Вкратце, давайте предположим, что мы хотим добавить c-button в наш card__body из предыдущего примера. Эта кнопка уже является его компонентом и оформлена так:

“Модификатор или новый компонент?”

Одна из самых больших проблем — решить, где компонент заканчивается, и начинается новый. В примере с c-card, вы бы могли создать другой компонент, названный c-panel с очень похожими атрибутами стилей, но с очень заметными различиями.

Но что определяет необходимость использования двух компонентов, c-panel и c-card, или простого модификатора для c-card, который применяет уникальные стили.

Можно легко переполнить проект модулями и сделать все в виде компонентов. Я рекомендую начать с модификаторов, если вам покажется, что управление каким-либо компонентным CSS файлом становится слишком сложным, то, возможно, наступило время разделить некоторые модификаторы.

Лучше всего, если вы работаете в команде других разработчиков или дизайнеров, узнать их мнение. Соберите их на несколько минут и обсудите с ними. Несмотря на то, что этот ответ скорее выглядит как отмазка, для больших приложений очень важно понимать, какие модули доступны и что собой представляет компонент.

“Как управлять состояниями?”

Это довольно распространенная проблема, особенно, когда вы стилизуете компонент в активном или открытом состоянии. Давайте скажем, что наши карточки пребывают в активном состоянии; так вот, когда мы нажимаем на них, они выделяются красивой обводкой. Что насчет названия этого класса?

У вас два варианта: или использовать хук автономного состояния, или использовать БЭМ-подобное именование модификатора на уровне компонента:

“Когда лучше не добавлять новый класс к элементу”

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

Обычно я прикрепляю классы ко всему, что должно быть стилизовано, по разному, в контексте компонента. Я часто оставляю теги p без класса, если компонент не требует, чтобы они выглядели по-особенному в этом контексте.

Согласен, это будет обозначать то, что ваша разметка будет содержать множество классов. Но, в конечном счете, ваши компоненты будут способны жить независимо и смогут перемещаться без побочных эффектов.

Ввиду глобального характера CSS, присвоение класса ко всему дает нам полный контроль над рендером. Первоначальный дискомфорт стоит преимуществ полностью модульной системы.

“Как вкладывать компоненты?”

Допустим. что мы хотим отобразить чек-лист в нашем компоненте c-card. Пример того, как не стоит это делать:

“Не появятся ли у компонентов миллион классов?”

Некоторые считают, что множество классов на элемент — плохо, и, также, могут добавиться –модификаторы. Лично мне это не кажется проблемой, потому что это делает код более читаемым, и я точно знаю, что он должен делать.

Пример из четырех классов, с помощью которых стилизуется кнопка:

Footer logo

Для лого в футере странице воспользуемся уже готовым блоком b-logo. Вставим данный блок внутрь элемента, который будет отформатирован с помощью float:right;

Main-блок

Основной блок состоит из 6 элементов, каждый из которых содержит блок, наполненый:

а) картинками

б) текстом

в) ссылками

Блоки различаются между собой по ширине и высоте. Если высота будет вычислена при отрисовке страницы, то ширину мы можем задать разную с помощью модификаторов к элементам, в котором содержатся блоки. Выделим стандартный размер (первые два), малый (вторая линия) и длинный (соответственно третья линия):

.b-main__item
{
    float:left;
    margin-left:10px;
    width:460px;
}

.b-main__item_small
{
    width:300px
}

.b-main__item_long
{
    width:920px;
}

Отдельно взятый блок будет выглядеть так:

Sitemap

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

Эффект 2 колонок получаем за счет указания размера блока одной группе ссылок задаем float:left, другой float: right:

Social

Здесь воспользуемся спрайтами. (Спрайт -картинка, которая содержит набор других картинок) Соответственно, с помощью Background-image background-position для каждого элемента блока выбираем необходимые части картинки:

Бэм 3.0 – новый биоэнергомассажер для тела fohow

Верстаем страницу

В качестве шаблона воспользуемся Corporate Blue.

Верстать будем главную страницу:

Изначально определим разметку страницы:

Здесь блок имеет 6 элементов. По порядку: 1) Верхняя линия2) Header3) Меню4) Слайдер5) Main6) Footer

Запишем эту структуру:

Какие плюсы дает бэм?

0) Независимость блоков — за счет ухода от каскадности и отказа от описания в блоке «своего позиционирования»;

1) Повторяемость блоков — любой независимый блок можно повторять на любых страницах проекта. Возможно создать базу блоков, вследствие чего новые страницы будут создаваться подобно конструктору Лего;

2) Простота поддержки;

3) Структурированность кода.

Страница, сверстанная с использованием БЭМ может выглядеть больше, чем страницы, сверстанные без использования данной методологии, однако, представьте, если вы работаете с сайтом, где >20-30 уникальных страниц? В таком случае возможность повторного использования блоков и единая концепция позволяет: 1) намного быстрее принимать решения о модернизации страницблоков сайта;2) уменьшает порог вступления в проект новых разработчиков.

Переходим к footer

footer состоит из трех расположенных последовательно вложенных блоков:

Переходим к меню

Заметим, что каждый элемент можно представить как самостоятельный блок (состоящий только из себя) и являющийся ссылкой. Заведем сущность ссылка (b-link) и определим для нее обычный стиль и шрифт для ссылки:

.b-link
{
    color:#525252;
    font-size:12px;
        
}

Стили ссылок для меню определим в модификаторе .b-link_menu. Создадим HTML код:

Переходим к слайдеру:

Здесь текст на слайдере необходимо вывести на картинке. Соответственно, для этого можно использовать картинку (на которой написать вручную текст), а можно воспользоваться особенностью position, либо z-index. Второй способ гласит, что элементы с position: relative absolute отрисовываются отдельно от «остальных» элементов.

Соответственно, эти элементы будут отображены «выше» остальных. Третий способ: z-index задается для сестринских элементов. Представляет собой отображение по оси 0Z. Соответственно, тот элемент, у которого z-index выше, будет перекрывать собой те, у которого z-index ниже.

Зададим HTML структуру:

Префиксы

Иногда в проекте присутствуют префиксы. Они позволяют разработчиком точно определять какую логическую нагрузку несет тот или иной класс.

Пример выделения блоковэлементов

Для примера возьмем блок «прямой эфир» на сайте Хабра:

Вот так он выглядит:

Если «организовать» его по методологии БЭМ, то данная часть будет являть собой блок, состоящий из элементов:

Соответственно, данный блок состоит из 3 разных типов элементов. (Здесь стоит сделать оговорку, что возможно сверстать с использованием только 1 типа элемента (который будет описывать только маргины)).

Элементы выделенные розовым цветом внутри себя содержат другой блок, назовем его «пост».

Соответственно, рассмотрим из чего состоит блок пост:

Таким образом, блок «пост» состоит из 5 элементов.

На данном примере мы рассмотрели каким образом могут строиться блоки с применением методологии БЭМ (стоит сказать, что таким же образом может строиться любой уровень вложенности).

Теперь рассмотрим третью составляющую БЭМ — модификатор.Модификатор может задавать как дополнительное поведение для блокаэлемента, так и переопределять стандартное.Самым ярким примером для понимания «модификатора» служит пример с кнопками.Предположим, что в проекте используются кнопки типа:

Такая кнопка имеет некий padding слева и справа, шрифт и цвет background’а. Соответственно, мы представляем кнопку как .button и добавляем эти свойства ей.

Теперь, в проект на некоторых страницах необходимо добавить такие же кнопки, но, скажем, с background-color:red;Решить данную задачу с использованием БЭМ можно очень просто:Создать модификатор для блока: .button_red, для которой добавить заданное свойство.

Готово! В проекте появились красные кнопки с другим внешним видом. Причем нам не понадобилось создавать новые сущности.

Разберем header страницы

Он состоит из двух элементов:

1) Лого:

2) Форма поиска:

Выделим картинку и зададим HTML-структуру:

Разметка страницы

Разметкой страницы занимается блок, который, к примеру, можно установить для body.

Соответственно элементы данного блока и описывают расположение остальных блоков на веб-странице.

Заключение

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

Подведем итог

В данном обучающем посте мной была поставлена задача показать, что использование методологий (таких как БЭМ) позволяет упростить разработку веб-страниц за счет «единого словаря терминологий» и единой структуры страницы.

Также, данный пост является дополнением моего комментария (в начале поста) в котором я говорил о том, почему использовать стили на id — есть bad practices.