Атомный CSS как набор инструментов
Растущая сложность веб-сайтов и веб-приложений привела к появлению нескольких новых подходов к структурированию и поддержке таблиц стилей. Возможно, вы слышали о BEM, OOCSS, SMACSS, OrganicCSS или Atomic CSS. Мы использовали последний, Atomic CSS, для разработки нашего нового веб-сайта golucid.co. Мы хотели бы поделиться с вами, где это помогло, где это больно, и как мы нашли баланс.
Что такое атомарный CSS?
Давайте начнем с простого определения. Как следует из названия, основной принцип Atomic CSS заключается в разделении стилей на атомарные или неделимые части. Это в корне противоречит традиционному подходу написания семантических селекторов. Сравните два фрагмента CSS ниже:
Как вы можете видеть, атомарные стили довольно независимы от разметки. Для сравнения, семантические стили позволяют опытному автору CSS просматривать таблицу стилей и получить хорошее представление о том, как будет выглядеть элемент.
Как это работает
Смена парадигмы в атомарном CSS заключается в том, что большинство решений по стилю находятся в разметке, а не явно в таблице стилей. (Постарайтесь не обращать внимания на этот голос в вашей голове, кричащий о разделении интересов — мы скоро доберемся до хорошего!) из golucid.co :
Сокращение избыточности кода и размера
Атомный CSS — все о борьбе с раздутием, которое имеют тенденцию приобретать наши таблицы стилей. Рассмотрим следующий фрагмент семантического CSS:
Вы заметите, что есть несколько экземпляров свойства margin с одинаковым значением. Запахнув дублирующийся код, опытный автор препроцессора может заменить значение переменной следующим образом:
Приятно, что нет жестко запрограммированных дубликатов и что любые изменения размера поля могут быть сделаны в одном месте. Кроме того, фактический вывод CSS остается неизменным. Фактически, переменные и миксины препроцессора, используемые таким образом, на самом деле только делают исходные таблицы стилей более управляемыми, оставляя при этом вывод CSS практически неизменным (в лучшем случае) или даже более раздутым (в худшем случае).
Давайте воспроизведем наш стиль с использованием атомарного подхода:
Атомность частей способствует минимальному раздутию 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 отвечает вашим потребностям, а не наоборот.
Атомарный CSS — порядок и чистота
С первых строк кода, каждый человек начинает понимать важность правильной его организации и оптимизации рабочего пространства в целом.
Не важно о какой отрасли говорить конкретно, но важно понимать что везде где есть код – должны быть правила его создания и хранения.
На первых парах конечно может показаться, что придерживание определенных правил и порядков лишь отнимает время, что на практике выглядит совсем иначе. Квинтэссенция любых принципов написания кода заключается в том, что мы не пишем его один раз и навсегда – мы постоянно возвращаемся к нему с целью редактирования и модификации.
Этот процесс может превратиться в настоящую проблемму, если там царит хаос и непредсказуемость. Эта проблемма может усугубиться если этот хаос был создан не тобой, а человеком с которым нет возможности установить контакт. Именно для устранения таких ситуаций и существуют методологии.
Если говорить о css, то с уверенностью можно сказать — каждый из нас пользуется определенной методологией, осознанно или нет. Даже если человек не использует определенные правила и стандарты, то у него все равно есть свои привычки и постоянно повторяющиеся приемы.
Способы написания кода не обязательно должны быть общепринятыми и стандартизированными, обязательным должно быть другое – они должны быть предсказуемыми.
Список методологий на которые стоит обратить внимание не так велик:
-BEM,
-Smacss,
-OOCSS,
-MCSS,
-Atomic CSS
Atomic CSS – пожалуй является самой необычной и даже в какой то мере пугающей методологией, что к счастью не мешает ей быть очень понятной и предсказуемой.
Что бы обосновать свой выбор я должен откатить немного назад.
Почти Атомарный CSS
Были времена, когда корневой каталог подавляющего количества проектов на стадии создания интерфейса выглядел как три файла и две папки:
Но эта простота обманчиво может показаться удобной, на самом деле как в минимум в двух из трех этих файлов творилось нечто ужасное.
Меня всегда раздражало две вещи – беспорядок и отсутствие стиля. В Css под классификацию беспорядка попадает масса различных нюансов, но больше всех меня не устраивало постоянное повторение одних и тех же правил и свойст для разных селекторов.
Первым решением этой проблеммы были следующие действия:
и в последствии принимало следующий:
Конечно это решение было очень не удобным и к счастью временным. Недолго помучавшись с бесконечным переключенем между файлами, и поиском нужного места в них, я пришел к выводу что гораздо удобнее будет создать отдельные классы, отвечающие за одну инструкцию каждый:
В html файлах теги с большим количеством классов выглядели странновато, но это решение мне показалось вполне приемлемым:
С одного взгляда достаточно что бы понять что это боковая колонка, с фиксированным позиционированием, с левой стороны экрана, занимающая 30% его ширины и 100% высоты, залитая главным цветом.
Все что касалось числовых значений, в основном это были внешние и внутренние отступы, я записывал в стандартном формате. Для этого каждому тегу, или группе тегов я добавлял отдельный класс идущий первым, на примере выше это класс “slider”.
Это был почти атомарный и почти удобный подход. Удобным ему мешало стать несколько недостатков, важнейшим из которых были следующие ситуации:
С их помощью я модифицировал свою методологию и сделал верстку приятной и удобной.
Почти идеальный Css
Начну с препроцессора. Его выбор не принципиален, изначально я пользовался Sass, потом SCSS и в итоге перешел на Stylus, потому что уважаю минимализм, а Stylus был максимально минималистичен (в примерах ниже будет использован scss, по причине его популярности).
Итак, первое что я сделал это написал дополнительные классы которые с помощью директивы @extend выглядели как настоящие атомы:
Мне понравилась идея, а директива @extend вызвала сходство с ядром атома, рядом с которым были дополнительные инструкции.
Я решил что идею надо развивать и создал отдельный файл для организмов. Организмами я называл классы включающие в себя несколько директив @extend:
Создав небольшой “зоопарк” из различных организмов, я решил что то сделать с классами которые требуют числовых значений для отступов и размеров.
С этим снова помогли справиться возможности препроцессора, с помощью которых я написал некоторые функции и добавил переменные.
Сначала я детально изучил графические проекты которые мне достаются от дизайнеров и выявил ряд закономерностей:
Теперь мы можем вызвать эту комбинацию из миксина и функции в любом удобном для нас месте:
И на выходе получим 4 класса для текста разных размеров:
Аналогичным образом создаются и вызываются функции для размеров заголовков, цветов текста и заливки, шрифтов и тд.
То есть работа над каждым проектом начинается с заполнения значений для переменных, а сами классы и функции кочуют из одного проекта в другой.
Я думаю многие из вас пользуются шаблонизаторами, и скорее всего – это Pug(который раньше назывался Jade).
Для атомарной верстки он необходим благодаря 3 вещам:
в удобный для редактирования:
или в другом варианте, с помощью цикла:
Это не менее удобно, ведь строка с нужными классами не повторяется больше одного раза.
Последнее уязвимое место данной методологии заключалось в том что в коде оставалось большое количество неиспользуемых классов. Но эта казалось бы серьезная проблемма легко решилась добавлением в сборщик проекта плагинов удаляющих ненужные классы.
Заключение
В заключении хотелось бы сказать следующее:
перед тем как начать пользоваться “почти атомарной методологией”, я долгое время использовал smacss и потом BEM. В итоге от bem я оставил лишь названия для классов требующих описания отступов и размеров, и иерархию хранения файлов и папок. Набор готовых классов и функций, я подключаю к проекту в качестве библиотеки.
Важный момент который хотелось бы отметить – это удобство верстки станиц и отдельных ее секций целиком. Благодаря микроклассам достаточно легко создать “скелет” страницы или секции в шаблонизаторе и только потом перейти к написанию для нее стилей.
Способы организации CSS-кода
Разработчик Бен Фрейн (Ben Frain) однажды заметил: «Писать CSS-код легко. Масшабировать и поддерживать его — нет».
К счастью, на просторах интернета можно найти множество решений этой проблемы. В данной статье рассмотрены основные киты структуры CSS-кода, а также интересные рыбы/млекопитающие поменьше.
Статья служит лишь памяткой или кратким справочником — для подробного ознакомления с методологиями настоятельно рекомендуется изучать оригинальную документацию.
Содержание
Пожалуй, самая популярная сейчас методология в мире. Название означает «Блок, элемент, модификатор».
Эти категории играют следующие роли в коде:
Такой подход позволяет избавиться от непредсказуемых последствий каскада и изолирует отдельные модули друг от друга.
Пример кода в стиле БЭМ:
Для удобства используются разные разделители между блоком и элементом и между блоком/элементом и модификатором; при этом можно использовать любые разделители, однако они должны быть одинаковыми в рамках одного проекта.
А теперь о бочках меда и ложках дегтя:
Сейчас так можно писать, используя как SASS, так и LESS.
И еще одно замечание — в оригинальной методологии БЭМ используются названия модификаторов, содержащие саму модифицируемую величину, например, button—sizeLarge. Сейчас в небольших проектах многие разработчики не указывают ее для лаконичности: button—large.
Здесь можно почитать про историю создания БЭМ.
OOCSS
OOCSS означает объектно-ориентированный CSS (Object-Oriented CSS). В этот подход заложены две основные идеи:
А теперь — две новости (как водится, хорошая и плохая):
Зато, как это иногда случается, некоторые идеи OOCSS вдохновили авторов на создание своих, более конкретных, способов структурирования кода — своеобразных форков OOCSS.
SMACSS
SMACSS расшифровывается как «масштабируемая и модульная архитектура для CSS» (Scalable and Modular Architecture for CSS).
Основная цель подхода — уменьшение количества кода и на упрощение поддержки кода.
Итак, Джонатан предложил разделить стили на 5 частей (в порядке включения их в документ):
Этот подход действительно позволяет упростить написание и поддержку кода и в последнее время привлекает достаточно большое количество разработчиков.
Atomic CSS
Atomic CSS, редко также ACSS — атомарный CSS. В некотором роде этот подход представляет собой OOCSS, возведенный в абсолют.
При использовании такого подхода для каждого повторно используемого свойства должен быть сформирован отдельный класс. Пример: стиль «margin-top: 1px» предполагает создание класса «mt-1», стиль «width: 200px» создание класса «w-200».
Такой стиль позволяет минимизировать объем CSS-кода за счет повторного использования деклараций, а также сравнительно легко вводить изменения в модули, к примеру, при изменении технического задания.
Однако у этого подхода есть существенные недостатки! Вот они:
«Огры как лук. У огров есть слои. И у лука есть слои. У тех и у других есть слои»
MCSS — многослойный CSS (Multilayer CSS). Этот стиль написания кода, зародившийся в компании «Одноклассники», предлагает разделить стили на несколько частей, называемых слоями.
AMCSS
Название подхода означает «Модули атрибутов для CSS» (Attribute Modules for CSS). Это достаточно необычный подход, упоминания которого, тем не менее, все чаще встречаются в блогах гуру разработки.
Если обобщить, этот способ является несколько более человеко-читаемым представлением БЭМ-структуры. Давайте рассмотрим пример:
Такая цепочка классов не очень приятна для глаз, поэтому давайте сгруппируем эти значения по атрибутам.
Во избежание коллизий имен неплохо бы добавить атрибутам неймспейсы, не так ли? Тогда код нашей кнопки примет следующий вид:
Если вы используете валидатор для проверки кода на корректность, не забывайте также добавить приставку «data-» перед названием атрибута.
Для записи CSS-кода используется малоизвестный селектор «
=» (IE7+), который работает как атрибут класса: выбирает элементы, значения атрибутов которых содержат указанные слова, разделенные пробелами. Так, селектор вида a[class
=«button»] аналогичен селектору a.link.button (даже по специфичности, так как специфичности селекторов по классу и по атрибуту равны друг другу!).
Ну как? Если вы считаете такой код слишком оригинальным, для вас существует менее радикальная форма использования AMCSS:
FUN означает «плоская иерархия селекторов, служебные стили, компоненты с неймспейсами» (Flat hierarchy of selectors, Utility styles, Name-spaced components). Ну или веселье =)
За каждой буквой названия стоит определенный принцип:
Такой подход накладывает достаточно мало требований по структуре кода и проекта, он лишь устанавливает предпочтительную форму записи селекторов и способ их использования в разметке. Но в небольших проектах этих правил может быть вполне достаточно для создания качественного кода.
Заключение
Как видите, среди этих подходов нет идеального — все они обладают своими плюсами и минусами.
Поэтому мне остается лишь напомнить вам, что ни один из этих подходов не является абсолютной догмой — вы можете взять подход из начать творить что-то свое, или создать новый подход с нуля. И, может быть, именно этот метод позволит вебу подняться на следующую ступень.
Atomic CSS
Плюсы перед семантической моделью (классической).
1. Независимость от имен. (Универсальность имен).
2. Универсальность классов.
3. Читабельность классов (При правильной организации, конечно же).
FAQ (Ответы):
1. Чем это не inline верстка в атрибуте style?
2. Чем это удобно, если очень много нужно писать классов в элемент?
3. А если у вас много одинаковых элементов ваш atomic сss сдуется, пфф?
А если их очень много и если вдруг нужно их все сразу изменить?
4. Что будет если макет предназначен только для обертки мощной Backend части, не будет ли избыток классов в html или другой разметке мешать Backend программистам?
5. Кто использует эту модель?(human proves)
Как выглядит атомарный класс.
Варианты: width100px, width-100px, w100px, w-100px, wh100px, wh-100px и т.д.
Можно писать, как вам удобно, но чтоб это передавало свойство. События делаются обычными псевдоклассами: hover, focus, active.
Инструменты для работы с Atomic CSS.
Orna и Atomizer
Atomizer – node.js модуль для создания Atomic CSS от Yahoo.
Как он работает? Вы пишете html разметку и в элементах пишете атомарные классы по структуре атомайзера. Атомайзер считывает документ и создает atomic.css файл с классами названия которых были прописаны в атрибутах class.
Пример:
class=»Bgc(#0280ae.5) C(#fff) P(20px)»
- При таком подходе:
Рекомендация: Atomizer хорош для больших сайтов, все компилируется в отдельный файл css, но сначала немного сложен.
Orna (OrnaJS) – javascript парсер на основе jquery, который работает в браузере на стороне клиента и подключается непосредственно в документ. В отличии от Атомайзера, который не подключается в документ, а подключается ранее сгенерированный им css файл. Классы Орна пишутся по определенной структуре, которая почти и местами вообще не отличается от css. Орна задает классы напрямую элементам без файла css. Вот и нюанс c js, классы задание ним не кэшируються и переопределяются с перезагрузкой страницы. Но это хорошо для динамики. По сути Орна это генератор атомарных классов. Супер для работы с ReactJS и Handlebars.JS. Есть также версия Орны для Node.js (Orna4Node), которая генерирует классы в CSS файл, как Atomizer.
Пример:
class=»background-color_red background-color_black_click color_white height_100px»
class=»bgc_red bgc_black_click c_white h_100px»
Орна поймет оба примера!
- При таком подходе:
Рекомендация: Орна парсит документ каждый раз при перезагрузке страницы, файлы не кэшируются, потому она лучше для небольших сайтов или как дополнение.
. Orna и Atomizer умеют работать с событиями мыши и дочерними элементами через родительский.
Общая рекомендация: разберитесь в Atomic CSS, не устраивайте холивары и пишите свое адекватное мнение в комментарии.
Хороший комплект для работы и динамического рендера(отрисовки) страницы: OrnaJS + ReactJS. Предварительное создание CSS: Orna4Node или Atomizer.
CSS for component-based frameworks
CSS is painful
CSS is a critical piece of the frontend toolkit, but it’s hard to manage, especially in large projects. Styles are written in a global scope, which is narrowed through complex selectors. Specificity issues, redundancy, bloat, and maintenance can become a nightmare. And modular, component-based projects only add to the complexity. ACSS enables you to style directly in your components, avoiding the headache of writing and managing stylesheets.
Style with class
Most approaches to styling inside components rely on inline styles, which are limiting. Atomic CSS, like inline styles, offers single-purpose units of style, but applied via classes. This allows for the use of handy things such as media queries, contextual styling and pseudo-classes. The lower specificity of classes also allows for easier overrides. And the short, predictable classnames are highly reusable and compress well.
Meet Atomizer
Colors
Variables
«Variables» are useful for theming but they can also be used to share a common value across style declarations.
In this example, brandColor is responsible for setting the text color, background color and border color, while columnWidth dictates the width of the first box and the left offset of its sibling.
Contextual selectors
In this example, two identical sets of boxes are styled differently depending on the class applied to their parent element.
