Атомарный

CSS

Дмитрий Цысарь                      WSD в Киеве, 4.11.2017

БЭМ

API Яндекс Карт

Мой бекграунд

Что такое Atomic CSS?

Почему Atomic CSS это круто?

Разберём спорные моменты!

Мой опыт и сравнение с БЭМ

Как начать использовать?

Что такое

Atomic CSS?

Скорее всего вам знакомы утилитарные классы

.clearfix::after {

  content: "";
  display: block;
  clear: both;
}
.hidden {
  display: none !important
}

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

⭐ 117k

В bootstrap v4 ещё больше утилитарных классов!

.border* .d-* .flex-* .float-*
.position-* .w-* h-* .mw-* .mh-*
.m* .p* .text-<align> .align-*
.text-<color> .bg-<color>
.sr-only* .visible* .hidden*

 

Утилитарные классы это удобно

  1.  Удобно читать​
  2.  Удобно добавлять
  3.  Удобно удалять

Сколько раз мы пишем

одни и те же правила?

и т. д. и т. п...

display: block
display: flex
display: none
position: relative
position: absolute
position: fixed
text-align: center
text-decoration: none
text-transform: uppercase
font-size: 100%
font-weight: bold
line-height: 1

3... 8... 48... 100500?

А может быть

только 1 раз

Это могут быть

утилитарные классы

display-block

display-flex
display-none
position-relative

position-absolute
position-fixed
text-align-center

text-decoration-none
text-transform-uppercase
font-size-100

font-weight-bold
line-height-1

Классы могут быть

короткими

спасибо, авторам Emmet (aka Zen-coding) за стандартизацию 

d-b

d-f
d-n
pos-r

pos-a
pos-f
ta-c

td-n
tt-u
fz-100

fw-b
lh-1

Можно не писать CSS-правила,

а просто назначать готовые классы

Atomic CSS —

это архитектура CSS,

основанная на использовании атомарных утилитарных классов

Атом —

мельчайшая неделимая частица

ατομος —

неделимый, неразрезаемый

Почему Atomic?

Challenging

CSS Best Practices

Thierry Koblentz

🕒  21 октября 2013

<div class="Bfc M-10">
  <a href="http://twitter.com/thierrykoblentz"            
     class="Fl-start Mend-10">
    <img src="thierry.jpg" alt="me" width="40" />
  </a>
  <div class="Bfc Fz-s">@thierrykoblentz 14 minutes ago</div>
</div>

Atomizer —

инструмент для автоматической

генерации необходимых стилей

из разметки (HTML, JS...)

<div class="Pos(a)"></div>
.Pos\(a\) { position: absolute }

Функциональная нотация

Свойство ( значение )

Functional CSS = Atomic CSS

Пример — обычная кнопка

<button class="my-button">Primary</button>
.my-button {
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  background-color: #007bff;
  color: #fff;
}

Как это может быть в Atomic CSS?

<button class="
Bdc(t)
Bdw(1px)
Py(.375rem)
Px(.75rem)
Fz(1rem)
Lh(1.5)
Bdrs(.25rem)
Bgc(#007bff)
C(#fff)
">Primary</button>

Что в CSS?

.Bdc\(t\) { border-color: transparent }
.Bdw\(1px\) { border-width: 1px }
.Bdrs\(\.25rem\) { border-radius: .25rem }
.Bgc\(\#007bff\) { background-color: #007bff }
.C\(\#fff\) { color: #fff }
.Fz\(1rem\) { font-size: 1rem }
.Lh\(1\.5\) { line-height: 1.5 }
.Px\(\.75rem\) { padding-left: .75rem;
                 padding-right: .75rem }
.Py\(\.375rem\) { padding-top: .375rem;
                  padding-bottom: .375rem }

Утилитарные классы для всего

  • Простые селекторы
  • Псевдоклассы
  • Псевдоэлементы
  • Медиа-выражения
  • Контекстные селекторы
  • Можно использовать переменные
[<context>[:<pseudo-class>]<combinator>]<Style>[(<value>,<value>?,...)][<!>][:<pseudo-class>][::<pseudo-element>][--<breakpoint>]

Утилитарные классы для всего

<div class="Bgc(#0069d9):h">...</div>
.Bgc\(\#0069d9\)\:h:hover {
  background-color: #0069d9
}
<div class="context">
  <span class="context>D(n)"></span>
</div>
.context > .context\>D\(n\) { display: none }

Утилитарные классы для всего

<div class="Fz(20px) Fz(16px)--maw320px">
.Fz\(20px\) { font-size: 20px }

@media (max-width: 320px) {
  .Fz\(16px\)--maw320px { font-size: 16px }
}

Классика

  • Пишем HTML
  • Пишем CSS

Atomic CSS

  • Пишем HTML

CSS-in-JS

  • Пишем JS

Основное отличие

Почему Atomic CSS

это круто?

Легко

Точно

Быстро

Просто

Лёгкие файлы

 Bloat  

 

уменьшение  размера файлов стилей

Мы точно знаем источник

раздувания стилей

Это мы — разработчики!

Классика

  • Размер файлов растёт
  • Специфичность стилей растёт
  • Селекторы становятся длиннее, сложнее
  • Мы никогда не перестанем писать CSS

Atomic CSS

Чем старше проект, тем больше СSS

  • Пишем меньше CSS
  • Возможно не пишем вообще

gzip ❤

Высокий уровень сжатия 

из-за единобразия именования

Классика

35%

Atomic CSS

48%

Простые имена

  1. Решается одна из основных проблем программирования
     
  2. Глобальная область видимости больше
    не проблема

Простые стили

  1. Нет переопределений,
    нет войн специфичности,
    нет конфликтов
     
  2. Порядок атомарных классов в файле
    не имеет значения

Простая поддержка

  1. Мы же практически не пишем CSS-код :)
  2. Меньше кода — проще мейнтейнить

Maintainability

Точное назначение

Каждый класс имеет единственное предназначение 

C(red)
{ color: red }

Иммутабельность

Все атомарные классы иммутабельны!

C(red)
{ color: red }

Immutable CSS  by Harry Roberts, 2015

всегда

Меньше абстракций

для того чтоб применить одно свойство

не нужны абстракции

C(red)
{ color: red }

Меньше зависимостей

для того чтоб применять атомарные классы

не нужно создавать компоненты / блоки и т. п.

C(red)
{ color: red }

Консистентость дизайна

Можно наглядно применять ограниченный набор вариаций типографики, цветов, отступов и т. д.

C($red) C($yellow) C($blue)

Full Stack Radio Ep. 75  

Diana Mounter - Design Systems and Utility Classes at GitHub

25 октября 2017

Быстрая разработка

  • Не нужно править файлы стилей
  • Не нужно «грепать» по исходникам,       чтоб изменить стили
  • Не нужно дебажить код, который мы не пишем

Быстрые сайты :)

Re-use

Легко

Точно

Быстро

Просто

 

Реюзабельно

 

 

возможно использовать повторно

 

Максимальный,

бесконечный

реюз

 

Кеширование

между страницам / сервисами / веб-приложениями ...

Стили загруженные на одной странице

могут быть максимально использованы

на другой странице

Разберём спорные моменты!

HTML?

Раздувается?

Меньше стилей в CSS — больше классов в HTML

Размер СSS критичен

HTML??

Неудобно повторять наборы классов?

Используйте HTML-шаблонизаторы!

Записывайте наборы классов в переменные

  1. У классов меньше специфичность
  2. Классы можно закешировать
  3. Классы можно реиспользовать   
  4. Классы могут быть короче   
  5. Классы можно подвергать пост-обработке
  6. ​Инлайновые стили не поддерживают:
  • медиа-выражения
  • псевдоэлементы
  • псевдоклассы
  • контекстные селекторы

Инлайновые стили?

  • Использование миксинов / экстендов приводит к увеличению размера файла стилей и потенциально — к конфликтам                              
  • Атомарные стили проще, безопасней
    и наглядней

Препроцессоры?

  • Классы могут быть «семантическими»
  • Классы могут быть презентационными

Семантика?

Семантика?

About HTML semantics and front-end architecture  

Nicolas Gallagher, 2012

Defending Presentational Class Names

Philip Walton, 2013

Opinions of Leaders Considered Harmful

Thierry Koblentz, 2017

Редизайн?

  • Ожидание:
    я просто поменяю CSS
     
  • Реальность:
    в жизни всё сложнее и зачастую не ограничивается только изменениями в стилях

JavaScript?

 А что если у меня всё в джаваскрипте,

будет ли работать?

Подойдёт ли Atomic CSS

для моего проекта?

Если вы можете использовать утилитарные классы

Если у вас есть доступ к HTML

Да!

Не обязательно «атомизировать» все стили

ACSS FAQ

Если для изменения неких стилей

нужно редактировать несколько файлов, лучше использовать классический подход.

Мой опыт

и сравнение с БЭМ

Почему я вспомнил

про Atomic CSS

Я работал с БЭМ

У меня был блок, который я хотел модифицировать

<ul>
<ul>
margin
padding

внутри другого блока

Как это принято делать?

.b1 {
  margin-bottom: 1em
}
.b1--mod {
  margin-bottom: 0;
  padding-bottom: 2em;
}
.b2 .b1 {
  margin-bottom: 0;
  padding-bottom: 2em;
}

В чём тут проблема?

{
  margin-bottom: 1em; 
  margin-bottom: 0;
  padding-bottom: 2em;
}
<div class="b1 b1--mod"></div>

Я стараюсь делать так

<ul class="Mb(1em)"></ul>
<ul class="Mb(0) Pb(2em)"></ul>

Ещё примеры из жизни

.header
.header
.header--no-border
.header
.Bdbw(0)
border-bottom-width: 0

Мой любимый пример

Cколько нужно модификаторов?

.banner--mod-1 {
  background: ... ;

  & .banner__content { ... }

  & .banner__title { ... }


  & .banner__text { ... }
}

обычно делают один модификатор

с разными значениями

<a class="D(b) Pos(r) H(180px) C(#000) Ta(c) Bgc(#f5f5f5) Bgi($banner) Bgp(87%,50%)" href="...">
  <div class="Pos(a) T(50%)
  TranslateY(-50%) Start(7%) W(43%)">
    <p class="Fz(28px) Lh(1)
    Fw(500)">Верхняя одежда</p>
    <p class="Fz(14px) Mt(8px)">Для
    прохладной погоды</p>
  </div>
</a>

12 классов из 18-ти точно будут переиспользованы

CSS не существует

в отрыве от HTML

Стили применяются на определённые элементы,

с определёнными тегами

в определённом контексте

<nav class="nav">
  <ul class="nav-list">
    <li class="nav-item">
      <a class="nav-link">
.nav {}
.nav-list {}
.nav-item {}
.nav-link {}
<div class="b1">


<strong class="b2">

 

<a class="b3">

<button class="b4">

.b1 { display: block; ... }

 

.b2 { font-weight: bold; }

.b3 { border: 0; ... }

.b4 { text-decoration: none }

HTML                  НЕНУЖНЫЙ CSS :(

<div class="b">
  <div class="b__t1">
  <div class="b__t2">

 

.b { color: black }
.b__t1 { color: black }

.b__t1 { color: black }

БЭМ-классы

 

Атомарные классы

Стили, которые можно реиспользовать

JavaScript

 

Стили состояний, назначаемых через JS

 

Сложные,

уникальные стили

БЭМ + Atomic ≠

Франкеншейн

если разделить ответственности

Эволюция кодовой базы

📁 src
    📁 css
       📝...

       📝...

    📁 js
       📝...

       📝...

 

📁 src

    📁 blocks
        📁 ...

        📁 ...   

        📁 ...   

        📁 ...   

        📁 ...   

        📁 ...

        📁 ...

📁 src

    📁 atomic

        📝atomic.css

    📁 blocks
        📁 ...

        📁 ...   

        📁 ...  

Как я использую Atomizer

Gulp

Grunt

Webpack

Metalsmith

Как я использую Atomizer

atomizer *.html *.js -o style.scss

  • Кастомные паттерны

    MyPattern($0)

 

  • Кастомные хелперы

    MyHelper

  • Переменные

  • Брейкпойнты

  • Можно явно задать классы

  • Можно исключить классы из сборки

rules.js

сonfig.js

Без неймспейса

С неймспейсом

#ns .MyClass

 

0 1 1 0
.MyClass

 

0 0 1 0

CSS

SCSS

atomizer -o style.scss

less

Stylus

+ PostCSS

Честно про ограничения

Определённое количество аргументов 

Atomic(arg1,arg2...)


Atomic1(arg)
Atomic2(arg1,arg2)

Честно про ограничения

Нельзя получить двойной класс

.myclass.Atomic(arg)

Internet Explorer 7

Atomic(arg):h

Не поддерживаются

:nth-*()
:not()
:lang()

Честно про ограничения

Если захотелось странного :)

Atomic(arg)
{ arg: value }

X

_Atomic(arg)
+Atomic(arg)
~Atomic(arg)
>Atomic(arg)

Atomic(arg)
{ @include arg }

X

A_Atomic(arg)
AA_Atomic(arg)

Как начать

использовать?

Генерировать классы

препроцессором

 

или

 

написать вручную

Выбрать синтаксис

свойства

font-size
fontSize
FontSize
fz
Fz

значения и разделитель

property:value

property-value

property_value

property(value)

 

<property><separator><value>

а ещё псевдоклассы, псевдоэлементы

и медиа-выражения...

Выбрать библиотеку

или даже написать свою

Atomizer

Tachyons

Basscss

Solid

Shed

Expressive CSS

Выбрать библиотеку

Tailwindcss

v 0.1.0, 1 ноября 2017

Варианты для Реакта

CSX

Styletron

Pre-style

Что делать

с «семантическими» классами?

1. Использовать для js-хуков

 

2. Использовать для сложных стилей,

    например уникальные бекграунды

    или сложные селекторы (~ > + *)

Рефакторим?

Проанализиуем

СSS Stats

статистика вашего CSS

Atomize IO

прогноз профита от перехода на Атомик

СSS Purge   

сравнение популярных сайтов и библиотек

Test My CSS

ещё статистика

atomize-io.herokuapp.com

Последовательность

подключения

в начале СSS

 

или

 

в самом конце CSS

Рефакторинг

1. Находим самые частые повторения стилей

    и переводим на Atomic

 

2. Переписываем блоки по очереди,

    начиная с модификаторов

 

3. Имена блоков можно переносить в дата-атрибуты,     

    html-комментарии или вовсе удалять

Full re-write in 10 days with Tachyons and Functional CSS

 

Переход на Tachyons привёл

к уменьшению размера файлов на 50%, деклараций стало на 75% меньше

 

Simon Vrachliotis, 2017

Истории успеха #1

Rethinking CSS








John Polacek, 2017

Истории успеха #2

Истории успеха #3

Fast By Default: Modern Loading Best Practices

Published on Oct 23, 2017

Кто ещё использует?

Yahoo!

 

Tinder

npmjs.com

fontawesome.com

play.webvr.rocks

(mozilla)

...

Atomizer

Tachyons

Cсылки

Ещё доклады

Atomic CSS в дикой природе

Савва Михалевский, 2017

Functional Immutable CSS

Алексей Тополянский, 2016

Вопросы?

Предложения, пожелания :)

@dmytrocisar

Фоновые изображения: flickr.com/photos/electroni-k