bjornpost.com

1. Houd je code zo simpel mogelijk.

Simpeler is altijd beter. Waarom zou je article#featured gebruiken als selector als #featured ook voldoende is? Naast dat je selector zo specifiek mogelijk moet zijn (zie volgende punt), moet je ook optimaal gebruik maken van overerving. Als selector p al line-height: 1.3em; heeft, dan is het natuurlijk zonde om dat op p#stand-out nogmaals te doen.

2. Maak selectors niet specifieker dan strict noodzakelijk.

Helaas zie ik dat ook nog veel te regelmatig voorbij komen. Ieder element in het document krijgt een id, en dat krijgt een stijl. Zonde, want zo wordt je stylesheet al snel een rommeltje.

3. Leg in de naam van de class/id niet de stijl vast, maar de toepassing.

Ook een veelgemaakte fout. Een goed voorbeeld: een div met als id #content-rechts. Beter is het om dit gewoon #sidebar te noemen. Zo leg je in de naam nog niks vast over de stijl. Dat #sidebar uiteindelijk rechts op de pagina belandt is niet erg. Wat wel vervelend zou zijn is dat als na een paar maanden blijkt dat de #content-rechts div niet op de goede plek staat, en dat 'ie eigenlijk gewoon onder #content moet komen. Dan zit je met een selector die niet meer klopt..

4. Deel je stylesheet op in brokken.

Op het moment dat je applicatie/website groter wordt, zul je ook merken dat de hoeveelheid regels CSS toe zal nemen. Op dat moment kun je besluiten om je stylesheet op te breken in stukken.

Op deze website bijvoorbeeld, maak ik gebruik van 4 stylesheets. Afhankelijk van de pagina, wordt er naast de basis stylesheet ook een extra stylesheet geladen, specifiek voor die pagina. Op deze pagina laad ik bijvoorbeeld naast blog.generic.css ook blog.articles.css.

5. Weg met die hacks in je stylesheet, gebruik conditional comments.

Hacks zijn vies, ze heten immers niet voor niks hacks. Door gebruik te maken van conditional comments voor IE kun je het gedrag van een bepaalde selector veel beter voorspellen als met een hack.

Afsluitend

Pas na een paar maanden zie je of je code 'goed' was opgebouwd. Waarom? Waarschijnlijk komen dan de eerste aanpassingen. Kun je gemakkelijk nieuwe inhoud toevoegen zonder dat de layout overhoop gaat?