От автора: если БЭМ – это любимец сообщества, то атомный CSS – мятежный диссидент. Thierry Koblentz из Yahoo ввел и объяснил это понятие в 2013 в своей статье «изучение лучших CSS практик». Атомный CSS использует плотную библиотеку имен классов. Классы часто названы сокращениями и проистекают из того контента, на который назначаются. В атомном CSS можно задать, что будет выполнять класс, но связи между именами классов и типами контента нет (по крайней мере, между классами, которые используются в стилях).
Покажем на примере. Ниже приведен набор правил в традиционной архитектуре CSS. Правила описаны в классах, чьи имена описывают контент, к которым они применяются: глобальный блок сообщения и стили к блокам «успешно», «предупреждение» и «ошибка»:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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 в атрибут class:
|
1 |
<p class="msg msg-error">An error occurred.</p> |
А теперь посмотрим на атомную систему, где у каждого объявления свой класс:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.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 наша разметка станет такой:
|
1 2 3 |
<p class="bw-2 bss p-1x sans br-1x bg-d bc-d"> An error occurred. </p> |
Разметка стала более многословна. А что будет, если создать компонент сообщения с предупреждением?
|
1 2 3 |
<p class="bw-2 bss p-1x sans br-1x bg-c bc-c"> Warning: The price for that item has changed. </p> |
Поменялось два класса: bg-d и bc-d заменились на bg-c и bc-c. Пять правил были использованы повторно. Теперь давайте создадим кнопку:
|
1 |
<button type="button" class="p-1x sans bg-a br-1x">Save</button> |
Ого! Мы повторно использовали 4 правила и не добавляли лишних правил в стили. В надежной атомной CSS архитектуре при создании новых HTML компонентов типа сайдбара в статье добавление нового CSS кода не потребуется (в реальности могут потребоваться небольшие правки). Атомный CSS немного напоминает служебные классы в CSS, только здесь все возведено в абсолют. В частности такая система:
сокращает CSS, так как создаются сильно детализированные стили с возможностью повторного использования, а не правила под каждый компонент;
значительно снижает конфликты специфичности за счет системы селекторов с низкой специфичностью;
позволяет быстро разрабатывать HTML компоненты после определения базовых правил.
Однако все не так гладко с атомным CSS.
Минус атомного CSS
Атомный CSS противоречит всему, чему нас учили при написании CSS. Это так же неправильно, как везде вставлять атрибут style. Одно из самых критичных замечаний в сторону атомной методологии – она размывает грань между контентом и представлением. Если запись class=»fl m-1x» добавляет обтекание по левому краю и внешний отступ в 10 пикселей, что нам делать, когда это обтекание нам больше не понадобится?
Ответ – конечно, удалить класс fl. Но нам для этого пришлось лезть в HTML. Основная идея применения CSS состоит в том, что так представление не влияет на разметку и наоборот. Можно еще удалить .fl {float: left;} из стилей, но тогда это повлияет на все элементы с классом fl. Тем не менее, изменение HTML – небольшая цена за сокращенный CSS.
Автор в оригинальной статье использовал классы .M-10 для margin: 10px и .P-10 для padding: 10px. Проблема такого способа объявления очевидна. Если понадобится изменить margin до 5 или 20 пикселей, нужно будет менять CSS и HTML. Иначе классы не будут точно описывать сами себя.
Объявления типа p-1x, как в нашем примере, решают эту проблему. Запись 1x в классе указывает на соотношение, а не определенное число пикселей. Если базовый padding равен 5 пикселей (т.е. .p-1x {padding: 5px;}), то .p-2x будет уже 10 пикселей. Такой способ намного хуже описывает поведение класса, но так мы можем менять наш CSS, не затрагивая HTML. Кроме того, так нам не понадобится создавать запутывающие нас классы.
Атомная CSS-архитектура не мешает нам использовать классы для описания контента в разметке. Можно использовать классы типа .button-close и .accordion-trigger. Классы такого рода лучше использовать для JS и манипуляций с DOM.
БЭМ или атомный CSS
БЭМ лучше работает, когда у вас много разработчиков, параллельно создающих CSS и HTML модули. Эта методология спасает от ошибок и багов, которые появляются в больших командах. Она хорошо масштабируется, поскольку объявления описательны и предсказуемы. БЭМ создана не только для больших команд, но с ними эта методология работает просто замечательно.
Атомный CSS лучше работает, когда есть небольшая группа или один разработчик, который пишет CSS, а все HTML-компоненты созданы более крупной командой. В атомном CSS разработчик может просто посмотреть в стилевой гид или исходники, чтобы определить, какие классы ему понадобятся в заданном модуле.
Автор: Tiffany Brown
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
