Slik jobber norske utviklere med CSS

Fra preprosessorer til CSS i JavaScript, og gigantiske rammeverk.

Få ting i kodeverdenen frembringer mer følelser enn CSS. Helt siden nordmannen Håkon Wium Lie foreslo stilark-språket i 1994 har stiling av nettsider vært en kilde til kjærlighet, og ikke minst intens frustrasjon. 😡

Fra floats til arv, specificity, z-indexer, browser-spesifikke attributter og ikke minst vertikal og horisontal posisjonering, det er mye en stakkars utvikler skal holde styr på.

Derfor har utviklere opp gjennom årene klekket ut en rekke fjonge løsninger for å hjelpe andre utviklere med stiling-hodebry.

Og da vi spurte kode24-klubben, fikk vi høre om alle CSS-løsningene norske utviklere bruker. Du kan høre om funnene i ukas kode24-timen:

og lese om hva de sa:


#1: Håndskrevet CSS

Med utvalget av store rammeverk og preprosessorer er det lett å tenke at man ikke kan skrive CSS for hånd i 2020. Men det går faktisk helt fint!

CSS i seg selv har tross alt ikke forandret seg nevneverdig de siste tiårene, utenom en håndfull nye attributter. Håndskrevet CSS fungerer helt fint, både inline på et element, innenfor en < style >-tagg og fra en ekstern stilark-fil.

Og selv om det kan bli tungvindt på større prosjekter, er det mange utviklere som foretrekker å skrive CSS for hånd i prosjektene sine.

- CSS - enkelt og greit. Kunne sikkert brukt Tailwind eller Bootstrap i starten, men ville eliminert dem asap, skriver Michael Odden.

#2: Pre-prosessert CSS

Et av de største frustrasjonspunktene for utviklere som måtte røre CSS før i tiden var mangelen på variabler, funksjoner og ryddige filer.

Det ville utviklerne Hampton Catlin og Natalie Weizenbaum gjøre noe med, derfor lanserte de Syntactically awesome style sheets, bedre kjent som Sass, i 2006. Språket introduserte en rekke nye verktøy for utviklere, men krevde til gjengjeld at brukere kompilerte Sass-språket til CSS før de kunne brukes i en nettleser.

«SCSS for muligheten til å organisere koden i flere filer.»

Etter hvert kom flere alternativer som Less og Stylus, men i 2020 er det fortsatt Sass - også kjent som SCSS - som troner, om vi skal tro norske utviklere.

- SCSS for muligheten til å organisere koden i flere filer, BEM-metodikken og ITCSS-struktur for å holde "specificity" nede. Autoprefixer for autoprefixing. Ellers ikke noe rammeverk, forteller Anders Grendstadbakk.

- SCSS, deler det opp i separate filer for variables, mixins, base, fonts, normalize og en egen mappe med komponenter, skriver Morten Tangerås.

#3: Rammeverk

CSS har alltid gitt enorm frihet til visuell utforming av nettsider, kanskje litt for mye? Utover 2000-tallet begynte det å bli klart at vi trengte noen standarder for hvordan nettsider skulle se ut og oppføre seg.

Det ville Mark Otto og Jacob Thornton i Twitter gjøre noe med, derfor skapte de to utviklerne Twitter Blueprint i 2011, et rammeverk som ga utviklere et ferdig sett med farger, fonter, responsiv layout og komponenter for å enklere bygge anvendelige nettsider. Samme året ble prosjektet døpt om til Bootstrap og gitt ut som et open source-prosjekt.

«Har startet å bruke bootstrap for enkel og rask css.»

Bootstrap var ikke det første av sin sort, men det ble raskt det mest populære. Rammeverket har i dag over 140.000 stjerner på Github, og kommer straks ut i versjon 5.

Rammeverket er i bruk blant norske utviklere også:

- Bootstrap med Sass. Egen variabelfil og ekstra bling i main.scss. Bygger med Sass-CLI eller ParcelJS, forteller Lars-Erik Aabech.

- Har startet å bruke Bootstrap for enkel og rask CSS, så ville vel gått for det, kimer det fra Wilhelm André Forfot.

I 2019 kom det riktignok en utfordrer som tok et oppgjør med Bootstrap-aktige rammeverk som "gjorde for mye", og tilbød istedenfor et rammeverk av "lavnivå-klasser".

Tailwind heter rammeverket, og det kan virke som flere norske utviklere har forelsket seg i det:

- Tailwind for alle penga, skriver Helge Johansen.

Han får støtte av Daniel Fjeldstad som skriver:

- Bruker primært Tailwind Css, sekundært SCSS/CSS og Styled Components.

#4: CSS i JavaScript

Webutvikling i 2020 domineres av JavaScript og JavaScript-baserte rammeverk. Komponent-rammeverk som React og Vue er blitt standarden for norske utviklere, og med JavaScript-komponenter kom et ønske om at CSS-stilen skulle følge en komponent.

Vipps var CSS i JavaScript født, eller CSS-in-JS som det ofte kalles.

Mange utviklere var og er fortsatt skeptisk til denne bruken av CSS. Blant annet fordi det gjør CSS mindre tilgjengelig for designere.

- Styling separat fra JavaScript all the way, helst via preprocessors og design tokens, skriver Alexander Vassbotn Røyne-Helgesen.

Kongen på haugen blant CSS-in-JS-rammeverk heter styled-components, kom i 2016, og brukes allerede av store selskap som Google, Reddit og Disney.

Norske utviklere er også fans av rammeverket:

- Jeg bruker styled-components i React-prosjektene. Etter å ha kommet fra ASP.NET MVC-prosjekter med less eller sass var det uvant å gå over til å skrive «css» i kodefilene, men nå vil jeg ikke tilbake, skriver Thomas Kalve.

- Ditto, svarer Christer Nordbø.

Selv om styled-components brukes mest flittig er det stadig utviklere som tester nye rammeverk. Kristofer Giltvedt Selbekk er en av dem:

- Jeg er blitt veldig glad i chakra-ui, som er et komponentbibliotek basert på system-ui. Anbefales!