Мало хто знає, але моя кар'єра програміста починалася з frontend-розробки. Чи вважати HTML та CSS мовами програмування — питання дискусійне, але я б сказав «так». Мені справді подобався CSS, а до «серйозного» програмування я прийшов лише завдяки навчанню. Попри любов до Java та PHP, CSS завжди посідав особливе місце в моєму серці.
З роками мої навички в CSS дещо припали пилом. Я намагаюся стежити за новими розробками здалеку, але вже не назвав би себе frontend-інженером. Максимум, на що я здатен сьогодні — це накидати Tailwind-класів у розмітку і сподіватися, що хтось потім причепурить мою роботу 😅
Проте я дійшов болючого висновку: через Tailwind я розучився писати чистий CSS. Ситуація дивна. Якщо треба створити flexbox чи grid з правильним вирівнюванням через Tailwind — жодних проблем. Але спробуйте попросити мене зробити це на CSS — і в голові порожнеча. Я пам'ятаю про display: flex;, але на цьому все. Проблема не в тому, що я не можу вивчити CSS заново. Річ у тім, що я настільки звик до інструмента, який «компілюється в CSS», що перестав розуміти саму основу.
Частково проблема в тому, що між класами Tailwind та властивостями CSS немає прямої відповідності. Через дрібні розбіжності в назвах я відчуваю себе «прив'язаним» до фреймворку. Наприклад, маємо .row-start-<number>, тоді як властивість CSS називається grid-row-start. Клас .flex-auto має префікс flex, а .grow — ні, хоча він відповідає властивості flex-grow. Використовуємо .justify-items-end, але .items-end замість .align-items-end; .font-bold замість .font-weight-bold; .leading замість .line-height і так далі.
У Tailwind точно були причини для такого іменування, але тепер, коли я пишу звичайний CSS, я просто не пам’ятаю назв властивостей чи значень. Звісно, я обираю Tailwind не просто так. Мені подобається його компонентний підхід: CSS часто перетворюється на хаос, і я не впевнений, що цьому можна запобігти інакше. Tailwind принаймні локалізує цей безлад. Поєднання CSS та HTML у межах компонентного дизайну — це потужно. Проте є побічний ефект: Tailwind перетворився на окрему мову. Все здається логічним і природним, поки не доводиться писати «справжній» CSS. Саме тоді я зрозумів, що потрапив у пастку vendor-lock.
Я мрію про щось схоже на Tailwind, але з іменуванням один-в-один як у стандартному CSS. Це дозволило б тримати стилі там, де їм і місце — у компонентах, і за потреби додавати кастомний чи глобальний CSS, використовуючи ту саму логіку. Це дуже нагадує inline-стилі, але з певною ледь помітною різницею. Можливо, варто спробувати такий підхід?
Або, можливо, у вас є ідеальне рішення, яке покладе край моїм внутрішнім суперечкам? Напишіть мені! Надішліть листа або приєднуйтеся до нашого Discord!