KVALITET I CSS

Vårt problem?

Stian Veum Møllersen / @mollerse

BEKK

Hvorfor er kvalitet i CSS kode vanskelig?

Hva gjør CSS spesielt vanskelig?

Hvilke CSS-regler som påføres et element avgjøres av spesifisitet.

Det betyr at hvert fragment med CSS er potensielt avhengig av alle andre fragmenter med CSS.

CSS tilbyr ingen hjelp til å administrere avhengigheter mellom fragmenter av CSS.

Ansvaret for avhengigheter mellom fragmenter av CSS faller til oss.

Det er vår jobb å skrive god CSS.

Hvordan?

Bruk spesifisitet til din fordel.

Skriv enkel CSS.

Kommuniser intensjoner.

Mål alt.

&

Alt over tid.

SPESIFISITET

Overstyring

Når du bruker spesifisitet til å overstyre properties blir spesifisitet enda vanskeligere.

Open/closed Principle.

DRY Drought

Det er ikke DRY hvis du lager mer kompleksitet.

Generaliserte CSS-regler skaper tette koblinger — dette nuller ut fordelen til DRY.

Liket i funksjon.

vs

Likhet i form.

Spesifisitet og rekkefølge

La rekkefølgen være bestemt av spesifisiteten.

Dette gjør det enklere å orientere seg i CSSen ved å eliminere rekkefølge som faktor.

Spesifisitetsgraf

Spesifisitetsgraf

Spesifisitetsgraf

Forhåndsdefinert plass å legge ny CSS.

Lettere å finne igjen relevant CSS.

ENKEL CSS

Spill på lag med HTML

Vit hva default styles er og bruk de rette elementene til de rette tingene.

Det er ikke uhørt å endre markup for å gjøre CSS enklere.

Kunnskap

En stor kilde til unødvendig kompleks CSS er mangel på kunnskap om posisjonering og layout.

Mye å hente på å lære seg.

Strukturering

Ha en strategi for strukturering av CSS.

OOCSS, BEM, SMACSS etc.

Single Responsibility Principle.

Preprosessorer

Utnytt preprosessorer for å skrive enklere CSS.

Lag guidelines. Det er en fin linje mellom hjelpsomt og skadelig.

Strukturering

Anbefalt lesning:

SUITCSS Docs (link)

Mediums CSS - @fat (link)

Statistikk

Bruk statistikk for å identifisere komplekse biter av CSS.

CSSStats.com — ex1 ex2

Stylestats — npm.im/stylestats

Andre verktøy

Vær på utkikk etter verktøy som kan fjerne unødvendig kompleksitet fra CSS.

UNCSS — npm.im/uncss

Autoprefixer — npm.im/autoprefixer

KOMMUNISER INTENSJONER

Navngiving

Velg en strategi for navngiving av CSS-komponenter — og vær konsistent.

Dette henger veldig sammen med strategi for strukturering.

Styleguides

CSS bestemmer utseende — utseende er et visuellt konsept.

Styleguides skal være levende.

WRAP UP

Kvalitet i CSS er vår jobb.

Formaliser retningslinjer og vær nådeløs mot avvik.

Gjør målinger og bruk dem aktivt til å følge opp retningslinjer.

Automatiser alt.

Videre

Ytelse.

Tilgjengelighet.

Progressiv forbedring.

TAKK FOR MEG

Stian Veum Møllersen / @mollerse