Авторы бросают вызов популярной библиотеке Tailwind и мигрируют к чистому CSS с семантическим HTML. Автор, который начинал с энтузиазма восемь лет назад, недавно провел неделю, перенося сайты от утилитарного подхода к более осознанной структуре кода, и нашел в этом процессе массу удовольствия. Изначально он чувствовал неуверенность в навыках структурирования стилей, но изучение блогов вроде «A whole cascade of layers» изменило его мнение. Главные выводы таковы: любая код-база CSS требует системы для управления макетами, шрифтами и цветами, иначе хаос неизбежен.
В новом подходе автор адаптирует концепции Tailwind, но отказывается от жестких ограничений. Сброс стилей «preflight» из tailwind.css скопирован полностью, так как привычка к правилам вроде * { box-sizing: border-box; } слишком велика для отказа. Основу стиля составляют компоненты, каждый из которых живет в отдельном файле со своим уникальным классом. Это предотвращает случайные конфликты: изменение CSS для компонента .zine не сломает другие части сайта. Внутри файлов используются вложенные селекторы для управления состояниями, например горизонтальным или вертикальным режимом, а также ховерами. Программаत्मिक изоляция через веб-компоненты пока не применяется, но дисциплина уже дает результат.
Для обеспечения консистентности созданы переменные в файле colours.css, где перечислены все оттенки сайта, например --pink или --orange. Аналогично реализована система размеров: вместо запоминания единиц em или px, автор использует переменные вроде --size-lg, что чуть громоздче, но прозрачнее. Утилитарные классы вроде .sr-only для скринридеров также перенесены. Базовые стили остаются минималистичными: здесь задаются ширина колонок секций и цвет ссылок. Подход к отступам изменился кардинально: раньше они накладывались хаотично, теперь внешние компоненты ответственны за间距 между дочерними элементами.
Адаптивная верстка теперь строится на гибких CSS Grid-сетках. Вместо множества медиа-запросов автора вводит auto-fit для автоматического переключения между одной и двумя колонками и использует мощную функцию grid-template-areas, которая недоступна в Tailwind. Для сборки проектов в продакшн задействуется esbuild, так как это статичный бинарник на Go, базирующийся на веб-стандартах. Перенос от Tailwind обусловлен тем, что библиотека с 2018 года требует сложной системы сборки, создавая огромные файлы минификации по 2.8 МБ. Кроме того, при желании реализовать нестандартные CSS-приемы в Tailwind это не всегда получается. Смешанный подход с гибридным кодом утомителен в поддержке. Автор стремится уважать CSS как технологию, а не списывать его трудности на сложность языка. Вдохновением послужила статья «Tailwind and the Femininity of CSS», которая напомнила, что деградация статуса CSS-разработчиков недопустима в эпоху искусственного интеллекта. Автор благодарит Мелоди Старлинг за дизайн проекта wizardzines.com и отмечает ценность опыта сообщества из ресурсов вроде CSS Tricks и Smashing Magazine.