Статьи

Узнайте об архитектуре CSS: атомарный CSS

Сентябрь 19, 2018

Ниже приводится выдержка из нашей книги CSS Master , написанной Тиффани Браун. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .

Если БЭМ — индустрия, Атомный CSS — его мятежный персонаж. Атомный CSS, названный и объясненный Тьерри Кобленцем из Yahoo в его статье 2013 года « Оспаривание лучших практик 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;
}
Смотреть стать CSS-героем вашего офиса с CSS-архитектурой
Craft структурированный, поддерживаемый и масштабируемый CSS
Смотреть этот курс Смотреть этот курс

Чтобы создать окно сообщения об ошибке, нам нужно добавить имена классов 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>

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

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

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

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

Тем не менее, Atomic CSS не без противоречий.

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

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

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

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

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

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

БЭМ против атомного CSS

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

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

36
Share: