Kan vi plis slutte å flex’e så mye?
Elise Kristiansen advarer mot å la flexbox løse alle CSS-problemer. – Én siste liten Copilot-autocomplete var nok til at mitt vannglass rant fullstendig over.
Dette er mitt desperate hjertesukk etter å skrive riktig CSS.
For hvorfor er det sånn at når jeg sitter med Copilot og Tailwind i VS Code, så prøver den GANG PÅ GANG å få meg til å autocomplete en haug med klasser jeg overhodet ikke trenger, og hvorfor er én av disse klassene ALLTID FLEX???
Jeg vet jo dessverre svaret. Det er en grunn til at når jeg ber Codex lage en enkel markup av noe, så er UROVEKKENDE mange div-er stylet med flex flex-col gap-2 .
Men det gjør ikke at jeg GREMMES noe mindre.
Rant fullstendig over
Én siste liten Copilot-autocomplete var nok til at mitt vannglass rant fullstendig over, og jeg måtte ty til Bluesky (du vet Twitter for folk som ikke orker å bli kalt horer) for litt utløp:
Jeg fikk kort tid etterpå en melding av en kode24-kjenning og min gode guildie (shoutout til guilden vår Deltid) fra World of Warcraft, Petter Sæther Moen, om at dette er en rant jeg burde utdype og få publisert et sted.
Så ikke skyld på MEG for dette usammenhengende ordoppkastet. Jeg er en uskyldig part med for sterke og store følelser.
Som en av mine (mange) meningsmotstandere, John Neely Kennedy, ville sagt:
"I have the right to remain silent but not the ability."
KI avslører våre ulumskheter
Før i gamle dager misbrukte vi skamløst <table>, deretter prøvde vi å floate ting dit vi ville, og vi husker alle hvordan det gikk.
Jeg tror float alene er det som har generert samtlige “when you do one change in the css-file and the whole page collapse”-memes.
FORDI VI HAR MISBRUKT FLEXBOX SIDEN DAGEN VI BESTEMTE OSS FOR AT INTERNET EXPLORER IKKE LENGER VAR VIKTIG Å STØTTE.
Så kom flex; redningen som fikset alle våre problemer, som en superhelt med lang og vakker kappe. Men alle som er på min alder har vokst opp med å se De Utrolige, og vet hvor FATALE konsekvenser lange kapper kan ha.
Jeg sier som Edna (mitt feministiske forbilde): INGEN KAPPER.
For én gang skyld skal jeg ikke bare skylde på KI. (Hvem er dette, og hvor har hun gjort av Elise?). Dette er oss frontenderes skyld. Dette er på VÅR kappe (pun intended).
FORDI VI HAR MISBRUKT FLEXBOX SIDEN DAGEN VI BESTEMTE OSS FOR AT INTERNET EXPLORER IKKE LENGER VAR VIKTIG Å STØTTE.
Og de som har vært utviklere så lenge som meg vet at det er DRITLENGE siden.
Det KI gjør er å vise oss veldig, veldig tydelig hva vi har drevet med av ulumskheter i css-fila vår. CSS har blitt neglisjert!
With flexbox comes great responsibility
Og nå lurer du kanskje på hvorfor Flex er i min hat-bracket for tiden. Jeg bruker det tross alt hele tiden selv. Men som ved alle andre css-verdier: Det må bare brukes riktig.
Fordi Flexbox er kraftig. Det er så genialt nettopp fordi bare et par linjer med CSS-kode legger til så mye oppførsel. Flex løser mange problemer og effektiviserer frontend-skrivingen vår nettopp fordi det er bra og sterkt.
But with great power comes great responsibility.
Flexbox fungerer nemlig slik at hvis du putter det på et element høyt oppe i strukturen, vil det påvirke alle elementene direkte under, som kan få følgeskader nedover i komponenttreet. Og man ender opp med et kaos av underelementer man må sitte og overstyre flex-items naturlige oppførsel på.
Jeg har gjort code review på pull requester som har både flex og egenskaper som forsøker å overstyre flex sin naturlige oppførsel på SAMTLIGE SELEKTORER NEDOVER I FILA. Et prima eksempel på at flex har blitt brukt for å oppnå én enkel ting, men man ikke har ønsket all den andre oppførselen som medfølger flex.
Og det er her jeg mister det. Helt. Fullstendig. Se-table-bli-brukt-til-layout mister det.
Flexbox til å skape luft
Jeg har sett flex bli brukt til å lage luft mellom paragrafer, titler, bilder i en artikkel, med display: flex; flex-direction: column; gap: 1em . Man bruker altså en display-verdi som er ment for å fordele eller justere elementer langs en hovedakse til å LAGE LUFT.
Det er IKKE det flexbox er ment til å gjøre. Vi har allerede den fantastiske verdien margin som løser alle våre behov for luft mellom elementer.
Margin er det reneste spacing-verktøyet vi har i CSS, syns jeg. Når to block-elementer står etter hverandre i normal, vertikal flow, kollapser marginene deres så du ikke får dobbel luft, du får bare den største av dem.
Det betyr at du fritt kan gi hver type element sin egen margin uten å bekymre deg for at avstanden plutselig dobles. Det gjør margin til en genial løsning for luft der det faktisk er block-flow.
Jeg nevnte at flex påvirker underelementene sine, og en annen konsekvens dette har er at underelementer blir vanskeligere å style fordi de blir flex-items og får annen standardoppførsel. Hvis vi blir i artikkel-scenarioet, ser vi enda tydeligere hvorfor flex er en dårlig idé akkurat her.
Flex dreper float
For hvilken styling-verdi er det som har blitt URETTFERDIG lagt for hat i alle år, men er som skapt for nettopp artikler og bloggposter? Jo float. For til og med FLOAT har en mening i riktig omstendighet.
float er en eldre CSS-verdi som opprinnelig ble laget for å plassere bilder med tekst rundt, men ble etter hvert brukt til layout før Flexbox og Grid kom.
Grunnen til at folk haater float er at de ikke vet hvordan float skal brukes. Fordi float tar elementet delvis ut av normal dokumentflyt er dette også en uforutsigbar liten luring.
Man kan på mange måter si at float og flex er søskenbarn med mange like egenskaper:
- Begge påvirker elementer rundt
- Begge har blitt misbrukt på groveste vis
- Begge er geniale verktøy når de blir brukt riktig.
Dessverre er misbruken av flex døden for float. Float fungerer ikke hvis du gjør alt til flex, fordi float ikke har effekt på flex-items. RIP float.
Tenk først, CSS etterpå
Det jeg egentlig ønsker å oppnå med denne ranten her er økt fokus på ren CSS. Kanskje er det et skip som er for sent å snu, nå som også KI har lært seg hvor høyt vi elsker å putte flex på alt. Men dette er likevel mitt hjertesukk.
TENK før du legger inn en CSS-egenskap. HVA ønsker du å oppnå? Finnes det en css-egenskap som løser akkurat den tingen du er ute etter?
Bruk css-egenskaper til det de er ment for.
- Ønsker du å strukturere elementer på en rekke som skal brekke ned til kolonner? Da er flex helt supert!
- Ønsker du å lage luft mellom et element og et annet? Bruk margin.
- Ønsker du å få et bilde til å flyte i en tekst, slik at teksten legger seg pent rundt, bruk float.
- Ønsker du å strukturere innhold i et rutenett, bruk grid.
- Ønsker du å justere tekst til høyre eller venstre eller sentrere et inline-element, bruk text-align.
Lær deg om display: block, inline, inline-block, ikke tving fram oppførsel via flex.
Lær deg om position-verdier.
Lær deg om alt det du kan gjøre med css, uten å sette flex på alt.
Ikke la flex bli den nye <table> anno 2003. Flex er fantastisk, bare ikke bruk det som en universalløsning.
Og bruker du flexbox feil igjen etter denne tordentalen kommer jeg til å se på deg slik jeg så på noen uskyldig forbipasserende på dette snikbildet noen tok av meg.
Det er nøyaktig det samme blikket jeg sender Copilot neste gang den foreslår flex flex-col når jeg bare skal lage et avsnitt.
