Utility baseret CSS med TailwindCSS
Igennem de sidste fire-fem år har måden som jeg skriver CSS på ændret sig fra at være baseret på et koncept om »seperation of concerns« igennem semantisk CSS til i dag at være en blanding af komponentbaseret CSS under inklusion af en del utillity-classes.
De fleste af mine utility-classes er opstået når jeg har fået en følelse af gentagen CSS (fx en bestemt border-type, drop-shadow eller border-radius som var en del af projektets designmanual) i forskellige CSS-blokke, men hvor det samtidig ikke ville give semantisk mening at ekstrahere blokkene til deres egne CSS-komponenenter.
Som med gentagen applikationslogik, har der altid været noget som har føltes forkert ved at gentage den samme funktionalitet flere steder - og for at tøjle den naje, har utility-classes længe været min go-to når noget ikke føltes rigtig.
Før Adam Wathan mfl. lancerede TailwindCSS i slutningen af sidste år, havde jeg derfor aldrig benyttet en fuldstændig utility-baseret tilgang til styling af markup, men fordi en større del af min måde at skrive CSS på allerede havde flyttet sig i den retning, blev jeg hurtigt solgt på ideen om fuld utility-baseret CSS.
Det seneste halve års tid har givet mig den glæde at benytte TailwindCSS på en række småprojekter og til hurtig »scaffolding« af interne MVP'er, men før nu har jeg ikke haft lejlighed til at benytte TailwindCSS i projekter der er i produktion.
Projektet der gav mig lejlighed til at benytte TailwildCSS i produktion var en opdatering af denne hjemmeside (season.dk), der er blevet omskrevet fra sin tidligere struktur som mestendels var baseret på hjemmestrikkede moduler PostCSS frameworket LostGrid.
Denne hjemmeside er selvfølgelig et taknemmeligt første projekt at omskrive til fuld utility-baseret CSS, da det for det første er en relativt simpel side rent layoutmæssigt, og derudover ikke havde en masse legacy-hensyn der skulle tages højde for.
Men, når det er sagt, er der umiddelbart kun ét ord at knytte på brugen af TailwindCSS og fuld utility-baseret tilgang til CSS-komposition: Success!
Mere konkret så oplevede jeg, at en utility-baseret tilgang reducerer den generelle udviklingstid, fordi den arbejdsmetode reducerer »context switching« mellem markup og styling.
Hvor jeg førhen har skiftet mellem at arbejde i strukturfiler (views) og CSS/ressourcefiler (stylus), kunne jeg nu foretage tæt på alt arbejde udelukkende i strukturfilerne. Ved at kombinere det med et workflow som indeholder en automatiseret build pipeline når udviklingsfiler gemmes til disk, og en samtidig automatisk opdatering af det browservinduet (fx gennem BrowserSync), man layouter i, går det stærkt at nå frem til et resultat.
Læs mere om TailwindCSS og prøv det selv.