Atomic CSS: верстка и легкость бытия

Atomic CSS:
верстка и легкость бытия

Валентин Ульянов

Обо мне

В IT больше 8 лет
Делаю бэкенд на Node.js и тулинг
Разрабатываю open source-проект
Выступаю на конференциях и веду
IT-сообщество в Питере на 500+ человек

Я и Atomic CSS

В теме с 2018

Я и Atomic CSS

В теме с 2018
Смотрел все инструменты, у которых >20 звезд на гитхабе

Я и Atomic CSS

В теме с 2018
Смотрел все инструменты, у которых >20 звезд на гитхабе
3 года карьеры много верстал

Я и Atomic CSS

В теме с 2018
Смотрел все инструменты, у которых >20 звезд на гитхабе
3 года карьеры много верстал
В разработку своего инструмента вложил >1000 часов

Содержание

Проблемы верстки
Atomic CSS как решение
Разбор мифов
Применение на практике
Заключение

Проблемы верстки

Слайд из старого доклада про БЭМ — youtube.com/watch?v=n0iF2zxa3DY

Стандартные вопросы БЭМ

Блок это или элемент?

Стандартные вопросы БЭМ

Блок это или элемент?
Делать микс или модификатор?

Стандартные вопросы БЭМ

Блок это или элемент?
Делать микс или модификатор?
Структура каталогов?

Продвинутые вопросы БЭМ

Уровни переопределения

Продвинутые вопросы БЭМ

Уровни переопределения
Собирать много блоков без коллизий

Продвинутые вопросы БЭМ

Уровни переопределения
Собирать много блоков без коллизий
Автоматизация создания сущностей

Скриншот с bem-tools — ru.bem.info/tutorials/classic/quick-start-static

Современные подходы к CSS

Scoped-решения

Современные подходы к CSS

Scoped-решения
CSS-in-JS

Современные подходы к CSS

Scoped-решения
CSS-in-JS
Shadow DOM

Scoped-решения

Пишем CSS как обычно

Scoped-решения

Пишем CSS как обычно
Переключение контекста

Scoped-решения

Пишем CSS как обычно
Переключение контекста
Не для каждого стека

Scoped-решения

Пишем CSS как обычно
Переключение контекста
Не для каждого стека
Большой бандл CSS*

*Иногда можно сделать аглификацию, но это не точно

CSS-in-JS

Пишем CSS не как обычно

CSS-in-JS

Пишем CSS не как обычно
Ограничения инструмента, баги, etc.

CSS-in-JS

Пишем CSS не как обычно
Ограничения инструмента, баги, etc.
Не для каждого стека

CSS-in-JS

Пишем CSS не как обычно
Ограничения инструмента, баги, etc.
Не для каждого стека
Растет размер бандла*

*При рантайм-решениях

Shadow DOM

Сложности с a11y

Shadow DOM

Сложности с a11y
Сильно зависит от стека

Shadow DOM

Сложности с a11y
Сильно зависит от стека
Подводные камни с SSR*

*Declarative shadow DOM поддерживается, но не идеально

Почему Atomic CSS

Тратим меньше мыслетоплива: названия сущностей, структура каталогов

Почему Atomic CSS

Тратим меньше мыслетоплива: названия сущностей, структура каталогов
Меньше CSS на клиенте: стили перестают добавляться

Почему Atomic CSS

Тратим меньше мыслетоплива: названия сущностей, структура каталогов
Меньше CSS на клиенте: стили перестают добавляться
Быстрее пишем стили: короткие классы, переключение файлов

Почему Atomic CSS

Тратим меньше мыслетоплива: названия сущностей, структура каталогов
Меньше CSS на клиенте: стили перестают добавляться
Быстрее пишем стили: короткие классы, переключение файлов
Stack agnostic: можно применять на любом стеке

% использования Tailwind за последине годы в State Of CSS — 2022.stateofcss.com/en-US/css-frameworks

Сайт Lemon Squeezy — tailwindcss.com/showcase/lemon-squeezy

Сайт The Verge — tailwindcss.com/showcase/the-verge

Atomic CSS как решение

Экономия мыслетоплива

Экономия мыслетоплива

forecast-briefly__day-link

Как назвать? 🤔

fact__hour

Как назвать? 😉

D-ib Mnw9u P0;9 Txa

Как назвать? 🥲

sc-a9fb3bce-4

Малый размер стилей

График уменьшения размера CSS при переходе на Atomic — johnpolacek.github.io/rethinking-css

Пример уменьшения размера CSS при переходе на Atomic — youtu.be/2-q4asoHUqU?si=QSlO9xGvF-bQuKDW&t=2241

Сравнения размера CSS популярных сайтов от Yahoo — haikudeck.com/atomic-css-science-and-technology-presentation-dJ0xlFjhBQ

From styled-components to Tailwind

График улучшения метрики INP в Web Vitals — seekandhit.com/engineering/optimising-style-for-speed-our-journey-from-styled-components-to-tailwind-css/

Скорость разработки

Your productivity is incredibly high because your brain doesn’t need to context switch between markup and stylesheet.

Simon Vrachliotis

Full re-write in 10 days with tachyons and functional CSS: A case study

...we have seen a significant improvement in our development speed and the feedback has generally been positive.

Nikola Novak

Optimising Style for Speed: Our Journey from styled-components to Tailwind CSS

Мем: сложна — media.2x2tv.ru/mems-so-difficult/

Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity

Сокращения

Лаконичный код
Удобнее писать
Чуть меньше вес кода

Мем с Гарольдом: лаконичный код, удобнее писать

Сокращения

Лаконичный код
Удобнее писать
Чуть меньше вес кода

Есть порог входа
Подойдут не всем

Алгоритм сокращений

Позволяет избежать коллизий с новыми свойствами/значениями в CSS

Алгоритм сокращений

Позволяет избежать коллизий с новыми свойствами/значениями в CSS
Возможность выводить свойства "в голове", а не зазубривать их

Общий алгоритм сокращений кратко

Находим свойства, которые начинаются с одинаковой буквы

Общий алгоритм сокращений кратко

Находим свойства, которые начинаются с одинаковой буквы
Составляем их рейтинг

Общий алгоритм сокращений кратко

Находим свойства, которые начинаются с одинаковой буквы
Составляем их рейтинг
Выделяем группы

Общий алгоритм сокращений кратко

Находим свойства, которые начинаются с одинаковой буквы
Составляем их рейтинг
Выделяем группы
Составляем сокращения внутри групп

I. Алгоритм сокращения одной сущности

Название сокращаем до первой буквы свойства/значения

color => C

II. Алгоритм сокращения одной сущности

Если название из N слов, то берется первая буква из каждого слова

color-adjust => Ca

III. Алгоритм сокращения одной сущности

Если два названия имеют одну и ту же начальную букву, то в следующем названии при сортировке их по рейтингу добавляется буква

III. Алгоритм сокращения одной сущности

Если два названия имеют одну и ту же начальную букву, то в следующем названии при сортировке их по рейтингу добавляется буква

color => C
cursor => Cs

IV. Алгоритм сокращения одной сущности

Если название из N слов, то буква добавляется в соответствующем по порядку слове

IV. Алгоритм сокращения одной сущности

Если название из N слов, то буква добавляется в соответствующем по порядку слове

color => C
cursor => Cs
color-scheme => Csc

I. Порядок добавления буквы

Согласная следующего слога

cursor => Cs

I. Порядок добавления буквы

Согласная следующего слога

cursor => Cs

Если следующий слог начинается на гласную, то берется ближайшая предыдущая согласная от нее

II. Порядок добавления буквы

Следующая согласная

content => Сt
contain => Cn

III. Порядок добавления буквы

Следующая гласная (без перескока через согласную)

content => Сt
counter-increment => Coi

Ai

Ai =>
align-items

Txt

Txt =>
text-transform

Ts

Ts => transition

Fls

Fls =>
flex-shrink

Utility components syntax

Синтаксис, в котором утилита разделяется на компоненты, каждый из которых, соответствует части CSS-правила

Utility components syntax

@:ah_O1_h

Utility components syntax

@:ah_O1_h =>

				@media (any-hover) {
				 
				 
				 
				}

Utility components syntax

@:ah_O1_h =>

				@media (any-hover) {
				  .\@\:ah_O1_h { 
				 
				  }
				}

Utility components syntax

@:ah_O1_h =>

				@media (any-hover) {
				  .\@\:ah_O1_h { 
				    opacity: 1
				  }
				}

Utility components syntax

@:ah_O1_h =>

				@media (any-hover) {
				  .\@\:ah_O1_h:hover {
				    opacity: 1
				  }
				}

CSS at-rule: брейкпоинты, @supports, etc.

CSS at-rule: брейкпоинты, @supports, etc.
pre-states — часть селектора перед классом утилиты

CSS at-rule: брейкпоинты, @supports, etc.
pre-states — часть селектора перед классом утилиты
Имя
Значение

CSS at-rule: брейкпоинты, @supports, etc.
pre-states — часть селектора перед классом утилиты
Имя
Значение
post-states — часть селектора после класса утилиты

Мифы

То же самое, что inline-стили

Короткий ответ — нет

Длинный ответ

Это для тех, кто плохо знает CSS

Atomic CSS — низкоуровневый

Чем лучше вы знаете CSS...

Тем лучше будет ваш код
Тем больше вы сможете сделать на чистом CSS

❌

❌

✅

❌

❌

✅

Bgc-red_h,fv

❌

✅

Bgc-red_h,fv =>

				.Bgc-red_h\,fv:hover,
				.Bgc-red_h\,fv:focus-visible {
				  background-color: red
				}

@s:apcr4/3@:dm_Mxw40u

@s:apcr4/3@:dm_Mxw40u =>

				@supports (aspect-ratio: 4/3) {
				 
				 
				 
				 
				 
				}

@s:apcr4/3@:dm_Mxw40u =>

				@supports (aspect-ratio: 4/3) {
				  @media (display-mode: fullscreen) {
				 
				 
				 
				  }
				}

@s:apcr4/3@:dm_Mxw40u =>

				@supports (aspect-ratio: 4/3) {
				  @media (display-mode: fullscreen) {
				    .\@s\:apcr4\/3\@\:dm_Mxw40u {
				 
				    }
				  }
				}

@s:apcr4/3@:dm_Mxw40u =>

				@supports (aspect-ratio: 4/3) {
				  @media (display-mode: fullscreen) {
				    .\@s\:apcr4\/3\@\:dm_Mxw40u {
				      max-width: 10rem
				    }
				  }
				}

Проблематично реиспользовать стили, особенно вне компонентов

`@apply` ❌

Алиасы ✅

Преимущества алиасов

Существуют только в build-time — реиспользуются имеющиеся утилиты

Преимущества алиасов

Существуют только в build-time — реиспользуются имеющиеся утилиты
Меньше чем обычных классов — (почти) нет проблем с неймингом

Преимущества алиасов

Существуют только в build-time — реиспользуются имеющиеся утилиты
Меньше чем обычных классов — (почти) нет проблем с неймингом
Можно редактировать in-place через замену подстрок

Слишком длинные className

Сравнение длины `class`

Сравнение длины `class`

Ml32_+:&

Ml32_+:& =>

				.Ml32_\+\:\& {
				  margin-left: 32px;
				}

Ml32_+:& =>

				.Ml32_\+\:\& + .Ml32_\+\:\& {
				  margin-left: 32px;
				}

haikudeck.com/atomic-css-science-and-technology-presentation-dJ0xlFjhBQ

Применение
на практике

Best practices

Custom properties

Best practices

Custom properties
Современные возможности CSS

Best practices

Custom properties
Современные возможности CSS
Работа с контекстом

Custom properties

Прокидывание стилей в компонент
Цвета и темы

Прокидывание стилей

Компонент, который принимает сверху custom properties

Bgc-$cardBgc?#ccc

Bgc-$cardBgc?#ccc =>

				.Bgc-\$cardBgc\?\#ccc {
				  background-color: 
				}

Bgc-$cardBgc?#ccc =>

				.Bgc-\$cardBgc\?\#ccc {
				  background-color: var(--ml-cardBgc, #ccc);
				}

Прокидывание стилей

Использование компонента, который принимает сверху custom properties

lg_-CardImgWidth350

lg_-CardImgWidth350 =>

				@media (min-width: 992px) {
				  
				    
				  
				}

lg_-CardImgWidth350 =>

				@media (min-width: 992px) {
				  .lg_-CardImgWidth350 {
				    
				  }
				}

lg_-CardImgWidth350 =>

				@media (min-width: 992px) {
				  .lg_-CardImgWidth350 {
				    --ml-cardImgWidth: 350px;
				  }
				}

Прокидывание стилей

Прокидывание сразу нескольких стилей

Компонент, который принимает custom properties в сокращенное свойство

Цвета и темы ❌

Неправильная стилизация цветов компонента

Цвета и темы ❌

Плохой вариант добавления темной темы для компонента

Цвета и темы ✅

Цвета и темы: переключение ✅

Современный CSS

Container queries
Псевдокласс :has()

Container queries

Container queries

Container queries

Container queries

@c:w>=520_Gtc-t2

@c:w>=520_Gtc-t2 =>

				@container (min-width: 520px) {
				  .\@c\:w\>\=520_Gtc-t2 {
				    grid-template-columns: repeat(2, minmax(0, 1fr);
				  }
				}

Кадр из фильма, где священник говорит: 'ну нафиг'

Псевдокласс `:has()`

Правило с :has() будет применено, если хотя бы 1 из селекторов, переданных агрументом в :has(), выберет хотя бы 1 элемент

Псевдокласс `:has()`

Псевдокласс `:has()`

Псевдокласс `:has()`

Форма с несколькими полями и выделенным невалидным полем

Псевдокласс `:has()`

Ol3;red;dh_has(ui)

*Будет доступно в @mlut/core v2.2.0

Ol3;red;dh_has(ui) =>

				.Ol3\;red\;dh_has\(ui\):has(:user-invalid) {
				  outline: 3px red dashed;
				}

*Будет доступно в @mlut/core v2.2.0

Работа с контекстом

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

Работа с контекстом

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

Обозначается как ^ в синтаксисе утилит.

^:lc:>_D-f

^:lc:>_D-f =>

				.-Ctx:last-child > .\^\:lc\>_D-f {
				  display: flex
				}

Контекст

Можно использовать с любыми утилитами

Контекст

Можно использовать с любыми утилитами
Можно как угодно комбинировать в states

Контекст

Можно использовать с любыми утилитами
Можно как угодно комбинировать в states
Может быть именованным

^one:h_C-red =>

				.-Ctx-one:hover  .\^one\:h_C-red {
				  color: red
				}

Техники работы с контекстом

Group state: hover/focus/etc.

Техники работы с контекстом

Group state: hover/focus/etc.
Стилизация элемента компонента

Техники работы с контекстом

Group state: hover/focus/etc.
Стилизация элемента компонента
CSS-only-интерактивность

Group state

Group state

Group state

Стилизация элемента компонента

Карточка внутри ссылки с измененными стилями кнопки

Стилизация элемента компонента

Код: карточка внутри ссылки с измененными стилями кнопки

Стилизация элемента компонента

CSS-only-интерактивность

Форма с несколькими полями и подсказкой к невалидному полю

CSS-only-интерактивность

Код формы с несколькими полями и подсказкой к невалидному полю

Кейсы

Большие проекты на Atomic CSS

The Verge — Tailwind, Next.js, React

Большие проекты на Atomic CSS

The Verge — Tailwind, Next.js, React
Lemon Squeezy — Tailwind, Laravel, Vue

Большие проекты на Atomic CSS

The Verge — Tailwind, Next.js, React
Lemon Squeezy — Tailwind, Laravel, Vue
Yahoo — Atomizer

Заключение

Хорошо подходит для

Лендинг — Netflix Global Top 10

Хорошо подходит для

Лендинг — Netflix Global Top 10
Объемный сервис, контент-first — Der Spiegel

Хорошо подходит для

Лендинг — Netflix Global Top 10
Объемный сервис, контент-first — Der Spiegel
Продукт (выше) среднего масштаба — Tinder

Вряд ли подойдет для

Rich UI — Google docs
Огромный продукт/экосистема — Яндекс

Альтернативы

Много динамики: CSS-in-JS

Альтернативы

Много динамики: CSS-in-JS
Rich UI: Canvas, WASM, $mol

Альтернативы

Много динамики: CSS-in-JS
Rich UI: Canvas, WASM, $mol
Огромный продукт/экосистема: $mol

Логотип $mol — mol.hyoo.ru/#!section=docs/=xwq9q5_f966fg

Инвестиционная история

Лучше день потерять, потом за 5 минут долететь

Выводы

Не 1 фреймворк

Выводы

Не 1 фреймворк
Не замена CSS

Выводы

Не 1 фреймворк
Не замена CSS
Методология

Вопросы?

Валентин Ульянов

Презентация: 150.lv/t/acss

Оцените доклад: