Inline CSS: de opmaak die altijd wint en nooit meebeweegt
Je wilt een kop op je site donkerblauw maken. Je past het aan in je stijlbestand, ververst de pagina en er gebeurt niets. Je probeert het nog een keer, preciezer geschreven, en nog steeds niets. De kop blijft koppig grijs. Er is niets stuk, er staat alleen ergens een regel die van jou wint.
Negen van de tien keer is dat inline CSS. Opmaak die rechtstreeks in het element zit.
Bij Vroeger Kroeg kwam ik daar een site tegen die vol zat. Ik verzorgde daar het webdesign en de vindbaarheid. Op elke pagina stonden losse kleuren en lettergroottes per blok.
Een kleur wijzigen betekende dan honderd plekken langs. Ik heb die opmaak weggehaald en centraal vastgelegd. Nu verandert een kleur op een plek en schuift de hele site mee.
Opmaak die vastzit aan een element, en daarom alles overschrijft.
Wat is inline CSS?
Inline CSS is opmaak in het element zelf, in plaats van in een apart bestand. Je zet een style-attribuut in de tag en schrijft daar je regels in.
Dat werkt direct en het is verleidelijk. Je ziet het resultaat meteen en je hoeft geen bestand te openen. Precies daarom zit het overal.
Waar het vandaan komt
Zelden van een ontwikkelaar. Meestal van een paginabouwer, van een tekstverwerker die je kopieert, of van een plugin die opmaak meestuurt.
Ook Elementor en andere bouwers zetten instellingen om naar opmaak. Dat gaat vaak netjes in een apart bestand, maar niet altijd.
Waarom het altijd wint
Door specificiteit. In CSS stapelen regels op elkaar en wint de meest specifieke aanwijzing.
Opmaak in het element zelf is de meest specifieke die er is. Alleen een uitroepteken met het woord important wint daarvan.
Dat is precies het probleem. Je kunt er niet omheen zonder zwaarder geschut. Zo begint een wapenwedloop in je code.
Waarom het je onderhoud kost
De onderhoudbaarheid lijdt eronder, en dat merk je pas na een jaar.
Drie concrete gevolgen
Een huisstijlkleur wijzigen kost honderd handelingen in plaats van een.
Je opmaak beweegt niet mee met schermformaten.
Niemand kan meer overzien waar iets vandaan komt.
Dat tweede punt is het meest zichtbaar voor je bezoeker. Een vaste breedte in een element wordt op een telefoon niet automatisch smaller.
Wanneer je het wel gebruikt
Er zijn twee situaties waarin het klopt. De eerste is opmaak die per element echt verschilt en uit een database komt. Denk aan een kleurenbalk per project.
De tweede is kritieke opmaak: de opmaak die nodig is om het eerste scherm te tonen. Die zet je bewust in de pagina zelf. Dan hoeft er niet gewacht te worden op een extern bestand. Meer daarover lees je bij pagespeed.
Buiten die twee gevallen hoort opmaak in een stijlbestand.
Opruimen
Begin bij het zoeken. In de broncode van je pagina zoek je op het woord style met een isgelijkteken. Meer over die code lees je bij HTML.
Bij het opruimen vervang ik losse waarden door benoemde waarden in het stijlbestand van het child theme. Werk pagina voor pagina en test na elke stap.
Doe dit nooit in een keer op een live site. Er zit altijd iets tussen dat je niet had zien aankomen.
Hoe je het herkent
Klik met de rechtermuisknop op het element en kies inspecteren. Rechts zie je welke regels erop worden toegepast en welke wint.
Staat de winnende regel met de aanduiding element style bovenaan? Dan is het inline en weet je meteen waar je moet zijn.
Waar het vandaan blijft komen
Opruimen is een keer werk, voorkomen is een gewoonte. Plak tekst uit een tekstverwerker altijd zonder opmaak in je editor.
Anders komt er een reeks kleuren en lettergroottes mee. Die zie je nergens staan, maar ze belanden wel in je code. Dat is de meest voorkomende bron bij klanten die zelf teksten bijwerken.
Meer vragen over Inline CSS
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is inline CSS?
Waarom overschrijft inline CSS mijn stijlbestand?
Wanneer gebruik je inline CSS wel?
Waarom is inline CSS slecht voor onderhoud?
Wat is kritieke CSS?
Hoe ruim je inline CSS op?
Wat is inline CSS?
Door specificiteit. In CSS stapelen regels op elkaar en wint de meest specifieke aanwijzing.
Een regel over alle koppen is algemeen. Een regel over koppen in je footer is specifieker. En opmaak die in het element zelf staat, is de meest specifieke die er is.
Alleen een uitroepteken met het woord important wint daarvan. Dat is precies het probleem, want zo begint een wapenwedloop in je code.
De eerste keer werkt het. De tweede keer moet je nog zwaarder geschut gebruiken. Na een jaar staat je stijlbestand vol met uitroeptekens en snapt niemand meer waarom.
Dit verklaart de klassieke klacht: ik pas mijn kleur aan en er gebeurt niets. Er is dan niets stuk, er staat alleen ergens een regel die van jou wint.
Gebruik het uitroepteken met important alleen als laatste redmiddel. Elke keer dat je het inzet, maak je het volgende probleem moeilijker. Zoek eerst waar de winnende regel vandaan komt voordat je zwaarder geschut inzet.
Waarom overschrijft inline CSS mijn stijlbestand?
Inline CSS is opmaak die je rechtstreeks in een element schrijft, in plaats van in een apart stijlbestand. Je zet een style-attribuut in de tag en schrijft daar je regels in.
Dat werkt direct en het is verleidelijk. Je ziet het resultaat meteen en je hoeft geen bestand te openen. Precies daarom zit het overal.
Het komt zelden van een ontwikkelaar. Meestal van een paginabouwer, van een tekstverwerker waaruit je hebt gekopieerd, of van een plugin die opmaak meestuurt.
Ook bouwers zetten instellingen om naar opmaak. Dat gaat vaak netjes in een apart bestand, maar niet altijd.
Het probleem is niet dat het niet werkt. Het probleem is dat het te goed werkt: het wint van bijna elke andere regel die je schrijft. Meer over de techniek lees je bij CSS.
Zoek in je broncode eens op style met een isgelijkteken. Het aantal treffers zegt genoeg over de staat van je opmaak.
Wanneer gebruik je inline CSS wel?
Er zijn twee situaties waarin het klopt, en verder eigenlijk geen.
De eerste is opmaak die per element echt verschilt en uit een database komt. Denk aan een kleurenbalk per project of een voortgangsbalk met een variabel percentage.
Die waarde kun je niet vooraf in een stijlbestand zetten, want hij verandert per item.
De tweede is kritieke opmaak: de regels die nodig zijn om het eerste scherm te tonen. Die zet je bewust in de pagina zelf, zodat er niet gewacht hoeft te worden op een extern bestand.
Dat scheelt merkbaar in je laadtijd, want je bezoeker ziet eerder iets. Buiten die twee gevallen hoort opmaak in een stijlbestand. Meer daarover lees je bij pagespeed.
Buiten die twee gevallen hoort opmaak altijd in een stijlbestand. Twijfel je? Dan is het antwoord vrijwel zeker nee. Laat je bouwer die keuze onderbouwen als hij er toch voor kiest. Dat scheelt je later een berg opruimwerk en een hoop zoeken.
Waarom is inline CSS slecht voor onderhoud?
Om drie redenen, en je merkt ze pas na een jaar.
Een huisstijlkleur wijzigen kost dan honderd handelingen in plaats van een. Staat je accentkleur op tachtig plekken los ingevuld, dan moet je ze allemaal langs.
Je opmaak beweegt niet mee met schermformaten. Een vaste breedte in een element wordt op een telefoon niet automatisch smaller. Dat zie je terug als tekst die buiten beeld valt.
En niemand kan meer overzien waar iets vandaan komt. Een volgende bouwer zoekt zich suf naar die ene regel die alles overschrijft.
Dat maakt elke wijziging duurder dan hij zou moeten zijn. Wat vandaag vijf minuten leek te besparen, kost je over twee jaar een dagdeel.
Reken de kosten om naar uren. Een kleurwijziging die een dagdeel kost in plaats van vijf minuten, verdient dat opruimwerk snel terug. Vraag je bouwer een keer hoeveel het er zijn, dan weet je waar je aan begint.
Hoe ruim je inline CSS op?
Begin bij het zoeken. In de broncode van je pagina zoek je op het woord style met een isgelijkteken erachter.
Je ziet dan meteen hoeveel het er zijn. Bij een gemiddelde site die jaren gegroeid is, schrik je van dat aantal.
Vervang daarna losse waarden door benoemde waarden in het stijlbestand van je child theme. Dus geen kleurcode per blok, maar een accentkleur die overal geldt.
Werk pagina voor pagina en test na elke stap. Er zit altijd iets tussen dat je niet had zien aankomen.
Doe dit nooit in een keer op een live site. Zet eerst een kopie op en werk daar, want je haalt opmaak weg die ergens anders net nodig bleek te zijn.
Plak tekst uit een tekstverwerker altijd zonder opmaak. Dat is de meest voorkomende bron bij klanten die zelf teksten bijwerken. Gebruik daarvoor de plakken zonder opmaak optie in je editor, die zit er standaard in.
Lukt het niet om een kleur of lettergrootte aan te passen op je site? Stuur me de pagina via het formulier hieronder. Ik zoek uit waar die opmaak vandaan komt en of het opgeruimd kan worden. Vaak is het een enkele regel die alles blokkeert. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Inline stijl, style-attribuut, opmaak in de tag
