7 CSS tips

In dit artikel wil ik je wat eenvoudige tips voor je CSS documenten geven. Het zijn tips waarmee je je stijbladen voor jezelf wat toegankelijker maakt en waardoor je meer inzicht houdt in wat je aan het doen bent.
CSS is de manier om je website van opmaak te voorzien. HTML is er voor de structuur.

1. Logische opbouw

Zorg ervoor dat je CSS document een logische opbouw heeft. Eerst de belangrijke onderdelen met stijlen die een hele webpagina aangaan. Daarna de verschillende delen (divs) benoemen en vervolgens de verschillende kopteksten. Daarna substijlen, bijvoorbeeld onderdelen zoals een paragraaf. Aan het einde plaats je stijlen die van toepassing zijn op bijvoorbeeld een enkel stukje tekst of een individuele afbeelding.

Een goed voorbeeld is een boilerplate die ik in het verleden eens gemaakt heb. Met deze boilerplate CSS heb je alle benodigde onderdelen op een rij staan.

2. Herkenbare namen

Er zijn nog veel websitebouwers die hun classes en id’s namen geven zoals “een” of “linksboven” of “rood”. Dit zijn geen handige namen. Kies er eerder voor om de functie van het onderdeel te benoemen, bijvoorbeeld “menulink”, of “tekst-nadruk”. Zo kun je voorkomen dat wanneer je rode tekst later groen wilt maken, niet een verkeerde naam meekrijgt.

Ga dit jezelf aanwennen vanaf het moment dat je begint met websites maken. Vanaf het eerste moment logische namen geven voorkomt veel onnodig zoekwerk op een later moment. Zeker als er later misschien wel iemand anders met de code aan het werk moet. Zo moet je dus schrijven, dat iemand anders de code ook kan ontcijferen.

3. Commentaar regels toevoegen

In de boilerplate is gebruikt gemaakt van commentaar regels om ten eerste commentaar toe te voegen, maar ook om de aparte delen aan te duiden. Zo kun je bovenaan het document notities opschrijven voor als je bijvoorbeeld met een ander samenwerkt.

Zo’n regel commentaar maak je als volgt:

/* Dit is commentaar op een regel */
/* Dit is commentaar
op meerdere
regels, dat mag dus ook! */

4. Verkorte CSS codes gebruiken

Er zijn verschillene verkorte CSS codes. Zo mag je bijvoorbeeld een lijn van een vierkant afkorten door ‘1px solid black’ als waarde mee te geven, waar het uitgeschreven als volgt zou zijn:

#box {
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
}

Ook dit is alweer een verkorte versie trouwens want border kun je ook weer in drie onderdelen opdelen, border-width, border-style en border-color. Zo heb je bijvoorbeeld ook verkorte versies voor ‘background’ en ‘font’.

5. Geen stijlen in je HTML document

Probeer zoveel mogelijk te voorkomen dat je stijlen in je HTML document plaatst. Dit maakt je code alleen maar onoverzichtelijker. Heb je een nieuwe stijl, plaats die onderaan in je CSS stijlblad. Haal je een stijl definitief weg, pas dit dan ook toe in je stijblad. Niets is onzinniger dan dat je een stijlblad vol met stijlen hebt die je helemaal niet gebruikt.

Ik realiseer met dat dit niet helemaal te voorkomen is, maar probeer het jezelf aan te leren. Je houdt je code schoon en vrij van onzin en dat is belangrijk, al is het maar voor jezelf.

6. Gebruik meerdere stijlbladen

Het kan handig zijn, als je heel veel stijl gebruikt, om meerdere stijlbladen te gebruiken. Bijvoorbeeld met een hoofdstijlblad, een stijlblad met belangrijke zaken, een stijlblad met kleine stijlaanpassingen en een stijlblad met hacks voor bijvoorbeeld Internet Explorer. Je houdt daarmee de zaken nog overzichtelijker.

Voor sommige zaken is het zelfs nodig om extra stijlbladen aan te maken, bijvoorbeeld een stijlblad om te printen en om stijlbladen te maken voor mobiele telefoons.

7. Proberen en lezen

Het meeste leer je van CSS door er veel over te lezen, maar nog meer door er concreet mee aan de slag te gaan. Dat is eigenlijk de belangrijkste tip die ik je kan mee geven, oefenen tot je erbij neer valt, dan komt de kennis pas echt! Veel succes.