mlut
mlut (читается как «млат») — это инструмент для верстки в подходе Atomic CSS, с которым можно
создавать стили любой сложности. Что-то похожее на Tailwind, но по некоторым параметрам
превосходит все популярные аналоги.
Atomic CSS — это методология верстки, в которой мы используем маленькие атомарные классы,
каждый из которых делает одно действие. Эти классы называют утилитами. Обычно они
применяют одно CSS-свойство (например, цвет текста), но не обязательно одно.
Выглядят они примерно так: D-ib, Bgc-blue_h.
Преимущества такого подхода:
1. Тратим меньше мыслетоплива: не думаем о нейминге сущностей, структуре каталогов.
2. Меньше CSS на клиенте: реиспользуем одни и те же утилиты, а новые стили почти перестают добавляться.
3. Быстрее пишем стили: короткие классы, нет переключения файлов.
4. Можно применять на любом стеке: JS SPA, PHP, Clojure, etc.
Ключевые особенности mlut:
1. Краткий и строгий нейминг. Сокращения основаны на популярности свойств CSS и составлены
по единому алгоритму. Если вы знаете CSS, то вы почти знаете mlut.
2. Богатый и нативный синтаксис. Это как Vim для CSS. Удобно создавать сложные стили с
помощью мощного синтаксиса, концептуально близкого к CSS.
3. Написан на Sass. Используйте всю мощь препроцессора в рукописном CSS и легко связывайте его с утилитами.
Еще mlut удобно расширять и кастомизировать.
Что реализовано на сегодня:
• генератор утилит почти любой сложности;
• JIT-движок, который умеет генерировать утилиты из HTML/JSX/etc;
• CLI с минификацией и автопрефиксером;
• плагины для сборщиков фронтенда: Webpack, Vite и Rollup.
Совместно с HTML Academy готовится интерактивный мини-курс по инструменту, первый урок уже вышел.
Проект является результатом глубокого ресерча и 1000+ часов труда, об этом есть доклады и статьи на Хабре.
Сайт проекта: https://mlut.style/
