CSS-фреймворк Tailwind

Предлагаю обсудить CSS-фреймворк Tailwind. Он построен по принципу «класс как сокращённая форма записи сочетания свойства и какого-то его значения» (например, класс font-bold применит к элементу стиль font-weight: bold). По каким-то причинам он очень популярен в ИИ, генерирующих интерфейсы, таких как Lovable и UI Backery.
У меня он вызвал весьма противоречивое впечатление. Когда я только узнал о нём, идея очень даже понравилась, так как для наиболее базовых свойств я и сам применяю тот же подход при вёрстке, например, почти всегда требуются классы flex, center и тому подобные. Но я такое применял именно к очень небольшому набору наиболее часто требующихся.
С другой, когда посмотрел свёрстанные на нём более-менее сложные макеты, где у почти каждого элемента длинный и совершенно нечитаемый перечень классов, пришёл к выводу, что это плохая идея. Особенно в том случае, если вдруг потребуется редизайн типа смены используемой цветовой гаммы.

Я когда-то раньше в своём CSS-микрофреймворке, который использовал в вёрстке, тоже придумал такой подход с классами. Но потом от него отказался, потому, что перечень классов у элементов становится слишком нагромождённым, и страдает модульность — нельзя просто так взять и поправить в одном месте в CSS-файле какой-то стиль для однотипных элементов, и чтобы изменение вступила в силу для всех элементов данного типа на сайте.

Вообще, в таких случаях можно использовать CSS variables, но это ломает обратную совместимость, т.к. их поддержка в броузерах появилась только в 2016-2017 годах. Ещё вариант — использовать всякие LESS/SASS, но я так и не смог себя к ним приучить.

Вот потому я их и не использую. Но в данном случае CSS variables нам ничем не помогут, если везде в HTML-коде элементам заданны списки классов вида `class="font-bold font-size-2 margin-top-1 …"`, то есть, классы фактически используются для описания стилей элементов, а не для указания их типов, как это и было задумано изначально.


Потому что это неудобно и непрактично, и в итоге снижает эффективность разработки, точно так же, как и Git, к которому ты «не смог себя приучить». Всё это — классические примеры того, когда то, что делалось с целью упростить жизнь, на практике наоборот её усложняет. «Гладко было на бумаге, да забыли про овраги»…

Берешь и перезаписываешь цветовые свойства типовых классов. Но да, в целом для UI кастомщины CSS фреймворки плохо подходят.




Более хорошая альтернатива Git в качестве VCS?