Teamet mitt startet nylig å skrive CSS. Vi er ferdig med superspråk som kompilerer ned til CSS. Vi bruker ikke noen rammeverk, men skriver gode, gamle CSS-regler. Det er på tide å forenkle hvordan vi tenker på styling.
Utenom tradisjonelle CSS-filer, har vi hovedsakelig tre ulike måter å skrive CSS på:
- Du kan bruke en preprocessor som Less eller Sass, som utvider språket med ny syntaks som variabler og nøstede selectorer. I byggsteget kompileres syntaksen til vanlig CSS.
- Du kan skrive CSS sammen med JavaScript-koden din (CSS-in-JS). Styled components, Stitches og Emotion er tre ulike biblioteker som tilbyr akkurat dette.
- Du kan bruke et CSS-rammeverk, som frister med ulike abstraksjonslag hvis du ikke har lyst til å skrive CSS i det hele tatt. I sistnevnte kategori finner vi alt fra Bootstrap til up-and-coming Tailwind CSS.
Alle disse variantene kommer med enkelte ulemper. Preprocessors tilfører et nytt steg i byggeprosessen. Med CSS-in-JS mister du ofte syntaks-highlighting, og du går glipp av ytelsesgevinsten med separate CSS-filer. Tailwind tilfører mye ekstra markup til HTML-koden din, og du er avhengig av å lære deg et nytt språk.
Nå skal jeg skal innrømme at vi bruker en variant av preprocessors, nemlig CSS modules. Det er et knøttlite verktøy som sørger for at klassenavn blir helt unike, og passer perfekt sammen med komponent-tankegangen til React. Ellers skriver vi nå helt vanlig CSS, i egne filer som lever side om side med React-komponentene våre.
En enklere byggeprosess
Uten noe kompileringssteg får du ett mindre steg i byggeprosessen, og vet nøyaktig hva du leverer i produksjonsbygget. Tailwind hevder de lar deg skrive styling mye raskere enn med vanlig CSS. Men hvis noe skjærer seg, er det fort opp med utviklerverktøyene. Da er det veldig praktisk at nettleseren viser akkurat samme CSS-regler som du skrev i koden din.
En annen fordel med en lettere byggeprosess er at koden blir enkel å vedlikeholde. Hvis du ønsker å prøve ut et moderne frontend-rammeverk som Gatsby eller Remix, slipper du å lure på om de støtter din foretrukne CSS-abstraksjon.
Et abstraksjonslag kommer alltid på bekostning av noe annet. Hvis du bruker Tailwind eller skriver styling med JavaScript, kan det ofte være knotete å skrive “At-rules”, eller betinget styling. Moderne CSS støtter for eksempel media queries, slik at du enkelt kan tilpasse nettsiden til ulike flater og preferanser. Snart får vi container queries, som lar deg style en komponent basert på sin egen størrelse. Nytt i CSS er også feature queries, som lar deg skrive tilpasset CSS for nettlesere som støtter nye konvensjoner. Det betyr at du kan bruke Subgrids i dag, selv om det foreløpig kun er Firefox og Safari som støtter dette.
Men CSS er da fryktelig vanskelig?
Det virker som mange velger rammeverk som Tailwind, eller alternativer som Sass fordi de skyr, er redd for eller hater vanlig CSS. Og det er kanskje ikke så rart. Det er ikke så mange år siden styling var fryktelig vanskelig. Men hvis du fremdeles forbinder styling med CSS-tabeller og float: right, er det kanskje på tide å lese seg opp. CSS har endret seg ganske dramatisk de siste årene, og er nå mye enklere enn mange tror!
Alle moderne nettlesere støtter nå Flexbox for organisering i to dimensjoner, Grids for organisering i tre dimensjoner, og Gaps for luft mellom elementene inni disse. Hvis du i tillegg lærer deg litt om spesifisitet og box-modellen, vil jeg påstå du klarer å håndtere de aller, aller fleste skissene designeren sender deg.
To problemer folk ofte nevner om CSS handler om scoping og nøsting. Scoping kan løses med enkle verktøy som CSS modules, eller ved å bruke BEM-konvensjonen. Og hvis CSS-en din er godt scopet, har du kanskje ikke så stort behov for å nøste reglene dine. Hvis du allikevel er allergisk mot repetisjon, vil du antageligvis glede deg over at den offisielle spesifikasjonen for CSS nesting nylig er kommet hakket videre i utviklingsprosessen. Du kan til og med stemme på den syntaksen du foretrekker!
Vær rustet for fremtiden
Moderne CSS har fikset mange av irritasjonsmomentene vi tradisjonelt har forbundet med styling. Derfor mener jeg det er på tide å forenkle hvordan vi tenker om arbeidsmetodene våre. Kanskje vi kan migrere bort fra preprocessorer som Less og Sass. Og kanskje vi til og med klarer å motstå fristelsen til å velge større CSS-rammeverk som Tailwind.
Selv har jeg forlatt alle abstraksjonslagene. På teamet sitter vi igjen med moderne, vedlikeholdbar og helt vanlig CSS, og er strålende fornøyd med det. Kanskje det er verdt å prøve på ditt neste prosjekt? Husk at når du skriver vanlig CSS, lærer du deg grunnleggende webteknologi som kommer til å bestå i mange, mange år fremover. Du kan pugge Tailwind sitt API, men det er ikke sikkert du får bruk for dette i ditt neste prosjekt. CSS lærer du aldri forgjeves.