Архитектура CSS: блочный элемент-модификатор (БЭМ) и атомарный CSS

• имена блоков должны быть уникальными в рамках проекта
• имена элементов должны быть уникальными в пределах блока
• вариации блока — скажем, окно поиска с темным фоном — должны добавить модификатор к имени класса

Имена блоков и имен элементов обычно разделяются двойным подчеркиванием ( .block__element Имена блоков и элементов обычно отделяются от имен модификаторов двойным дефисом (например, .block--modifier.block__element--modifier

Вот как выглядит БЭМ на примере формы поиска:

 <form class="search">
    <div class="search__wrapper">
        <label for="s" class="search__label">Search for: </label>
        <input type="text" id="s" class="search__input">
        <button type="submit" class="search__submit">Search</button>
    </div>
</form>

Вариант этой формы с темным фоном может использовать следующую разметку:

 <form class="search search--inverse">
    <div class="search__wrapper search__wrapper--inverse">
        <label for="s" class="search__label search_label--inverse">Search for: </label>
        <input type="text"  id="s" class="search__input search__input--inverse">
        <button type="submit" class="search__submit search__submit--inverse">Search</button>
    </div>
</form>

Наш CSS может выглядеть так:

 .search {
    color: #333;
}
.search--inverse {
    color: #fff;
    background: #333;
}
.search__submit {
    background: #333;
    border: 0;
    color: #fff;
    height: 2rem;
    display: inline-block;
}
.search__submit--inverse {
    color: #333;
    background: #ccc;
}

И в нашей разметке, и в CSS search--inversesearch__label--inverseдополнительными именами классов. Они не являются заменой для searchsearch__label Имена классов являются единственным типом селектора, используемого в системе БЭМ. Можно использовать селекторы потомка и потомка, но потомки также должны быть именами классов. Селекторы элементов и идентификаторов верботенны. Обеспечение уникальности имен блоков и элементов также предотвращает конфликты имен, которые могут стать проблемой для команд.

У этого подхода есть несколько преимуществ:

• новым членам команды легко читать разметку и CSS и понимать их поведение
• добавление большего количества разработчиков повышает производительность команды
• последовательное именование уменьшает вероятность столкновений имен и побочных эффектов
• CSS не зависит от разметки
• CSS очень многоразовый

В БЭМ гораздо больше, чем можно удобно разместить в разделе главы. Сайт BEM описывает эту методологию более подробно, а также содержит инструменты и учебные пособия, которые помогут вам начать работу. Чтобы узнать больше об аспекте соглашения об именах в BEM, еще один фантастический ресурс — Get BEM .

Атомный CSS

Если БЭМ — индустрия, Атомный CSS — его мятежный персонаж. Названный и объясненный Тьерри Кобленцем из Yahoo в его статье 2013 года « Оспаривание лучших практик CSS», в Atomic CSS используется узкая библиотека имен классов. Эти имена классов часто сокращены и отделены от содержимого, на которое они влияют. В системе Atomic CSS вы можете сказать, что делает имя класса, но нет никакой связи между именами классов (по крайней мере, не теми, которые используются в таблице стилей) и типами контента.

Давайте проиллюстрируем на примере. Ниже приведен набор правил, которые мы могли бы назвать традиционной архитектурой CSS. В этих наборах правил используются имена классов, которые описывают содержимое, к которому они применяются — глобальное окно сообщения и стили для окон сообщения «успех», «предупреждение» и «ошибка»:

 .msg {
    background-color: #a6d5fa;
    border: 2px solid #2196f3;
    border-radius: 10px;
    font-family: sans-serif;
    padding: 10px;
}
.msg-success {
    background-color: #aedbaf;
    border: 2px solid #4caf50;
}
.msg-warning {
    background-color: #ffe8a5;
    border-color:  #ffc107;
}
.msg-error {
    background-color: #faaaa4;
    border-color: #f44336;
}

Чтобы создать окно сообщения об ошибке, нам нужно добавить имена классов msgmsg-errorclass

 <p class="msg msg-error">An error occurred.</p>

Давайте сопоставим это с атомарной системой, где каждое объявление становится своим собственным классом:

 .bg-a {
    background-color: #a6d5fa;
}
.bg-b {
    background-color: #aedbaf;
}
.bg-c {
    background-color: #ffe8a5;
}
.bg-d {
    background-color: #faaaa4;
}
.bc-a{
    border-color: #2196f3;
}
.bc-b {
    border-color: #4caf50;
}
.bc-c {
    border-color:  #ffc107;
}
.bc-d {
    border-color:  #f44336;
}
.br-1x {
    border-radius: 10px;
}
.bw-2x {
    border-width: 2px;
}
.bss {
    border-style: solid;
}
.sans {
    font-style: sans-serif;
}
.p-1x {
    padding: 10px;
}

Это намного больше CSS. Давайте теперь воссоздадим наш компонент сообщения об ошибке. Используя атомарный CSS, наша разметка становится:

 <p class="bw-2 bss p-1x sans br-1x bg-d bc-d">
    An error occurred.
</p>

Наша разметка также более многословна. Но что происходит, когда мы создаем компонент с предупреждением?

 <p class="bw-2 bss p-1x sans br-1x bg-c bc-c">
    Warning: The price for that item has changed.
</p>

 <button type="button" class="p-1x sans bg-a br-1x">Save</button>