Дима Попов, 2016 OrnaOrg

Atomic CSS



Atomic СSS - это модель построения CSS кода, при которой почти каждому СSS свойству соответствует свой класс.
Atomic CSS активно разрабатывается командой Atomizer, Orna, Yahoo и одинокими рейнджерами-программистами.

Плюсы перед семантической моделью (классической).

1. Независимость от имен. (Универсальность имен).

В атомном классе имя в принципе не несет семантического (указательного) значения, а css значение и свойство. Поэтому вы можете применять его везде, без разрушения логики. То есть, если у вас есть класс .button (кнопка), то его не корректно применять например к форме.

2. Универсальность классов.

Так как классы не только имеют универсальное имя, но и одно значения (не всегда одно), при создании небольшого количества таких классов вы можете иметь большое число комбинаций.
Для чайников: элементам можно задавать по несколько классов. Вы можете создавать классные вещи комбинацией уже описанных классов, а не их созданием.

3. Читабельность классов (При правильной организации, конечно же).

Если человек видит класс с названием width100px, он сразу поймет что он задает, не смотря в код.

FAQ (Ответы):

1. Чем это не inline верстка в атрибуте style?

На первый взгляд может возникнуть такой вопрос, и можно подумать что это то же самое, но это только на первый взгляд. Разница в том, что инлайн стили не кэшируются, имеют большой приоритет и сложный доступ, что очень усложняет роботу с ними и их динамическую замену.

2. Чем это удобно, если очень много нужно писать классов в элемент?

Реально при создании одного класса и задания ему свойств вы пишете меньше чем когда бы задавали их прямо в элементе, вам ведь еще нужно каждому атомарному классу селектор и скобки дописать. Это можно не делать, и свойства не дублировать, потому что есть крутые инструменты (Atomizer и Orna) для работы с атомарным css, о которых я дальше расскажу.

3. А если у вас много одинаковых элементов ваш atomic сss сдуется, пфф?

Это опять же только на первый взгляд, и ничего не сдуется. Для начала разберемся, если вы вашим одинаковым элементам задаете класс, вам нечего не стоит записать несколько классов.

А если их очень много и если вдруг нужно их все сразу изменить?

Если будет нужно изменить пачку элементов, может возникнут трудность, когда не грамотно построена атомная модель. Что бы это хорошо решить, можно затянуть все эти элементы в родительский и в родительском записать стили, но для всех выбранных дочерних элементов.
Можно с помощью javascript выборки задать группе элементов определенные классы, но при таком подходе есть нюанс о котором походу.
Еще метод решения этой задачи подключить css препроцессор, эта часть для понимающих. В общем, подключить препроцессор, создать в нем атомные классы, а потом вывести их как примеси в один и задать этой группе элементов. Да, при работе с препроцессорами также можно опираться на атомарною модель! Кстати препроцессоры очень для этого хороши, потому, как в большинство из них, уже вынесены решения из атомарной css. Но это не атомарный css, в них также есть те проблемы, что и в css, проблема с семантикой имен, которая пущена на произвол пользователя и наследование, что также пущено на произвол, и из-за этого, даже опытные разработчики, бывает, загоняют себе в тупик. Только не надо писать что это из-за того, что руки не истого места растут, и что с вами такого никогда не было.

4. Что будет если макет предназначен только для обертки мощной Backend части, не будет ли избыток классов в html или другой разметке мешать Backend программистам?

Что можно сказать, будет, а если нет то у вас золотой Backend программист, но если он такой, все равно не надо усложнять ему жизнь. Для того чтобы не усложнять ему жизнь нужно или расспросить Backend программиста какую разметку он хочет видеть и от этого уже плясать, или все грамотно продумать чтобы все было чисто и удобно вам и ему. Это реально если продумать и если кто не знал над css тоже надо подумать и сделать рефакторинг.

5. Кто использует эту модель?(human proves)

Открою вам секрет отчасти почти все. То бишь создание примесей в препроцессорах типа Less, создание хотя бы одного класса с одним значением и логичным названием уже атомарный CSS, то что почти все используют можно доказать если создать поиск в github по коду. Фул стеково, то есть полностью по ней пишут многие, но это совсем не обязательно! Это надо понимать, вообще фул стековая верстка на любом, может бить не удобной в определенных моментах. Не надо все возводить в абсолют.

Ближе к делу!!!

Как выглядит атомарный класс.

.width100px{ width: 100px; }

.width100\%{ width: 100%; }


Варианты: width100px, width-100px, w100px, w-100px, wh100px, wh-100px и т.д.
Можно писать, как вам удобно, но чтоб это передавало свойство. События делаются обычными псевдоклассами: hover, focus, active.

Инструменты для работы с Atomic CSS.

Orna и Atomizer

Atomizernode.js модуль для создания Atomic CSS от Yahoo.

Как он работает? Вы пишете html разметку и в элементах пишете атомарные классы по структуре атомайзера. Атомайзер считывает документ и создает atomic.css файл с классами названия которых были прописаны в атрибутах class.

Пример:

class="Bgc(#0280ae.5) C(#fff) P(20px)"
    При таком подходе:

  1. Все классы не inline style, если вы не понимаете разницу посмотрите спецификацию CSS.
  2. Нет ненужных классов.

Рекомендация: Atomizer хорош для больших сайтов, все компилируется в отдельный файл css, но сначала немного сложен.

acss.io



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"

Орна поймет оба примера!
    При таком подходе:

  1. Всегда можно изменить классы и Орна их считает, не нужно писать сss.
  2. Можно легко динамически изменять классы и рендерит как все так и определение элементы отдельно.

Рекомендация: Орна парсит документ каждый раз при перезагрузке страницы, файлы не кэшируются, потому она лучше для небольших сайтов или как дополнение.

ornaorg.github.io

!!! Orna и Atomizer умеют работать с событиями мыши и дочерними элементами через родительский.

Общая рекомендация: разберитесь в Atomic CSS, не устраивайте холивары и пишите свое адекватное мнение в комментарии.
Хороший комплект для работы и динамического рендера(отрисовки) страницы: OrnaJS + ReactJS. Предварительное создание CSS: Orna4Node или Atomizer.

Дополнение:

==1== ==2== ==3== ==4== ==5==