Находки в опенсорсе: “mlut - новое слово в подходе Atomic CSS mlut (читается как млат)

mlut - новое слово в подходе Atomic CSS

mlut (читается как млат) - это инструмент для верстки в подходе Atomic #css, с которым можно создавать стили любой сложности. Что-то похожее на Tailwind, но по некоторым параметрам превосходит все популярные аналоги.

Atomic CSS - это методология верстки, в которой мы используем маленькие атомарные классы, каждый из которых делает одно действие. Эти классы называют утилитами. Обычно они применяет одно CSS-свойство (например, цвет текста), но не обязательно одно. Выглядит в коде это примерно так:


<button class="D-ib P1r Bgc-blue_h">
  Submit
</button>


.D-ib {
  display: inline-block;
}

.P1r {
  padding: 1rem;
}

.Bgc-blue_h:hover {
  background-color: blue;
}

Преимущества такого подхода

1. Тратим меньше мыслетоплива: не думаем о нейминге сущностей, структуре каталогов
2. Меньше CSS на клиенте: реиспользуем одни и те же утилиты, а новые стили почти перестают добавляться
3. Быстрее пишем стили: короткие классы, нет переключения файлов
4. Можно применять на любом стеке: JS SPA, Ruby, Clojure, etc

Возвращаясь к mlut, вот чем он отличается от конкурентов

Строгий нейминг

Tailwind:
- flex => display: flex, но flex-auto => flex: 1 1 auto
- tracking-wide => letter-spacing: 0.025em
- justify-* => content, items, self?

mlut:
- Js-c => justify-self: center
- Bdr => border-right: 1px solid
- Bdrd1 => border-radius: 1px

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

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

Почти произвольные значения by design

- значения утилит: Ml-1/7 =>


margin-left: -14.3%

- states: Bgc-red200_h,f =>


.Bgc-red200_h\,f:hover,
.Bgc-red200_h\,f:focus {
  /* ... */
}

- at-rules: @:p-c,w>=80r_D-f =>


@media (pointer: coarse), (min-width: 80rem) {
  /* ... */
}

Хорошая эргономика

Более короткие className:


<!-- Tailwind -->
<div class="relative -bottom-px col-span-full col-start-1 row-start-2 h-px bg-(--cardBg)"></div>

<!-- mlut -->
<div class="Ps B-1 Gc1/-1 Gcs1 Grs2 H1 Bgc-$cardBg"></div>

Удобный синтаксис для сложных утилит

Tailwindcss:
- [@media(any-hover:hover){&:hover}]:opacity-100
- text-[length:var(--myVar,1.3rem)]
- supports-[margin:1svw]:ml-[1svw]

mlut:
- @:ah_O1_h =>


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

- Fns-$myVar?1.3 =>


font-size: var(--ml-myVar, 1.3rem);

- @s_Ml1svw =>


@supports (margin-left: 1svw) {
  .\@s_Ml1svw {
    margin-left: 1svw
  }
}

Удобно расширять

Утилиты, states и кастомные at-rules добавляются парой строк кода


@use 'mlut' with (
  $utils-data: (
    'utils': (
      'registry': (
        'Mil': margin-inline,
      ),
    ),
  ),
);

@include mlut.apply('Mil-13');

// CSS

.Mil-13 {
  margin-inline: -13px;
}

Чем еще может похвастаться mlut

- Написан на Sass, все плюсы которого идут в комплекте
- Доступен как JIT (on demand), так и AOT режим работы
- Отличная кастомизация

Состояние проекта

Что реализовано на сегодня:

- Генератор утилит почти любой сложности
- JIT-движок, который умеет генерировать утилиты из HTML/JSX/etc
- CLI с минификацией и автопрефиксером
- Плагины для сборщиков фронтенда: Webpack, Vite и Rollup
- Документация
- Интерактивный мини-курс по инструменту совместно с HTML Academy
- Больше технических деталей есть в расшифровке доклада с HolyJS.

Автор будет благодарен любому фидбеку и особенно звездам на гитхабе!