Блок-элемент-модификатор (BEM) & Atomic CSS — SitePoint

Сен122018

Статьи по дизайну

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

  

    

         Поиск: 
        
         Поиск 
    

 

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

  .search {
    цвет: # 333;
}
.search - inverse {
    цвет: #fff;
    фон: # 333;
}
.search__submit {
    фон: # 333;
    border: 0;
    цвет: #fff;
    высота: 2рем;
    display: inline-block;
}
.search__submit - inverse {
    цвет: # 333;
    background: #ccc;
}
 

В обеих наших разметках и CSS поиск - обратный и search__label - inverse — дополнительные имена классов . Они не являются заменой для поиска и search__label . Названия классов — это единственный тип селектора, используемый в системе BEM. Селекторы детей и потомков могут использоваться, но потомки также должны быть именами классов. Селекторы элементов и идентификаторов являются verboten. Обеспечение уникальности уникальности блоков и элементов также предотвращает коллизии имен, что может стать проблемой среди команд.

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

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

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

Atomic CSS

Если BEM — любитель индустрии, Atomic CSS — его непослушный maverick. Названный и объясненный Тьерри Кобленцем из 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;
}
 

Чтобы создать окно с сообщением об ошибке, нам нужно добавить имена классов msg и msg-error в атрибут класса :

  
 Произошла ошибка. 
 

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

  .bg-a {
    background-color: # a6d5fa;
}
.bg-b {
    background-color: #aedbaf;
}
.bg-c {
    background-color: # ffe8a5;
}
.bg-d {
    background-color: # faaaa4;
}
.bc-а {
    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. Давайте теперь воссоздаем наш компонент сообщения об ошибке. Используя Atomic CSS, наша разметка становится:

  

    Произошла ошибка.

 

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

  

    Внимание: цена на этот предмет изменилась.

 

Два названия классов были изменены: bg-d и bc-d были заменены на bg-c и bc-c . Мы повторно использовали пять наборов правил. Теперь давайте создадим кнопку:

   Сохранить 
 

Эй сейчас! Здесь мы повторно использовали четыре набора правил и избегали добавления каких-либо правил в нашу таблицу стилей. В надежной атомной архитектуре CSS добавление нового HTML-компонента, такого как боковая панель статьи, не потребует добавления большего количества CSS (хотя на самом деле может потребоваться добавить немного больше).

Atomic CSS немного напоминает использование служебных классов в вашем CSS, но доведено до крайности. В частности, это:

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

Однако Atomic CSS не без споров.

Дело против атомного CSS

Atomic CSS противоречит всему, чему нас учили писать CSS. Он чувствует себя почти так же плохо, как приклеивание style атрибутов во всем мире. Действительно, одна из главных критических замечаний по методологии Atomic CSS заключается в том, что она размывает границы между контентом и презентацией. Если class = "fl m-1x" плавает элемент слева и добавляет десятикратный край, что мы будем делать, когда мы больше не хотим, чтобы этот элемент оставался слева?

Один из ответов, конечно, состоит в том, чтобы удалить класс fl из нашего элемента. Но теперь мы меняем HTML. Вся причина использования CSS заключается в том, что разметка не подвержена влиянию презентации и наоборот. (Мы также можем решить эту проблему, удалив правило .fl {float: left;} из нашей таблицы стилей, хотя это повлияет на каждый элемент с именем класса fl .) , обновление HTML может быть небольшой ценой за триммер CSS.

В оригинальном посте Кобленца он использовал названия классов, такие как .M-10 для поля : 10px и .P-10 для дополнения : 10px . Проблема с таким соглашением об именах должна быть очевидной. Изменение на 5 или 20 пикселей означает, что нам необходимо обновить наш CSS и наш HTML-код или риск иметь имена классов, которые не могут точно описать их эффект.

Использование имен классов, таких как p-1x как это сделано в этом разделе, решает эту проблему. Часть 1x имени класса указывает отношение, а не определенное количество пикселей. Если базовое дополнение составляет пять пикселей (то есть .p-1x {padding: 5px;} ), тогда .p-2x установит десять пикселей отступов. Да, это меньше описать, что такое имя класса, но это также означает, что мы можем изменить наш CSS без обновления нашего HTML-кода и без создания вводящего в заблуждение имени класса.

Атомная архитектура CSS не мешает нам использовать имена классов, которые описывают контент в нашей разметке . Вы можете добавить к вашему коду .button-close или .accordion-trigger . Такие имена классов на самом деле предпочтительны для манипуляций JavaScript и DOM.

BEM против Atomic CSS

BEM работает лучше всего, когда у вас есть большое количество разработчиков, которые строят CSS и HTML-модули параллельно. Это помогает предотвратить ошибки и ошибки, которые создаются значительными командами. Он хорошо масштабируется, отчасти потому, что соглашение об именах является описательным и предсказуемым. BEM не только для больших команд, но он отлично работает для больших команд.

Atomic CSS работает лучше, когда есть небольшая команда или один инженер, ответственный за разработку набора правил CSS, с полными компонентами HTML, построенными более крупной командой. С помощью Atomic CSS разработчики могут просто взглянуть на руководство по стилю — или на источник CSS — определить, какой набор имен классов потребуется для определенного модуля.

Знайте, когда идти своим путем

На практике ваш CSS может включать сочетание подходов. У вас могут быть имена классов, которые описывают контент или компоненты в дополнение к именам классов утилит, которые влияют на макет. Если у вас нет полного контроля над разметкой, как с CMS, то ни один из этих подходов не может быть полезен. Возможно, вам даже понадобится использовать длинные и специальные селектора, чтобы достичь желаемого.

        

          
             Тиффани Б. Браун — независимый веб-разработчик и технический писатель, базирующийся в Лос-Анджелесе. Браун предлагает веб-разработки и консалтинговые услуги крупным агентствам и малым предприятиям. Бывший член команды разработчиков программного обеспечения Opera Software, Браун также является соавтором книги JumpStart HTML5 SitePoint. Она спорадически пишет о технологии веб-разработки в своем блоге. Вы можете следить за ней в Twitter на @webinista.