Введение в методологию БЭМ

Russian (Pусский) translation by Anastasia Reut (you can also view the original English article)

Давайте посмотрим правде глаза, мы все хотели бы сделать наш код более понятным для чтения. Это помогло бы нам работать быстрее и продуктивнее и, когда другие работают с нами, мы можем сохранять ясность и последовательную семантику. Сегодня так много стандартов и терминов в мире CSS: OOCSS, SMACSS, БЭМ и другие! Все эти подходы служат для улучшения структуры CSS кода и сегодня мы поговорим о БЭМ.

БЭМ означает Блок Элемент Модификатор. Он предполагает структурированный способ именования классов на основе свойств конкретного элемента. Если Вы когда-нибудь встречали класс с названием вроде header__form—email - это и есть БЭМ. Имейте ввиду, что в методологии БЭМ, мы будем использовать только названия классов (не ID). Названия классов позволяют повторять названия БЭМ, если это необходимо, и создавать более последовательную структуру кода (как в HTML, так и в CSS/Sass файлах). Давайте разберем это более подробно.

Блок

Блок - это независимый контейнер или контекст на странице. Думайте о нем как о большом структурном куске кода. На Вашей странице скорее всего будут header, footer, sidebar и основное содержание страницы. Каждый из этих элементов может быть независимым блоком. Взгляните на изображение ниже:

Блок элемент образует корневое название класса, которое всегда идет первым. Просто запомните, что как только Вы определились с блоком, можете начинать называть остальные элементы.

Элемент

Элемент является частью блока. Блок - это родительский контейнер, а элементы - его составляющие.

1	.block__element

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

Вот несколько примеров того, как работает методология элементов:

1	.header__logo {}
2	.header__tagline {}
3	.header__searchbar {}
4	.header__navigation {}

Как Вы можете заметить, здесь много места для творчества, что дает возможность настроить методологию под себя. "Navigation" можно изменить на "nav", "tagline" можно изменить на "tag" или "tagLine". Главное делать названия классов простыми, понятными и точными. Однако не переусердствуйте, помому что Ваши стили и html должны оставаться "сухими" (не повторяйтесь). Не должно быть проблемой обновить названия классов, если нашли более подходящие (просто постарайтесь придерживаться их! ). Элементы будут составлять ядро названий Ваших классов, помогая понять, как лучше структурировать стили, и, как управлять макетом.

Модификаторы

И вот сейчас начнется самое интересное (если оно не началось до этого!). Когда Вы выбираете название класса, стремитесь сделать этот элемент повторяемым, чтобы Вам не пришлось писать новые названия классов в других разделах сайта, если стили элементов одинаковы. Если необходимо модифицировать (изменить) стили конкретного элемента, можете использовать модификатор (конечно же!). Чтобы сделать это, добавьте двойной дефиз -- после элемента (или блока). Вот краткий пример

1	.block--modifier {}
2	.block__element--modifier {}

Однако будьте осторожны с этим! Помните, чтобы делать названия классов простыми и не повторяться или создавать дополнительные ненужные классы. Давайте поговорим об этом используя код, возьмем header страницы в качестве блок элемента.

1	.header__navigation {}
2	.header__navigation--secondary {}

Если Вы используете вторичную навигацию, есть вероятность, что расположение и расстояние в навигации одинаковое, но вторичная имеет другой цвет. Вы можете либо продублировать оригинальные стили, либо, даже лучше, использовать препроцессор. Например в Sass с помощью директивы @extend можно унаследовать свойства главного элемента (так, чтобы дочерний элемент перенял все свойства) и затем изменить необходимые стили.

.header__navigation { 
    background: #008cba; 
    padding: 1rem 0; 
    margin: 2rem 0; 
    text-transform: uppercase; 
    } 
    
.header__navigation--secondary { 
    @extend .header__navigation;
    background: #dfe0e0; 
    }

Вы возможно думаете "но ведь название класса такое длинное!". То, как я это вижу: названия классов БЭМ очень точные, понятные, просты для чтения внутри html и четко дают понять, для чего служат.

Что мне также нравится в БЭМ - это возможность использовать только одно название класса для каждого html тэга. Давайте посмотрим, как это работает для label. Стандартные селекторы:

1	.label .label-default {}
2	.label .label-alert {}

против селекторов БЭМ:

1	.label {}
2	.label--alert {}

Языки вроде Sass (Sass в особенности) помогают быстро иметь элементы с одними и теми же стилями с небольшими изменениями. В примере ниже не допускается дублирование стилей, но мы можем изменить только то, что нам нужно. Но больше всего мне нравится в БЭМ то, что мне не нужно объединять двусмысленные классы вроде "panel panel-default col-md-3". Если Вы используете фреймворк вроде Foundation, Вы можете начать использовать миксины. Но для простого примера, давайте стилизуем те label, которые мы только что обозначили.

.label { 
    background: #eee; 
    border-radius: 505; 
    color: #333; 
    font-size: 1rem; 
    } 
    
.label--alert { 
    @extend .label; 
    background: #da4531; 
    color: #fff; 
    }

Заключение

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

Из моего личного опыта, БЭМ помог мне строить прототипы более эффективно и вывел на новый уровень написания кода!

Дополнительные материалы

А что Вы думаете о БЭМ, есть ли у Вас какие-нибудь советы, рекомендации или трюки для читателей Tuts+? Пишите в комментариях!