Adio, Tailwind: cum am învățat să structurez CSS și să nu mai depind de clase utilitare

Vă aduceți aminte senzația aia când proiectul în Tailwind devine o cearșaf de className="flex items-center justify-between p-4 bg-white shadow-md"? Julia Evans, autoarea blogului jvns.ca, a decis că e de ajuns și a împărtășit experiența migrării înapoi la CSS structurat. Spoiler: nu e doar „dați-mi o pilitură în loc de ciocan”, ci o întreagă filozofie.

Julia recunoaște că Tailwind era comod pentru prototipuri rapide, dar când proiectul a crescut, clasele utilitare au început să semene cu cod în assembly – fiecare linie e clară, dar imaginea de ansamblu nu se vede. A trecut la CSS cu o metodologie asemănătoare BEM și chiar a scris un mic plugin pentru PostCSS pentru a automatiza rutina. „Nu mai simt că mă lupt cu browserul”, spune ea.

Lecțiile cheie din experiența ei:

• Grupați stilurile pe componente, nu pe utilități. E ca și cum ați sorta șosetele pe perechi, nu pe culori.
• Folosiți proprietăți custom (CSS custom properties) pentru valori frecvente – funcționează mai rapid decât variabilele SASS și nu necesită compilare.
• Nu vă temeți de specificitate: selectoarele cu o singură clasă nu sunt rușinoase, sunt lizibile.
• Păstrați Tailwind pentru proiecte mici, unde viteza e mai importantă decât arhitectura.

Desigur, hălăduielile „Tailwind vs CSS” nu se vor potoli, dar Julia ne amintește: instrumentul trebuie să vă servească, nu invers. Dacă fișierul vostru CSS arată ca o listă de cumpărături de la IKEA, poate e timpul să reevaluați abordarea.

Comentariul studioului METABYTE: Și noi am trecut prin asta – de la entuziasmul „claselor rapide” la conștientizarea că întreținerea unui astfel de cod e ca un puzzle fără model. În proiectele noastre combinăm abordările: Tailwind pentru MVP, iar pentru producție – CSS structurat cu un sistem de design. Important e să nu uităm că scriem cod pentru oameni, nu pentru preprocesoare.