Jørgen skriver teknisk om CSS, jeg prøver formulere meg på en litt anderledes måte.
Denne posten er egentlig en kommentar til Mysteriet med CSS spesifisitet. Hvordan fungerer det?, men da en del av kommentaren inneholdt (html-)kode ble dette fjernet. Denne posten inneholder også det som ikke kom med i kommentaren på Jørgens side.
En lettere (på vondt og godt) forklaring er som følger:
Nærhet er alt. Nærmest er sterkest. Men det er ikke styrke, det er allsidighet du ønsker.
Elementer som ligger i HTML-dokumentet, i html-elementene (f.eks. < et element style="css:her;" />) går foran elementer som ligger i < header >. Regler som ligger i header går foran eksterne egne css-filer.
Reglene leses ovenifra, så regler som ligger i toppen av et css dokument likker «lengre vekk» enn regler som ligger i bunnen av dokumentet, da css-filen leses før html’n.
id (#) går foran klasser (.) som går foran generelle typer (h1).
IDer skal være unike (max 1 pr html-side), klasser kan brukes mange ganger, «typer» er bare et ord jeg putta inn her for html-elementer. Du treger mange av disse også :).
Det er ikke styrke men allsidighet du ønsker.
Du vil ikke ha «sterke» regler, du vil ha gjenbrukbare allsidige regler. Når du legger til mer informasjon på siden, så skal dette ikke trenge spesiell tilpassing i css.
Regler av typen #MedId div.MedKlasse h1.MedKlasse vil bare gjelde et ytterst spesielt utvalg elementer (h1-elementer av klassen .MedKlasse som ligger inne en div med klassen .MedKlasse som ligger inni et element med id=»MedId». Vi kan si at lange statments (#div #div .klasse element {/*ting:her;*/}) nøster seg nærmere elementet. Og nærmere er sterkere.
Hvis #MedId div.MedKlasse h1.MedKlasse {/**/} nøster seg nærmere det h1-elementet vi er på jakt etter enn andre stiler som ligger nærmere (f.eks. i < style >-tagg i headeren), så vinner den sterkeste reglen, den som som har nørstet seg nærmest. På denne måten kan stiler som ligger «langt unna» nøste seg nærmere ved å skrives som en sterkere (nøstet nærmere) regel.
Bare h1 {/*ting:sak;*/} vil gjelde alle h1-elementer så lenge det ikke finnes noen sterkere (nærmere) regler.
PS: !important betyr «drit i ting som kommer etter dette, dette er viktig(st)». Du kunne med andre ord bare lagt den viktigste stilen nærmer html-elementet du vil style. !important kan sees på som en magnet som trekker stilen nærmere (og forbi) andre stiler som krangler om å komme nærmest. Brukes så lite som mulig.
Som samfunnsviter og ikke naturviter, fungerer dette bilde bedre for meg. Avstand er lettere enn tall?
CSS-avluserens beste venn:
Som tidligere sakt: «bille under barken» – go get firebug.com!