Wanneer je aan de slag gaat met webdesign, is CSS een cruciaal element om alles goed werkend te krijgen en er mooi uit te laten zien. Het is een afkorting van Cascading Style Sheets, en ze werken door je HTML elementen te laten stylen zoals jij dat wilt.
En hoewel je op verschillende manieren met CSS kunt experimenteren – meestal inline – is er een betere manier om dit te doen. En dat sluit aan bij een aantal best practices die je moet volgen om ervoor te zorgen dat je code functioneel is, geen overbodige rommel bevat en goed georganiseerd is.
Vandaag belichten we 14 CSS best practices voor beginners, maar zelfs voor ervaren professionals is het slim om af en toe weer even te worden herinnerd aan de basis.
Bekijk onze videogids met CSS best practices voor beginners
1. Organiseer de stylesheet
Je eerste taak bij het toepassen van de best practices van CSS is het organiseren van je stylesheets. Hoe je dit aanpakt, hangt af van je project, maar als algemene regel geldt dat je je aan de volgende organisatorische principes moet houden:
Wees consistent
Het maakt niet uit hoe je je CSS organiseert, zorg ervoor dat je keuzes consistent zijn voor de hele stylesheet en voor je hele website.
Van de naamgeving van klassen tot regelinspringingen en commentaarstructuren: als je alles consistent houdt, kun je je werk gemakkelijker bijhouden. Bovendien zorgt het ervoor dat het maken van veranderingen, later, véél makkelijker is.
Wees niet zuinig met linebreaks
Hoewel CSS zal functioneren, zelfs als het visueel niet om aan te zien is, is het beter voor jou en voor alle andere ontwikkelaars die met je code zullen werken als je veel linebreaks gebruikt om elk codefragment apart en leesbaar te houden.
Doorgaans is het het beste om elke property en waardepaar op een nieuwe regel te plaatsen.
Maak nieuwe secties waar het zinvol is
Nogmaals, hoe je je stylesheets opstelt hangt grotendeels af van het type site waar je aan werkt. Maar als algemene regel geldt dat het een goed idee is om secties in te richten voor stijlen zoals ze gebruikt zullen worden. Een sectie voor tekststijlen, een sectie voor lijsten en kolommen, een sectie voor navigatie en links, enzovoort. Je kunt ook secties maken voor specifieke pagina’s die een andere stijl kunnen hebben dan de rest, zoals de winkel of veelgestelde vragen.
Schrijf comments bij je code
Zelfs als alleen jij je CSS ooit te zien krijgt, is het toch een goed idee om grondig te zijn met je commentaar. Comments zullen er als volgt uitzien:
/* This is what a standard CSS comment looks like */Zo kunt je in één oogopslag zien waar elk onderdeel betrekking op heeft zonder dat je later elke regel hoeft te bestuderen.
Comments kunnen je helpen om secties te definiëren, maar je kunt ze ook gebruiken om inzicht te geven in de beslissingen die je hebt genomen – vooral als je denkt dat je ze later misschien vergeet.
Gebruik afzonderlijke stylesheets voor grotere projecten
Dit zal niet voor elke website gelden, maar als je een grote site hebt met behoefte aan veel specifieke CSS, is het gebruik van meerdere stylesheets een goed idee. Niemand – ook jij niet – wil heel lang te scrollen om die ene regel code te vinden die je nodig hebt.
Vermijd gedoe en maak aparte stylesheets voor verschillende sitesecties – vooral als ze volledig verschillende stijlen hebben.
Je kunt bijvoorbeeld een stylesheet willen maken voor algemene stijlen en een andere voor je online winkel met specifieke stijlen voor productomschrijvingen, headings, of prijzen.
2. Inline CSS vs. externe CSS vs. interne CSS
Er zijn drie verschillende soorten CSS waarmee je mogelijk te maken moet krijgen bij het bouwen van een website en het aanpassen van de styling ervan. Laten we eens praten over wat elk is en doet en dan bespreken welke je eigenlijk zou moeten gebruiken voor jouw projecten.
- Inline CSS. Hiermee kun je specifieke HTML elementen stijlen,
- Externe CSS. Hierbij wordt een bestand zoals een stylesheet gebruikt om de site in zijn geheel op te maken.
- Interne CSS. Hiermee kun je een hele pagina stijlen in plaats van specifieke elementen.
Veel ontwikkelaars raden aan om inline CSS helemaal te vermijden, omdat het meestal niet in de cache kan worden opgeslagen, en het wordt aanbevolen om te voorkomen dat CSS over meerdere bestanden wordt gesplitst. Op zijn minst moet het spaarzaam worden gebruikt.
Wij zien eigenlijk alleen de noodzaak ervan in als je een beetje styling gebruikt op een enkele sectie, stukje tekst, of gebied van een enkele pagina van je website. Dat is waarschijnlijk de enige situatie waarin inline CSS een werkbare oplossing is.
Verder is het gebruik van externe CSS of interne CSS, afhankelijk van je behoeften, de beste optie, omdat het je tijd en moeite bespaart. Bepaal de stijlen één keer en pas ze toe op jouw website. Boem – klaar.
3. Minificeer je stylesheet
Een andere CSS best practice is om je stylesheets te minificeren. Er zijn tal van minificatietools beschikbaar om de laadtijden van je stylesheets te versnellen, ook direct binnen Kinsta CDN.
Hiermee kun je de instellingen voor codeminificatie op je hele website aanpassen.
4. Gebruik een preprocessor
Met een preprocessor zoals Sass/SCSS kun je variabelen en functies gebruiken, je CSS beter organiseren en tijd besparen. Ze werken door je in staat te stellen CSS te schrijven vanuit de preprocessor syntaxis.
Wat dit betekent is dat de preprocessor een soort “CSS+” is waar het een aantal features bevat die normaal niet bestaan in CSS zelf. De toevoeging van deze features maakt de output CSS meestal leesbaarder en gemakkelijker te navigeren.
Je hebt een CSS compiler nodig op de server van je website om gebruik te kunnen maken van preprocessors. Enkele van de meest populaire preprocessors zijn Sass, LESS, en Stylus.
5. Overweeg een CSS framework
CSS frameworks kunnen in sommige gevallen nuttig zijn, maar kunnen voor veel mensen overbodig zijn, vooral als je website aan de kleine kant is.
Frameworks kunnen het eenvoudig maken om snel grote projecten te implementeren en ook bugs te voorkomen. En ze bieden het voordeel van standaardisatie, wat essentieel is wanneer meerdere mensen tegelijkertijd aan een project werken.
Iedereen gebruikt dan dezelfde naamgevingsprocedures, dezelfde layoutopties, dezelfde commentprocedures, enzovoort.
Anderzijds resulteren ze ook in generiek ogende websites en een groot deel van de code kan uiteindelijk ongebruikt blijven.
Waarschijnlijk ben je CSS frameworks wel eens tegengekomen, Bootstrap en Foundation zijn twee van de populairste voorbeelden. Andere frameworks zijn Tailwind CSS en Bulma.
6. Begin met een reset
Een ander ding om snel in de praktijk te brengen is om je ontwikkelwerk te starten met een CSS reset. Door iets als normalize.css te gebruiken, kunnen alle browsers pagina-elementen op een consistente manier renderen, terwijl de meest recente standaarden worden gevolgd om browserinconsistenties te minimaliseren.
Deze reset is eigenlijk een klein CSS bestand dat je uploadt naar je website om een hoger niveau van cross-browser consistentie toe te voegen aan de styling van HTML elementen en dient als een modernere manier om een CSS reset uit te voeren.
7. Klassen vs. ID’s
Het volgende waar je op moet letten bij het volgen van CSS best practices is hoe je klassen en ID’s behandelt. In het geval dat je niet bekend bent, laten we beide kort definiëren:
- Klasse. De class selector werkt door een element met een klasse-attribuut te selecteren. Wat in het klasse-attribuut staat, bepaalt hoe het HTML element wordt geselecteerd. In code ziet het er zo uit: .classname
- ID. ID, daarentegen, werkt door een element met een ID attribuut te selecteren. Het ID attribuut moet hetzelfde zijn als de waarde van de selector om het te laten werken. Je kunt een ID in CSS herkennen aan dit symbool: #.
Een ID wordt gebruikt om een enkel element te selecteren, terwijl een klasse wordt gebruikt om meer dan een element te selecteren. Je gebruikt een ID om een stijl toe te passen op een enkel HTML element. Je gebruikt een klasse om een stijl op meer dan één HTML element toe te passen. Het volgen van deze algemene regel helpt om je code schoon en netjes te houden en vermindert ook het aantal onnodige of dubbele codes.
Net als bij onze bespreking van inline versus externe CSS hierboven, gebruik je een ID om een stijl toe te passen op een enkel element. In principe zijn ID’s bedoeld voor het stylen van de uitzonderingen op de pagina, niet voor overkoepelende stijlen die voor de hele pagina of website gelden.
8. Vermijd overtollige code
Nog een van de CSS best practices is het vermijden van overtolligheid waar en hoe je maar kunt. Hier volgen enkele algemene tips om dit toe te passen op je workflow:
Gebruik de DRY methode
De DRY methode staat voor “Don’t Repeat Yourself” en is eigenlijk het idee dat je nooit code moet herhalen in CSS. Want in het beste geval is het tijdverspilling en repetitief om stijlen steeds weer handmatig in te voeren, en in het slechtste geval kan het je website actief vertragen.
Het is een goede gewoonte om je code na te lopen en overbodige en dubbele code te verwijderen. Er zijn bijvoorbeeld geen tags nodig om de lettergrootte twee keer in dezelfde sectie aan te geven. Verwijder de herhalingen en je code zal beter leesbaar zijn en ook beter presteren.
Gebruik CSS shorthand
CSS shorthand is een geweldige manier om de hoeveelheid ruimte die je code inneemt te verminderen, terwijl de code nog steeds naar behoren werkt. Je kunt meerdere stijlen combineren binnen een enkele regel als het zinvol is om dit te doen. Als je bijvoorbeeld de stijlen van een bepaalde div instelt, kun je de marge, padding, lettertype, lettergrootte en kleur allemaal op een enkele regel zetten.
Voeg meerdere klassen toe aan je elementen
Indien van toepassing kun je overbodigheden ook vermijden door meer dan één klasse aan een element toe te voegen. Als de content van je pagina bijvoorbeeld al naar links zweeft dankzij de klasse .left, maar je wilt een kolom op de pagina naar rechts plaatsen, dan kun je dat aan het element toevoegen om verwarring te voorkomen en CSS specifiek te vertellen welk element je naar rechts wilt laten zweven bovenop de standaard uitlijning naar links.
En het mooiste is dat je zoveel klassen aan een element kunt toevoegen als je wilt, zolang ze maar gescheiden worden door een spatie.
Combineer elementen waar mogelijk
In plaats van elementen één voor één op te sommen, kun je ze beter combineren om ruimte en tijd te besparen. Vaak hebben elementen binnen een enkele stylesheet dezelfde (of vergelijkbare) stijlen. Het is niet nodig om voor elk tekstelement op de pagina het lettertype, de kleur en de uitlijning op te sommen als ze allemaal dezelfde styling hebben. Combineer ze in plaats daarvan in één regel, zoals hieronder:
h1, h2, h3, p {
font-family: arial,
color: #00000
}Vermijd onnodige extra selectors
Soms wordt je code een beetje rommelig bij het afronden van het ontwerp van je site. Daarom is het belangrijk om achteraf terug te gaan en onnodige selectors te verwijderen. Je moet ook oppassen voor te complexe selectors. Als je bijvoorbeeld lijsten op je website gaat stijlen, hoef je geen selectors als “body” of “container” of iets van dien aard te gebruiken. Alleen .classname li { is voldoende.
9. Lettertypes op de juiste manier importeren
Het importeren en correct gebruiken van lettertypes is een andere manier om ervoor te zorgen dat je CSS duidelijk, beknopt en geoptimaliseerd is.
@font-face gebruiken om lettertypes te importeren
Je kunt vrijwel elk lettertype dat je wilt toevoegen aan je website, maar je moet wel een specifieke procedure volgen om ervoor te zorgen dat het goed werkt.
- Download het lettertype dat je wilt gebruiken. Er zijn veel plaatsen waar je lettertypen kunt vinden, waaronder Google en Adobe. Zorg ervoor dat je het TrueType lettertypebestand (.ttf) voor je gekozen lettertype downloadt.
- Upload het custom lettertype dat je wilt gebruiken naar de Webfont Generator die beschikbaar wordt gesteld door Font Squirrel. Download de Web Font Kit zodra deze is gegenereerd. Het zou verschillende bestanden moeten bevatten, waaronder verschillende lettertypebestanden met extensies als .ttf, .woff, .woff2, en .eot. Er zou ook een CSS bestand bij moeten zitten.
- Upload de Web Font Kit naar je website met behulp van FTP. De specifieke instructies hiervoor zullen variëren afhankelijk van je webhostingprovider, maar over het algemeen kun je toegang krijgen tot de bestanden van je site met behulp van een FTP client of de bestandsbeheerder op de admin-interface van je webhost, zoals cPanel.
- Werk het CSS bestand bij met behulp van een teksteditor. Elke HTML teksteditor die je graag gebruikt is goed genoeg, zoals NotePad of Sublime. In dit bestand wordt een “source URL” weergegeven. Je moet deze bijwerken om aan te geven waar de Web Font Kit nu wordt ondergebracht op je webserver. Kopieer het bestandspad waar elk lettertypebestand op je webhost is opgeslagen als volgt naar dit bestand:
@font-face {
font-family: "FontName";
src: url("https://sitename.com/css/fonts/FontName.eot");
src: url("https://sitename.com/css/fonts/FontName.woff") format("woff"),
url("https://sitename.com/css/fonts/FontName.otf") format("opentype"),
url("https://sitename.com/css/fonts/FontName.svg#filename") format("svg");
}Je kunt dan je nieuwe lettertypes gebruiken door ze toe te voegen aan de CSS bestanden van je site met de font-family tag.
Om de prestaties van de site te verbeteren en om rare aanpassingen van de layout van je site te voorkomen bij het laden, kun je lettertypen vooraf laden. Het vooraf laden (preloaden) van lettertypen en het eerst laden van WOFF2 lettertypen (of de kleinste lettergrootte anders) kan de prestaties drastisch verbeteren. Dit doe je door een regel code toe te voegen aan de <head> tag. Better Web Type biedt een goed voorbeeld:
<link rel="preload" as="font" href="/assets/fonts/3A1C32_0_0.woff2" type="font/woff2" crossorigin="crossorigin">Wat je ook kunt doen, is de tekenset voor je aangepaste lettertypes beperken. Als je maar een paar tekens van een lettertype gebruikt (voor een koptekst of logo, misschien) hoef je niet de hele tekenset op te roepen, alleen een paar die je echt nodig hebt. Met de nieuwe code, om alleen de tekens van “Hallo” op te vragen zou je dit als volgt doen:
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">Host lettertypen zelf indien mogelijk
Het hierboven beschreven proces is voor zelfhostende lettertypen, maar het is belangrijk om te herhalen dat dit de beste aanpak is. Het versnelt de laadtijd aanzienlijk en betekent dat je niet vertrouwt op de snelheid van een andere site om het laadproces van je site te voltooien.
Wees voorzichtig met lettertypevariaties
Lettertypevariaties kunnen super handig zijn om leuke stijlen aan je website toe te voegen. Maar als ze verkeerd worden gebruikt, kunnen ze je website wel kapot maken.
Als je meer dan één stijl toewijst onder font-variation-settings, is het waarschijnlijk dat ze elkaar overlappen en dat de ene de andere overschrijft. Je kunt het veel beter eenvoudig houden en in plaats daarvan lettertype-eigenschappen gebruiken, zoals we hier laten zien:
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}Gebruik een fallback lettertype
Alle moeite die je doet om een aangepast lettertype aan je website toe te voegen en het via CSS te gebruiken ten spijt, het zal het nog steeds niet 100% van de tijd werken – vooral wanneer het wordt gebruikt door iemand met een verouderde webbrowser. Maar je wilt nog steeds dat deze bezoekers van de site een aangename surfervaring hebben.
Om dit mogelijk te maken, is het essentieel om een fallback lettertype in te stellen dat kan worden gebruikt als geen van je andere lettertypen bruikbaar is. Om dit te doen, moet je gewoon het fallback lettertype vermelden na je voorkeurslettertype wanneer je een font-family. toewijst. Op deze manier zal de CSS eerst je voorkeurslettertype aanroepen, dan je tweede keuze, dan je derde, enzovoort.
Volgens W3Schools zijn er vijf hoofdcategorieën voor lettertypefamilies. Hier volgt een lijst van deze families met populaire fallback lettertypen erbij passen.
- Serif: Times New Roman, Georgia, Garamond
- Sans-serif: Arial, Tahoma, Helvetica
- Monospace: Courier New
- Cursive: Brush Script MT
- Fantasy: Copperplate, Papyrus
10. Maak CSS toegankelijk
Iedereen zou zijn websites voor iedereen goed toegankelijk moeten maken. En dit geldt ook voor je benadering van CSS. Je doel moet zijn om je website bruikbaar te maken voor zoveel mogelijk mensen en het implementeren van toegankelijkheidsmaatregelen is een fantastische manier om dit te bereiken.
Je kunt je CSS op verschillende manieren toegankelijk maken:
- Voeg kleurvariatie toe aan links om ze te laten opvallen.
- Maak popups afsluitbaar door op de ESC toets te drukken. Degenen die schermlezers of vergroting gebruiken, kunnen de “X” op het scherm vaak niet zien om een popup te negeren, dus het is essentieel om ze via een toetsaanslag te verwijderen.
- Sommige apparaten tonen zelfs geen popups, dus zorg ervoor dat alle essentiële informatie elders wordt overgebracht.
- Hover-elementen (zoals tooltips) moeten worden geactiveerd door de Tab toets, naast een muisaanwijzer.
- Verwijder de contouren niet. Browsers tonen automatisch een omlijning rond elementen waarop het toetsenbord op dat moment is gericht. Je zou dit uit kunnen schakelen met outline:none, maar we raden dat ten zeerste af, want het is van onschatbare waarde voor mensen die schermlezers gebruiken of slechtziend zijn en extra markeringen/focuspunten nodig hebben voor navigatie.
- Verbeter de focus indicator. Zoals hierboven vermeld, zijn contouren rond gemarkeerde elementen voor velen essentieel voor de navigatie, maar de standaardomlijning is vaak nauwelijks zichtbaar. Je kunt dit aanpassen zodat het beter zichtbaar is :focus te gebruiken om een stijl in te stellen die meer aandacht vestigt op wat er nu in beeld is. Je kunt iets soortgelijks doen met :hover om cover-effecten te verbeteren. Een goed voorbeeld van het aanpassen van :focus in de praktijk komt uit een reeks toegankelijkheidsrichtlijnen van de Universiteit van Washington:
a {
color: black;
background-color: white;
text-decoration: underline
}
a:focus, a:hover {
color: white;
background-color: black;
text-decoration: none
}Dit codefragment zorgt ervoor dat links als zwarte tekst op een witte achtergrond worden weergegeven, maar verschuiven naar witte tekst op een achtergrond wanneer deze onder de toetsenbordfocus wordt geplaatst (wanneer de gebruiker op het element tikt). Hetzelfde effect treedt ook op bij hover.
11. Implementeer naamgevingsconventies
Het lijkt misschien niet zo belangrijk, maar de naam die je aan dingen geeft in CSS kan blijvende gevolgen hebben – en kan je in de toekomst tijd en geld kosten als je het niet goed doet. Voordat je zelfs maar begint met het schrijven van CSS, moet je beslissen over een reeks naamgevingsconventies en je eraan houden.
Dit bespaart je veel tijd bij het debuggen later, omdat je minder snel naar het verkeerde element verwijst bij het schrijven van je code. Volgens FreeCodeCamp is een goede aanpak om vast te houden aan de standaardopmaak voor CSS namen, d.w.z. font-weight versus fontWeight.
Gebruik de BEM naamgevingsconventie
Een goede manier om namen consistent te houden is de BEM naamgevingsconventie te gebruiken. Het hele punt van Bem is om de gebruikersinterface op te splitsen in componenten die je keer op keer opnieuw kunt gebruiken.
BEM staat voor Block, Element, en Modifier. Maar laten we eens kijken wat dat eigenlijk betekent.
- Block: een blok kan elk deel van het ontwerp op je website zijn, zoals een menu, header, footer of kolom. Je blokken moeten namen hebben als .main-nav of .footer.
- Element. Elementen beschrijven de stukjes waaruit elk blok is opgebouwd. Denk aan zaken als lettertypes, kleuren, knoppen, lijsten, of links. Wanneer de BEM naamgevingsconventie wordt gebruikt, worden elementen geïdentificeerd door twee underscores voor de naam van het element te plaatsen. Dus als we het zouden hebben over het lettertype dat gebruikt wordt in de header van je website, dan zou het er als volgt uitzien in CSS met de BEM naamgevingsconventie: .header__font
- Modifier. Het laatste stukje van de BEM puzzel is de modificator. Met modifiers bepaal je de styling van het element binnen het blok. Dit zijn onder meer namen, gewichten en groottes van lettertypes, kleurwaarden en uitlijningswaarden. Om verder te gaan met het voorbeeld hierboven, als je de kleur van het lettertype in de header wilt instellen, schrijf je het als volgt uit met het element en de modifier gescheiden door twee streepjes: .header__font-red
Het volgen van deze naamgevingsconventie – of iets anders waartoe jouw team besluit – kan later voor een veel aangenamere bewerkings- en debug-ervaring zorgen.
12. Vermijd de !Important tag
Een andere best practice om te implementeren in je CSS werkroutine is om te voorkomen dat het overmatig gebruik van de !important tag – zo veel als je kunt.
Hoewel het problemen kan oplossen, leidt het gebruik ervan vaak tot dat je erop vertrouwt als een kruk. En dat kan resulteren in een warboel van !important tags in je hele code die uiteindelijk je site kapot kunnen maken.
Waar het eigenlijk op neerkomt is specificiteit. Als een selector heel specifiek is, zal je webbrowser bepalen dat hij belangrijker is dan bij minder specifieke selectors. De !important tag kan gebruikt worden om eigenschappen aan te duiden die belangrijker zijn dan andere.
Dit kan lastig zijn omdat je vaak meerdere !important tags moet gebruiken – elk om een vorige te overschrijven in specifieke scenario’s. En als je dit te veel doet, kan je site kapot gaan of kunnen je stijlen niet goed laden. Meestal wordt deze tag gebruikt als een oplossing voor de korte termijn, maar het wordt vaak permanent en kan dan later problemen veroorzaken wanneer het tijd is om te debuggen.
Een van de enige keren dat het gebruik van de tag !important algemeen aanvaardbaar wordt geacht, is om de eindgebruiker in staat te stellen stijlen te overschrijven voor gebruik met schermlezers en andere toegankelijkheidshulpmiddelen. Het is ook nuttig wanneer je te maken hebt met utility klassen.
13. Gebruik flexbox
Je zou ook meer kunnen halen uit Flexbox wanneer je probeert best practices voor het omgaan met CSS in je workflow te implementeren. Flexbox is een flexibele manier om een weblayout te maken en elementen op de pagina uit te lijnen, in plaats van de traditionele float optie te gebruiken.
Volgens CSS-Tricks is Flexbox een flexibele boxmodule die een alternatieve manier is om je CSS te structureren door aandacht te besteden aan hoe je layouts worden uitgelijnd en verdeeld binnen een container. Het mooiste is dat de grootte van de container zelf niet eens bekend hoeft te zijn, maar dat de eigenschappen in de container mee zullen “meebuigen” met de veranderende containergrootte. Het is een geweldige manier om mobiele apparaten tegemoet te komen.
Een ander belangrijk verschil is dat Flexbox “richting-neutraal” is, wat betekent dat de layouts niet verticaal of horizontaal gestructureerd zijn. Dit maakt het een betere keuze voor het ontwerpen van ingewikkelde websites en toepassingen die veel schermoriëntatieveranderingen moeten verwerken. Standaard CSS layouts zijn blok-gebaseerd en flexbox layouts vertrouwen op “flex-flow”. Ook hier biedt CSS-Tricks een beknopte tekening die dit concept goed illustreert:
Elementen in de flexbox worden over de main axis en de cross axis geplaatst, waarbij elk element en elke eigenschap in de flexbox ontworpen zijn om te buigen en te vloeien op basis van de grootte van de flexbox.
14. WordPress tip: wijzig themabestanden niet rechtstreeks
De laatste van de CSS best practices die we hier vandaag zullen bespreken is specifiek voor WordPress gebruikers. Het is nooit een goed idee om de bestanden van je thema rechtstreeks te wijzigen. Elke site-update kan deze wijzigingen tenietdoen of je site kapotmaken. Het is het risico niet waard.
In plaats daarvan kun je de optie Additional CSS in het de Theme Customizer gebruiken om eventuele wijzigingen aan te brengen. Houd er echter rekening mee dat dit de CSS inline injecteert en deze direct in de head plaatst.
Als je alleen een of twee wijzigingen wilt aanbrengen, kan dit een haalbare optie zijn, maar alles wat je in het vak Additional CSS plaatst, blijft hangen, zelfs als je een thema-update, een site-update of zelfs als je van thema verandert.
Als er grotere CSS modificaties nodig zijn, kun je deze beter toevoegen vanuit een custom CSS stylesheet of door een childthema te gebruiken waarin je het style.css bestand voor het childthema rechtstreeks wijzigt. Deze methode is ook update-proof.
Samenvatting
Bruikbare en nauwkeurige CSS schrijven kan best wel veel lijken voor newbie, maar de tijd nemen om jezelf te onderwijzen in de best practices kan je later veel tijd, moeite en hoofdpijn besparen.
We hopen dat deze verzameling van best practices je zal helpen op de goede weg te gaan naar het bouwen van functionele, nuttige en toegankelijke websites voor de komende jaren. Veel succes!
Laat een reactie achter