Jag hatar CSS, men jag har ingen anledning att klaga längre

Jag har skrivit CSS sedan 1998.

Från 2005, sju år in, blev CSS i egen fil det metod jag primärt tillämpade för design. Frames, HTML-tabeller och inline-styles kastades ut, och i den mån det var möjligt skulle all design hanteras av CSS-filerna.

Under mina 19 år som yrkesverksam har en majoritet av dessa år fyllts av att skriva CSS.

Jag har därför skrivit CSS såväl länge som väl.

Det finns ingenting - absolut ingenting - jag hatar så mycket som CSS.

Varför jag hatar CSS kan jag ibland filosofera litet kring.

• CSS är simpelt, men långt ifrån enkelt.
• Det är absurt svårt att lära ut CSS till andra, på grund av hur bakvända hörnstenarna i CSS är.
• Namngivning på koncept i CSS är inte beskrivande för vad deras syfte är.
• CSS har historiskt varit “någon annans problem”.
• CSS är baserat på 1980-talets sätt att bifoga enklare presentationsregler för textdokument, och alltså inte anpassat till vad webben idag är (och har varit, sedan åtminstone 20 år).
• CSS valde fel s.k. “boxmodell”, så fel att box-sizing: border-box introducerades för att backa bandet till mitten av 1990-talet.
• Flexbox, revolutionerade CSS-framsteg med ett katastrofalt dåligt och avskräckande namn.
• CSS specificity, och alla variationer på selektorer. Ingen kommentar.
• Viss CSS ärvs neråt i Shadow DOM, till synes godtyckligt.

Och så vidare. Jag har dock betalat blodspriset, och kan utan att skryta anse mig vara mycket kompetent på CSS.

Sanningen är att jag sällan har anledning att bli upprörd på CSS längre. Efter 25+ år börjar CSS faktiskt bli kompetent nog att erbjuda samma styrkor som HTML-tabeller och taggsoppa gjorde på mitten av 1990-talet.

• Med hjälp av box-sizing finns alternativet att inkludera padding och border vid deklaration av bredd eller höjd.
• Flex löser layoutbehov endimensionellt.
• Grid löser layoutbehov tvådimensionellt.
• Container queries tillåter mer finlir än vad som är möjligt med Media queries.
• Subgrids ger möjlighet att tillämpa traditionella principer för printlayout.
• text-wrap: balance ger balanserade rubriker.
• text-wrap: pretty ger snygga textblock.
• CSS custom properties gör responsiv design mycket enklare.
• prefers-reduced-motion ger möjligheten att ta hänsyn till en användares systeminställningar för att skippa animerade övergångar och rörligt innehåll.
• prefers-color-scheme kan applicera mörk eller ljus design baserat på användarens systeminställningar.
• Alfa-kanaler i PNG kan användas fullt ut.
• SVG med currentColor kan användas fullt ut.
• Det går att bädda in webblicenserade typsnitt.
• Det går att centrera innehåll horisontellt och vertikalt, med en rad CSS.
• Det går att nästla CSS-regler. Inklusive med ampersands för ökad precision.
• :has(), föräldra-selektorn. Hellre sent än aldrig, som de säger.
• :not(), som ger ökad precision.
• box-shadow, border-radius, CSS gradients, SVG filter, CSS transforms. Jag minns inte när jag behövde använda pixelgrafik för bakgrundsbilder sist.

Jag har inte mycket att klaga på längre, annat än det som CSS gör monumentalt fel. Såsom allt som har med höjd att göra, eller tidigare nämnda s.k. “boxmodell”, eller märkliga namn som t ex “flexbox”. Dessa är dock inte på väg bort, så jag finner ingen poäng att klaga på dem.

Jag har dock roligt på andras bekostnad varje gång någon säger “jag behöver inte kunna CSS, jag kör Tailwind”, varvid hen kör fast rätt fort.

CSS behöver tid, tålamod och acceptans. Men sträckan från nybörjare till att få saker gjorda har nog aldrig varit så kort som nu.