Goed, duidelijk, onderhoudbaar en overdraagbaar CSS schrijven levert nog wel eens wat problemen op. Maar al te vaak ontstaan ellenlange CSS files met enorme hoeveelheid klassedeclaraties. Als je ooit een dergelijk project mag onderhouden of aanpassen, dan ben je nog niet jarig. In dit artikel geef ik aan hoe je structuur in je CSS kan aanbrengen. Object georienteerd werken is daar één van. Weet je eindelijk waarom een “class” een “class” heet.

Stap 0: structuur in je code

Commentaar

Voeg commentaar toe in je code! CSS kent alleen block comments (/* … */), geen line comments dus. Als je een property toevoegt om een bepaalde bug op te lossen, zet het er dan bij (bijvoorbeeld display:inline bij floats). Zorg er in ieder geval voor dat je klassen van commentaar worden voorzien. Verwijs eventueel naar bijbehorende Java of JavaScript klassen.

media blokken

Deel je code op in logische blokken. Dit kan heel eenvoudig worden gedaan door media blokken te definieren. Dit geeft meteen al opvouwbare blokken in je favoriete editor, commentaar bij de blokken helpt je overzicht te houden. Zie onderstaand voorbeeld.

Stap 1: elements.css

Browsers hebben een default stylesheet. Dat is wat je te zien krijgt als je helemaal geen CSS in je pagina laadt en ook geen user CSS hebt. Deze default stylsheet zorgt ervoor dat paragrafen een marge hebben, kopjes wat groter zijn, menu’s inspringen en code monospaced is. Tien tegen één dat je dat anders wilt hebben. Je wilt waarschijnlijk een ander lettertype, links in een andere kleur etc. Ga daar eerst mee aan de slag

Maak een losse file hiervoor, noem het elements.css. Een goede gewoonte en het zorgt ervoor dat je ook van anderen precies weet wat er in te vinden is. In deze file gaan we alleen de default styles van elementen aanpassen. In het algemeen (uitzonderingen zijn vrijwel nooit), staan hierin geen attribuut selectors, dus ook geen klasse- of idreferenties.

Deel de file op in tenminste drie blokken. Eén voor de structure level elementen, één voor de block level elementen en één voor de inline level elementen. Eventueel kan je nog aparte blokken opnemen voor form gerelateerde elementen en table gerelateerde elementen.

Deze style rules zijn zeer waarschijnlijk relevant voor alle media.

Download hier de template (rechtermuisklik, save link as)

Stap 2: layout.css

Vervolgens heeft je pagina een bepaalde layout. In het algemeen een header, een content gedeelte en een footer. Het is een goede gewoonte om hiervoor div‘s te maken met bovengenoemde klasse (header, content, footer dus). Dat is een goede gewoonte omdat iedereen dat toch al doet.

Zorg in deze file, noem hem layout.css dat alles op zijn plaats komt. In het algemeen staat in deze file erg weinig met betrekking tot kleur en lettertypes. Belangrijkste hier is de positionering van alles. Het is waarschijnlijk niet een heel erg grote file.

Deze style rules zijn zeer waarschijnlijk heel erg specifiek per media type.

Download hier de template (rechtermuisklik, save link as)

Stap 3: klasse definities

Vervolgens staan er structuren op je pagina, structuren die groter zijn dan losse HTML elementen. Denk hierbij bijvoorbeeld aan een menu, tabbladen, een plaatje met een omschrijving, een quote met een referentie, een artikel met een kopje, een samenvatting en een “lees meer link” etc. Dit zijn objecten, instanties van klassen. Soms komen deze klassen direct terug ergens in je code. Dit kan bijvoorbeeld JavaScript code zijn die je tabbladen laat werken, een content element in je cms of direct gerelateerd zijn aan een klasse in je serverside code. Ook CSS is object georienteerd in de zin dat het OO concepten als polymorfisme, modulariteit en overerving prima faciliteert.

Deze klassen hebben vaak al een naam, zorg ervoor dat deze naam consistent wordt doorgevoerd in je html klassen (het class attribuut dus). Mocht je een gedeelde css library opzetten, dan is het zelf een optie om de volledige qualified name op te nemen. Iets als com-finalist-blog-article is een te overwegen naam. In het algemeen is de local name (article) wel zat. Merk op dat punten in een klassenaam problemen geven, vandaar de hyphens.

Hier is het erg belangrijk om te begrijpen waar klassen nou eigenlijk om gaan. Het is niet een manier om “stijl te hangen” aan een bepaald element. Sterker nog, het class attribuut heeft helemaal niets met CSS te maken! Het is een attribuut om aan te geven van welke klasse(n) een HTML substructuur een instantie is. Vanwege het feit dat een element tot een klasse behoort heeft hij vaak een aparte opmaak, daarom is er in CSS een shortcut selector (de “.”) voor bedacht.

Ga niet helemaal los met klasses. Niet alles is een klasse namelijk. Binnen een klasse (bijvoorbeeld article) kan je individuele stukken vaak heel goed benaderen door middel van combinators. Merk op dat in recente browsers alle CSS3 combinators werken. In IE6 werkt alleen de “descendant combinator” (de spatie). Zorg dat je klasses modulair en atomair zijn.

Tijdens development is het erg handig om voor elke klasse een aparte stylesheet te maken (com.finalist.blog.article.css etc.). Zodra de hele boel af is, is het juist weer nuttig (performancegewijs) om de boel bij elkaar te “packagen”. Als je dat doet, zorg er dan voor dat de naam van je package hetzelfde is als in je Java en JavaScript (en andere talen). Zorg er ook voor dat de package indeling consistent is.

Stap 4: andere media

CSS is voor meer media dan alleen je scherm. Print is na screen wel zo’n beetje het belangrijkste. Afhankelijk van je doelgroep en doelbrowser kan het aural medium ook nog wel eens nuttig zijn. Hoe je hiermee omspringt hangt een beetje af van de hoeveelheid code die het gaat kosten. In veel gevallen is vooral de layout anders. Bij een kleine hoeveelheid code zet je het er gewoon in dezelfde file achter in een eigen media blok. Heb je meer code, splits het dan uit over meerdere files. Zorg in ieder geval voor dat je werkwijze consistent is binnen je project.