Від автора: якщо БЕМ – це улюбленець співтовариства, то атомний CSS – бунтівний дисидент. Thierry Koblentz з Yahoo ввів і пояснив це поняття в 2013 у своїй статті «вивчення кращих CSS практик». Атомний CSS використовує щільну бібліотеку імен класів. Класи часто названі скороченнями і випливають із того контенту, на який призначаються. В атомному 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 у атрибут class:
An error occurred.
А тепер подивимося на атомну систему, де у кожного свій оголошення клас:
.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 наша розмітка стане такою:
An error occurred.
Розмітка стала більш багатослівна. А що буде, якщо створити компонент повідомлення з попередженням?
Warning: The price for that item has changed.
Змінилося два класу: bg-d і bc-d замінилися на bg-c, bc-c. П’ять правил були використані повторно. Тепер давайте створимо кнопку:
Save
Ого! Ми повторно використовували 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 розробник може просто подивитися в стильової гід або исходники, щоб визначити, які класи йому знадобляться в заданому модулі.
