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!
Hehe, det blir litt dobbelt opp dette, for nå limer jeg inn svaret jeg ga til kommentaren din på bloggen min. Der skreiv jeg:
Fin forklaring Eirik! Er helt enig i at det ikke nødvendigvis er styrke en ønsker nÃ¥r det gjelder css-regler. Alsidighet er selvsagt et mÃ¥l. Men noen ganger ønsker en jo Ã¥ lage stilregler til en spesifikk del av websiden, og da hjelper det ofte – ihvertfall for meg – Ã¥ tenke styrke. Spesielt ettersom jeg alltid bruker eksterne stilark (holder meg altsÃ¥ langt unna stilregler direkte pÃ¥ html-tagger, selv om en nøster seg nærmere elementet pÃ¥ den mÃ¥ten. Jeg liker heller ikke Ã¥ lage interne stilark innenfor head-taggen).
Du skriver: “Regler som ligger i header gÃ¥r foran eksterne egne css-filer.â€
Akkurat der tror jeg du bommer litt. Om du plasserer linken til det eksterne stilarket under det interne stilarket (alt innenfor head-taggen så klart), så vil det eksterne stilarket ha førsterett om to stilregler har samme spesifisitet. Men som regel plasserer folk linkene til de eksterne stilarkene over det interne stilarket, og dermed vil jo det interne stilarket være nærmere enn det eksterne.