Gør din CSS cascading

CSS er det sprog, som man benytter til at style ens hjemmeside. Med et sæt regler, angiver man f.eks. hvor stor teksten skal være, hvilken font, de enkelte elemeter skal have, linjehøjde, farve og meget mere. Det er et enormt simpelt sprog, så man kan nemt komme i gang. Men det kræver årevis at mestre det (og det vil jeg ingenlunde påstå, jeg gør). (Skal du have fat i de tunge drenge i Danmark, vil jeg anbefale dig, at kigge på ShiftCph).

Det gode ved at det er simpelt, er at alle kan snedkerere i det.

Det dårlige er, at der bliver lavet meget makværk ? og desværre er det sådan med HTML og CSS, at de kunder, der køber det, ikke er i stand til at se, om de har købt pænt håndværk eller makværk.

Nuvel... skal ikke gøre mig til dommer over andres arbejde, men jeg ser igen og igen og igen, at folk glemmer C'et i CSS. C'et står for "Cascading" ? altså noget vandfaldshalløj og det er netop dét, mange ikke får fat i.

Her er et eksempel på noget, jeg ser voldsomt meget:

	<div id="maincontent">
		<h1 class="redheader">Overskrift</h1>
		<p class="contenttext">Lorem ipsum</p>
		<p class="contenttext">Lorem ipsum</p>
		<p class="contenttext">Lorem ipsum</p>
	</div>

Og den tilhørende CSS er således

	.redheader { font- family : verdana; color : red; }
	.contenttext { font-family : verdana; line-height : 1.2; }

Måden det burde være skrevet på (for at anvende C'et i CSS).

	<div id="maincontent">
		<h1>Overskrift</h1>
		<p>Lorem ipsum</p>
		<p>Lorem ipsum</p>
		<p>Lorem ipsum</p>
	</div>

Og med denne CSS.

	#maincontent { font-family : verdana; }
	#maincontent h1 { color : red; }
	#maincontet p { line-height : 1.2; }

Voilá ? så er man efterladt med sprød HTML og CSS, der rent faktisk er cascading.

Og ... det er min klare overbevisning, at Google også elsker sprød og simpel HTML.

Lær meget mere CSS

Herunder et par af de bøger, jeg har lært CSS fra:




Webshop Shoporama



Martin Hjort 28/11/15 18:01

Måske værd at nævne, at den slags bl.a. handler om, at minimere antallet af klasser man bruger og "forurener" HTML'en med.

Har det så meget at gøre med "cascading" egentlig?

Cascading handler vel mere om rækkefølgen af regler i den måde CSS'en loades, samt ikke mindst reglernes specificitet?

1

Martin Hjort 28/11/15 18:07

For lige at udpensle min pointe omkring "cascading".

I dit eksempel, udnytter du bare muligheden for at deklarere regler i CSS'en på en anden måde end med klasser.

Cascading kommer mere i spil, når man vil "overrule" eksisterende regler, om det er med !important, ID frem for class, eller hvordan man opnår højere vægt til en regel og dermed med specificitet.

Det blev lidt nørdet...

2

Lars Hesselberg 30/11/15 14:01

Fin artikel og en god pointe, men jeg er ikke nødvendigvis enig i, at HTMLen skal holdes så ren som overhovedet muligt. Ved at bruge nested classes, i dit tilfælde #maincontent p, rammer du alle p tags herunder. Det er måske ikke hensigten, eller du kan komme ud for at du har brug for en line-height på 2 senere i indholdet. Hvis det så skal ske, så skal du pludselig tilføje en ekstra klasse, der overskriver den første.

Som udgangspunkt er det dårlig skik at overskrive ens egen css regler, da det skaber forvirring for andre der efterfølgende skal overtage dit stylesheet. Arbejder man på større projekter, er dokumentation og klarhed omkring hvordan hvert element styles enormt vigtig. Eksempelvis at style direkte på et element og ikke en klasse dårlig skik, når man er i den størrelsesorden.

Mit bedste tip er at man skal forholde sig til hvad man skal lave CSS til, og ikke altid gøre det på éen bestemt måde.

3

Jacob Worsøe 15/12/15 13:18

Martin: Pointen med eksemplet er at flytte "font- family : verdana;" til det ovenliggende element, så det nedarves til de underliggende elementer via cascading, så man ikke skal sætte det på hvert enkelt underliggende element. Det er ikke et stort performance issue, da gzip vil komprimere redundant kode, såfremt det er slået til på serveren. Men browseren skal stadig læse og behandle den samme CSS regel to gange, hvilket er unødvendigt.

Og så bliver det mere nemmere at vedligeholde, hvis font-family kun skal rettes ét sted...

Så skal vi bare lige have Morten lært at bruge klasser istedet for ID'er som CSS selector, så det bliver nemmere at overskrive tidligere regler, uden at man kommer ud i noget !important snavs :)

4

Morten Vadskær 15/12/15 21:47

Hæ, @worsøe ? skarp som altid. Tilbage i 2010 var jeg til An Event Apart i Seattle og fik faktisk at vide, at man kun skal bruge klasser til CSS. Jeg kunne godt se fidusen ved det, men har aldrig rigtigt vænnet mig til det.

5

Lars Hesselberg 16/12/15 09:07

@Vadskær: Classes til css, ID'er til javascript. Det gør det en del nemmere for den næste der skal ind og rette :-)

6

Morten Vadskær 16/12/15 11:30

@Hesselberg Jeps... er med på den. Prøver... jeg prøver... men svært at lære en gammel hund nye tricks

7

Jacob Worsøe 16/12/15 11:40

Hehe, det er sjovt... Jeg startede også med at style via ID'er... Det må være os der er af den gamle skole :)

8

Smid en kommentar

Brug dit eget navn - ikke sådan noget "billig arganolie" eller "mobilt bredbånd"

Anti-spam-check (beklager, men det er åbenbart nødvendigt):

Hvad er fem + fem? (skriv tal - ikke bogstaver)