Waarom werkt mijn CSS niet?

In negen van de tien gevallen is het een van drie dingen: je cache, een typefout, of een andere regel die sterker is.

Controleer ze in die volgorde. De eerste kost tien seconden en is de meest voorkomende oorzaak.

Pas daarna ga je zoeken.

Je cache

Je site bewaart een kant-en-klare versie, je browser bewaart de oude opmaak, en soms zit er ook nog een CDN tussen.

Leeg ze van binnen naar buiten: eerst je site, dan je browser. Meer daarover lees je bij cache.

Een typefout

Een vergeten accolade of puntkomma zet niet alleen die regel uit, maar vaak alles wat erna komt.

Haal de regel weg die je als laatste toevoegde en kijk of de rest weer werkt. Dan weet je waar het zit.

Een sterkere regel

Meerdere regels kunnen hetzelfde onderdeel aanwijzen. Dan wint de meest specifieke, en anders de laatste.

Je thema of je paginabouwer heeft vaak al een regel die specifieker is dan die van jou.

Mijn vuistregels

1. Leeg altijd eerst je cache; dat scheelt de meeste zoektijd.
2. Voeg één regel tegelijk toe.
3. Gebruik de inspectiefunctie van je browser om te zien welke regel wint.
4. Gebruik de uitroeptekenregel niet als noodgreep.

Die derde is het handigste hulpmiddel dat de meeste mensen niet kennen.

Hoe je het opzoekt

Klik met de rechtermuisknop op het element en kies Inspecteren. Je ziet dan alle regels die erop van toepassing zijn, en welke doorgestreept zijn.

Doorgestreept betekent: overschreven door een sterkere regel. Daar zit je antwoord.

Waarom de uitroeptekenregel geen oplossing is

Hij dwingt je regel af, maar hij verbergt het probleem. De volgende keer moet je er weer een gebruiken, en zo bouw je een web dat niemand meer ontwart.

Meer daarover lees je bij waar je je eigen CSS neerzet in WordPress.

Veelgestelde vragen hierover