Растущая сложность веб-сайтов и веб-приложений привела к появлению нескольких новых подходов к структурированию и поддержке таблиц стилей. Возможно, вы слышали о BEM, OOCSS, SMACSS, OrganicCSS или Atomic CSS. Мы использовали последний, Atomic CSS, для разработки нашего нового веб-сайта golucid.co. Мы хотели бы поделиться с вами, где это помогло, где это больно, и как мы нашли баланс.
Что такое атомарный CSS?
Давайте начнем с простого определения. Как следует из названия, основной принцип Atomic CSS заключается в разделении стилей на атомарные или неделимые части. Это в корне противоречит традиционному подходу написания семантических селекторов. Сравните два фрагмента CSS ниже:
Семантический CSS
.nav-link {
float: left;
margin-right: 16px;
color: white;
}
.nav-link-selected {
color: teal;
}
Атомный CSS
.fl-st { float: left; }
.mr-1 { margin-right: 16px; }
.c-w { color: white; }
.c-pr { color: teal; }
Как вы можете видеть, атомарные стили довольно независимы от разметки. Для сравнения, семантические стили позволяют опытному автору CSS просматривать таблицу стилей и получить хорошее представление о том, как будет выглядеть элемент.
Как это работает
Смена парадигмы в атомарном CSS заключается в том, что большинство решений по стилю находятся в разметке, а не явно в таблице стилей. (Постарайтесь не обращать внимания на этот голос в вашей голове, кричащий о разделении интересов — мы скоро доберемся до хорошего!) из golucid.co :
МЕНЬШЕ
@std-margin: 16px;
.mt-1 { margin-top: @std-margin; }
.mr-1 { margin-right: @std-margin; }
.mt-2 { margin-top: 2*@std-margin; }
.ov-h { overflow: hidden; }
.d-b { display: block; }
.va-m { vertical-align: middle; }
.fl-st { float: @float-start; }
.fl-nd { float: @float-end; }
.fw-b { font-weight: bold; }
.fs-i { font-style: italic; }
.headshot {
width: @headshot-dimension;
}
HTML
<ol class="mt-1">
<li class="mt-2 ov-h">
<img ... class="headshot d-b va-m fl-st mr-1">
<div class="executive-bio ov-h">
<a ... class="fl-nd">
<img ... />
</a>
<h3 class="fw-b">Karl Sun</h3>
<h4 class="fs-i">CEO and Co-founder</h4>
<p>Prior to Lucid Software...</p>
</div>
</li>
...
</ol>
Обратите внимание, что семантических классов очень мало, которые используются только для конкретных нужд. Остальная часть информации о стилях поступает из групп высоко сокращенных атомарных классов; знакомые с Эмметом распознают аббревиатуры. И действительно, классов по различным элементам не так много. Сила этого подхода заключается в том, что нам не нужно было писать новый селектор с избыточными стилями для каждой возможной комбинации атомов . Давайте углубимся в эту идею.
Сокращение избыточности кода и размера
Атомный CSS — все о борьбе с раздутием, которое имеют тенденцию приобретать наши таблицы стилей. Рассмотрим следующий фрагмент семантического CSS:
CSS
.nav-link {
float: left;
margin-right: 16px;
color: white;
}
.footer-link {
float: left;
margin-right: 16px;
color: teal;
font-size: 85%;
}
.body-img {
float: left;
margin-right: 16px;
margin-bottom: 16px;
}
HTML
<a class="nav-link" ... > foo</a> <a class="footer-link" ... > bar</a> <img class="body-img" ... />
Вы заметите, что есть несколько экземпляров свойства margin с одинаковым значением. Запахнув дублирующийся код, опытный автор препроцессора может заменить значение переменной следующим образом:
МЕНЬШЕ
@std-margin: 16px;
.nav-link {
float: left;
margin-right: @std-margin;
color: white;
}
.footer-link {
float: left;
margin-right: @std-margin;
color: teal;
font-size: 85%;
}
.body-img {
float: left;
margin-right: @std-margin;
margin-bottom: @std-margin;
}
HTML
<a class="nav-link" ... > foo</a> <a class="footer-link" ... > bar</a> <img class="body-img" ... />
Приятно, что нет жестко запрограммированных дубликатов и что любые изменения размера поля могут быть сделаны в одном месте. Кроме того, фактический вывод CSS остается неизменным. Фактически, переменные и миксины препроцессора, используемые таким образом, на самом деле только делают исходные таблицы стилей более управляемыми, оставляя при этом вывод CSS практически неизменным (в лучшем случае) или даже более раздутым (в худшем случае).
Давайте воспроизведем наш стиль с использованием атомарного подхода:
МЕНЬШЕ
@std-margin: 16px;
.fl-st { float: left; }
.mr-1 { margin-right: @std-margin; }
.mb-1 { margin-bottom: @std-margin; }
.c-w { color: white; }
.c-pr { color: teal; }
.fz-sm { font-size: 85%; }
HTML
<a class="fl-st mr-1 c-w" ... >foo</a> <a class="fl-st mr-1 c-pr fz-sm" ... >bar</a> <img class="fl-st mr-1 mb-1" ... />
Атомность частей способствует минимальному раздутию CSS и оптимальному повторному использованию кода. Действительно, HTML более раздутый из-за увеличения числа используемых имен классов, но дизайнеры из Yahoo сообщили о чистой экономии общего размера между CSS и HTML.
Почему бы просто не использовать встроенные стили?
В этот момент вы можете спросить себя: чем это отличается / лучше / хуже, чем просто использование встроенных стилей в моем HTML?
Во-первых, встроенные стили являются королем в области специфики. Атомарные CSS-классы — это просто простые классы с низкой специфичностью, что означает, что вы можете легко и удобно переопределять атомарные CSS-стили без неприятной цепочки специфичности.
Во-вторых, встроенные стили неприглядны, раздувают ваш HTML как сумасшедший и его сложно поддерживать. Атомные таблицы стилей являются чистыми, лаконичными и легко обслуживаемыми.
Почему вы должны попробовать это
Теперь о твердой продаже — вы должны действительно попробовать это. Мы не говорим, что это идеальное решение всех ваших проблем CSS, но это, безусловно, инструмент, который стоит изучить. Вот почему нам это нравится до сих пор:
Согласованность стиля
Наличие плотного ядра стандартных стилей сохраняет ваш визуальный дизайн единообразным. Например, наличие стандартных значений полей или отступов обеспечит равномерное и равномерное распределение элементов по всему сайту или приложению.
Атомные стили облегчают изменения
Допустим, вы хотите изменить стандартное поле с 16 на 20 пикселей или изменить основной цвет с синего на фиолетовый. При использовании встроенных стилей вам придется пройти весь проект, чтобы найти и заменить их все. С атомарной таблицей стилей вы просто вносите изменения в нескольких местах. Вам, вероятно, потребуется изменить его только в одном месте, если вы используете препроцессор CSS и переменные.
Улучшенный рабочий процесс
Атомный CSS позволяет быстро создавать основные вещи. Таким образом, вы можете потратить время на написание пользовательских стилей для более интересных элементов вашего дизайна. Лучшая часть использования атомарных стилей для сборки golucid.co заключалась в том, что нам не нужно было писать новые стили для каждого нового элемента HTML. Несколько раз мы начинали писать новые семантические классы только для того, чтобы понять, что один и тот же стиль можно применять только с нашими атомарными классами. Таблица стилей начиналась с малого и осталась такой же.
Предостережения
Несмотря на то, что мы нашли преимущества в атомарном подходе, мы также столкнулись с некоторыми недостатками, наиболее заметный из которых касался адаптивного дизайна. Например, если ваш основной раздел имеет класс m-3 для поля в 30px, но вы хотите уменьшить его до 15px при небольшой ширине устройства, вам потребуется использовать другой класс, например m-3-sm, в дополнение к твой м-3 класс. В этот момент 3 в м-3-см теряет часть своего значения. Легко видеть, что добавление большого количества адаптивных классов может сделать разметку громоздкой и увеличить таблицу стилей.
Вывод
Атомный CSS — отличный инструмент, когда он настроен в соответствии с вашими потребностями. Например, вы можете использовать семантические классы для визуального оформления (цвета, границы, фоны и т. Д.) И атомарные классы для разметки и разметки. Вы также можете создать немного более сложные классы для вашей атомарной таблицы стилей, которые заменят часто встречающийся набор стилей (некоторые называют эти классы «молекулами»). Важно то, что Atomic CSS отвечает вашим потребностям, а не наоборот.
Помните: инструменты , а не правила .