Почему UnoCSS?
Мотивация
Мы рекомендуем вам прочитать пост в блоге Reimagine Atomic CSS, написанный создателем UnoCSS, Энтони Фу, чтобы лучше понять мотивацию создания UnoCSS.
Чем UnoCSS отличается от X?
Windi CSS
UnoCSS был запущен одним из членов команды Windi CSS, и мы черпали огромное вдохновение из работы, проделанной нами в Windi CSS. Хотя Windi CSS больше не поддерживается активно (по состоянию на март 2023 года), вы можете рассматривать UnoCSS как «духовного наследника» Windi CSS.
UnoCSS наследует от Windi CSS принцип работы по запросу (on-demand), режим атрибутов, шорткаты, группы вариантов, режим компиляции классов и многое другое. Кроме того, UnoCSS создан с нуля с учётом максимальной расширяемости и производительности, что позволяет нам внедрять новые функции, такие как чистые CSS-иконки, атрибуты без значений, режим тегов, веб-шрифты и т. д.
Самое главное, что UnoCSS выделен в виде движка атомарного CSS, где все функции являются опциональными, что позволяет легко создавать собственные соглашения, собственную дизайн-систему и собственные пресеты — используя те комбинации функций, которые вам нужны.
Tailwind CSS
И Windi CSS, и UnoCSS черпали огромное вдохновение из Tailwind CSS. Поскольку UnoCSS создан с нуля, мы смогли окинуть взглядом то, как проектировался атомарный CSS в предшествующих решениях, и абстрагировать это в элегантный и мощный API. Учитывая совершенно разные цели проектирования, проводить прямое сравнение («яблоко с яблоком») с Tailwind CSS не совсем корректно. Но мы попытаемся перечислить несколько отличий.
Tailwind CSS — это плагин PostCSS, в то время как UnoCSS — это изоморфный движок с набором первоклассных интеграций с инструментами сборки (включая плагин PostCSS). Это означает, что UnoCSS гораздо более гибок в использовании в различных средах (например, CDN Runtime, который генерирует CSS «на лету») и имеет глубокую интеграцию с инструментами сборки для обеспечения лучшего HMR, производительности и удобства разработки (например, Инспектор).
Если оставить в стороне технические компромиссы, UnoCSS спроектирован так, чтобы быть полностью расширяемым и настраиваемым, тогда как Tailwind CSS более строг в своих правилах. Создание собственной дизайн-системы (или дизайн-токенов) поверх Tailwind CSS может быть сложным, и вы не можете по-настоящему отойти от соглашений Tailwind CSS. С UnoCSS вы можете построить практически всё, что захотите, имея полный контроль. Например, мы реализовали все утилиты, совместимые с Tailwind CSS, в рамках одного пресета, но также существует множество потрясающих пресетов от сообщества, реализованных с другими интересными философиями.
Благодаря гибкости, которую предоставляет UnoCSS, мы можем экспериментировать с множеством инновационных функций поверх него, например:
Из-за различий в целях проектирования по сравнению с Tailwind CSS, UnoCSS не поддерживает систему плагинов или конфигурации Tailwind CSS, что может усложнить миграцию с сильно кастомизированного проекта на Tailwind CSS. Это намеренное решение, принятое для того, чтобы сделать UnoCSS высокопроизводительным и расширяемым, и мы считаем, что этот компромисс того стоит.