Foto: Simon Pow (Creative Commons)
CSS er et svært enkelt og fleksibelt kodespråk. Noen ganger blir denne fleksibiliteten et problem, og koden fylles opp av unødvendig mye !important og rot. Heldigvis finnes det mange gode tips til hvordan skrive bedre CSS.
Start med blanke ark
En av de store utfordringene med CSS er å få de ulike nettleserne til å vise nettsidene på riktig måte. Alle nettlesere har en innebygget grunnleggende tolkning av HTMLen som presenteres, og denne tolkningen kan variere fra nettleser til nettleser. Derfor er det kjekt å nullstille tolkningen av HTMLen slik at alle nettlesere starter på samme nivå. Den vanligste formen for nullstilling er denne:
* {
padding: 0;
margin: 0;
}
Dette er ikke en god eller effektiv løsning, og man bør unngå å bruke den. Grunnen er at ikke alle HTML-elementer nullstilles ved å sette padding eller margin til NULL. Løsningen kan også gi redusert ytelse fordi nettleserne må servere regelen til absolutt alt, uten at alle elementer har padding eller margin.
En bedre løsning er å nullstille de elementene du kommer til å bruke i din HTML. Eric Meyer har laget et eget stilark som nullstiller de vanligste HTML-elementene. Yahoo har også laget et tilsvarende stilark, i tillegg til mange andre nyttige verktøy. Du kan bruke en av disse stilarkene, eller du kan lage ditt eget.
Organisering og rekkefølge er viktig
Et viktig prinsipp i CSS er hvor nært CSSen står til HTMLen. Inline CSS overstyrer CSS som er skrevet i <head>, og CSS som er skrevet i <head>, overstyrer ekstern CSS som legges til med <link>. Sistnevnte overstyring forutsetter at eksterne stilark lenkes inn før CSSen man eventuelt skriver rett i <head>. CSSen som er nærmest HTMLen, er den som bestemmer. Et annet og grunnleggende prinsipp med CSS er hvordan reglene arves fra nivå til nivå. Fordi CSS er laget slik den er, lønner det seg å plassere reglene i riktig rekkefølge. Nettuts+ har satt opp en fin liste i sin post om 5 tips for å skrive bedre CSS:
- Reset
- Generelle elementer
- Generelle klasser
- Generell layout
- Topp og navigasjon
- Innhold
- Bunn og informasjon
- Osv.
Resirkulering og gruppering
Klima og miljøbevegelsen har fått mye oppmerksomhet de siste årene og resirkulering er et av mange tiltak for å skape et bedre sted å leve. I CSS er det også mulig å resirkulere. Finn elementer og moduler som skal ha de samme reglene, og sortér dem i grupper.
Ikke sånn:
#navigation ul li.home a {
padding: 4px 8px 4px 20px;
font-size: 14px;
font-weigth: bold;
text-transform: uppercase;
background: #06C url(images/icons/home.png) no-repeat 0 50%;
}
#navigation ul li.about a {
padding: 4px 8px 4px 20px;
font-size: 14px;
font-weigth: bold;
text-transform: uppercase;
background: #06C url(images/icons/about.png) no-repeat 0 50%;
}
#navigation ul li.contact a {
padding: 4px 8px 4px 20px;
font-size: 14px;
font-weigth: bold;
text-transform: uppercase;
background: #06C url(images/icons/contact.png) no-repeat 0 50%;
}
Men sånn:
#navigation ul li a {
padding: 4px 8px 4px 20px;
font-size: 14px;
font-weigth: bold;
text-transform: uppercase;
background-color: #06C;
background-position: 0 50%;
background-repeat: no-repeat;
}
#navigation ul li.home a {
background-image: url(images/icons/home.png);
}
#navigation ul li.about a {
background-image: url(images/icons/about.png);
}
#navigation ul li.contact a {
background-image: url(images/icons/contact.png);
}
Eller sånn:
#navigation ul li a {
padding: 4px 8px;
font-size: 14px;
font-weigth: bold;
text-transform: uppercase;
background-color: #06C;
}
#navigation ul li.home a,
#navigation ul li.about a,
#navigation ul li.contact a {
padding-left: 20px;
background-repeat: no-repeat;
background-position: 0 50%;
}
#navigation ul li.home a {
background-image: url(images/icons/home.png);
}
#navigation ul li.about a {
background-image: url(images/icons/about.png);
}
#navigation ul li.contact a {
background-image: url(images/icons/contact.png);
}
Det er ikke alltid CSSen blir kortere av å restrukturere og gruppére, men vedlikeholdet kan bli veldig mye enklere.
Følg med på hva som skjer
Det er et yrende liv på Internett, og endringer skjer i ekspressfart. Derfor er det viktig å følge med på hva som skjer der ute. Les bloggposter, se videoer, hør på podcasts og følg med på tips som dukker opp på Twitter.
Kommentarfeltet er åpent for dine tips, bloggposter, videoer og podcasts!
Litt...
mia
21 May, 2009 – 13:51Glimrende innlegg! Vi trenger flere norske bloggere som kan skrive om dette! Lærte masse!
Martin Berglund
21 May, 2009 – 13:53Takk for det, Mia! Det kommer nok flere poster etterhvert
Ole Kristian
21 May, 2009 – 17:14fin artikkel!
men;
Mente du at man skal skrive f.eks.
background-color: #fff;
background-position: left top;
background-image: url(images/bg.jpg);
istedefor:
background:#fff url(images/bg.jpg) no-repeat top left;
?
Martin Berglund
21 May, 2009 – 17:16Takk for det
Nei, absolutt ikke. Det er helt riktig å bruke shorthand CSS der det er mulig.
I enkelte tilfeller kan du sette generell CSS for mange elementer først, og så spesifisere den unike CSSen for de andre elementene etterpå. Gir det mening?
Jørgen
21 May, 2009 – 23:52Et interessant blogginnlegg om CSS dette, men det er en ting jeg må få påpeke. Du skriver at “..CSS som er skrevet i
<head>, overstyrer ekstern CSS som legges til med .” Dette stemmer ikke. Om du linker til det eksterne stilarket etter du har skrevet de interne stilreglene innefor<head>, vil det eksterne stilarket overstyre det interne om stilreglene har samme spesifisitet.Derimot så vil de fleste skrive de interne stilreglene etter (altså lenger ned i selve dokumentet) de har plasert linkene til de eksterne stilarkene, og dermed vil de interne stilreglene overskrive eksterne stilregler med samme spesifistet. Jeg skreiv et blogginnlegg om dette for noen måneder siden der jeg skriver litt mer om spesifisitet.
Knall med slike blogger! Jeg har lagt deg til på twitter, og kommer til å følge denne bloggen. Lykke til videre!
Jørgen
21 May, 2009 – 23:53Jeg ser at et par html-tagger forsvant fra kommentaren min. Min feil da jeg ikke leste godt nok hvilke tagger som kunne brukes
Martin Berglund
22 May, 2009 – 01:15Godt poeng, Jørgen. CSS i head kan godt overstyres av innlenkede stilark, så lenge rekkefølgen stemmer. Jeg legger inn en notis om det.