Er zitten heel veel voordelen aan een schone, georganiseerde CSS code. Een lichtgewicht CSS bestand draagt bij aan een snellere laadtijd, is makkelijker te lezen, makkelijker te doorzoeken wanneer je iets wilt aanpassen of wanneer je problemen wilt oplossen, en doet je professioneler overkomen als web developer. Hieronder hebben we de beste tips voor het optimaliseren van je CSS code op een rijtje gezet!
#1. Bepaal je layout
Als je nu de tijd neemt om je layout te bepalen, kun je de styles die je nodig hebt uitzoeken en een overzicht maken van alle ID’s en classes die je verwacht te gebruiken, zonder alle overbodige dingen die je stylesheet rommelig maken. Zodra de structuur eenmaal bepaald is kun je met het daadwerkelijke schrijven van de code beginnen.
#2. Schrijf een ‘Table of Contents’
Zodra je de structuur van je stylesheet hebt bepaald, is het slim om alles te organiseren door een ‘Table of Contents’ bovenin je CSS bestand te maken. Dit kun je heel makkelijk doen door de informatie als multi-line comment neer te zetten. Een voorbeeld:
/*
Thema Naam:
Thema URI:
Auteur:
Auteur URI:
Omschrijving:
Licentie:
Licentie URI:
Tags:
Tekst Domein:
Extra Info
*/
/*
* Table of Contents
* 1.0 – Segment Titel Een
* 2.0 – Segment Titel Twee
* 3.0 – Segment Titel Drie
* 3.1 – Subsegment Drie, Punt Een
* 3.2 – Subsegment Drie, Punt twee
* 4.0 – Segment Titel Vier
* 5.0 – Segment Titel Vijf
*/
Een Table of Contents helpt je herinneren waar je alles hebt neergezet, zodat het updaten en oplossen van bugs makkelijker wordt.
#3. Maak gebruik van beschrijvende ID’s en classes
Het is belangrijk dat je goed nadenkt over de namen van je ID’s en classes. Ze moeten duidelijk en gemakkelijk te begrijpen zijn, maar ook specifiek genoeg om onderscheid te kunnen maken tussen de verschillende elementen in je stylesheet.
Een ID zoals #container is te breed, aangezien een container wel overal voor gebruikt kan worden. Andere ID’s zijn weer te specifiek; #leftcontainermain is een mond vol en lastig te lezen. Probeer in plaats daarvan #content, of, als je meerdere content area’s hebt, #main-content.
#4. Gebruik geen positie-specifieke namen
Een veelgemaakte fout die je ziet als je onder de motorkap kijkt bij WordPress thema’s en plugins, is het gebruik van ID’s en classes die benoemd zijn op basis van hun ontwerp of positie. Denk bijvoorbeeld aan #blauw-font of #linker-zijbalk. Hoewel er op zich niets mis is met deze manier van benoemen, kan het mogelijk wel een probleem vormen in de toekomst. Want wat als je later die linker zijbalk of dat blauwe font wil aanpassen? Het is geen probleem, tot het moment dat je zoveel aanpassingen hebt gedaan dat die linker zijbalk niet meer aan de linker kant staat of dat dat blauw font ineens roze is en zelfs wat link styling bevat. Dit kan debuggen behoorlijk lastig maken. Het is dus beter om positie en ontwerp weg te laten bij het benoemen van je ID’s en classes. Als je twijfelt, kies dan voor duidelijke namen zoals #header en #footer.
#5. Creëer verschillende segmenten met ID’s en label ze
Door de verschillende segmenten in je ‘Table of Contents’ in ID’s te veranderen, is het veel makkelijker om elk segment te herkennen. Een voorbeeld:
/*
* Table of Contents
* 1.0 – #header
* 2.0 – #navigatie
* 2.1 – .links
* 2.2 – .toegankelijkheid
* 3.0 – #content
* 4.0 – #zijbalk
* 5.0 – #footer
/*
#6. Maak onderscheid tussen layout en design
Met CSS kun je niet alleen stijlelementen zoals kleuren, afbeeldingen en achtergronden toevoegen aan je website of plugin; je kunt er ook een groot deel van je layout mee ontwerpen. Maar als je het design niet apart van de layout neerzet, wordt je stylesheet al snel rommelig en lastig te lezen. Het is daarom raadzaam om een apart CSS bestand voor je layout te maken, of hiervoor een apart segment binnen het stylesheet aan te maken.
#7. Maak gebruik van comments
Het toevoegen van comments is één van de beste methodes om ervoor te zorgen dat je CSS makkelijk te begrijpen is. Op elk punt waar je denkt dat een stijlelement meer uitleg behoeft, zet je simpelweg een comment neer; op dezelfde regel, of vlak ervoor. Dit voorkomt ook dat jij of een ander een regel per ongeluk verwijdert. Voorbeeld:
/*
Onderstaande regel niet aanpassen of verwijderen, anders breekt de hele layout!
*/
#8. Maak je eigen CSS bibliotheek
Hoe handig zou het zijn om een naslagwerk te hebben van alle constante elementen die je gebruikt bij het samenstellen van je stylesheet, zoals templates, documentatie, voorgeschreven code, dummy content, veelgebruikte ID’s en classes?
Zo’n CSS bibliotheek is niet alleen handig voor het oplossen van problemen bij je huidige site, maar ook voor hergebruik bij toekomstige projecten; op die manier hoef je niet steeds helemaal overnieuw te beginnen.
#9. Zet eigenschappen in alfabetische volgorde
Om eigenschappen sneller terug te kunnen vinden, bedacht Christian Montoya dat het handig is om eigenschappen op alfabetische volgorde te zetten. Zijn voorbeeld:
body {
background:#fdfdfd;
color:#333;
font-size:1em;
line-height:1.4;
margin:0;
padding:0;
}
#10. Gebruik niet meer div tags dan je nodig hebt
Hoe meer div tags je toevoegt die allemaal hun eigen styling nodig hebben, hoe groter het risico dat je CSS structuur te veel wordt opgeblazen. Probeer het aantal div tags dus tot een minimum te beperken en probeer andere manieren te bedenken om hetzelfde design te bereiken zonder weer een div te gebruiken.
#11. Gebruik de juiste spacing
Dit mag dan heel simpel lijken, maar het is erg belangrijk om dit consistent te blijven doen. Het maakt je stylesheet beter georganiseerd en makkelijker te lezen.
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0; }
select {
text-transform: none;
}
#12. Gebruik geen onnodige CSS hacks
Het toepassen van CSS hacks kan een effectieve manier zijn om stijlproblemen te repareren. Maar hacks kunnen het wel lastiger maken om dingen later te veranderen.
Als je een bug tegenkomt in een WordPress thema of plugin, vraag dan eerst na bij de ontwikkelaar of hij van plan is de bug te repareren voor je zelf een CSS hack toevoegt. Als je tijdelijk een hack wil toevoegen, zorg dan dat je voor jezelf een notitie maakt en een comment in de code zet om jezelf eraan te herinneren waarom je die hack hebt toegevoegd.
#13. Maak gebruik van UFT-8
UFT-8 is een universele karakter code en kan helpen om toekomstige compatibiliteitskwesties op te lossen. Je zult het niet altijd kunnen gebruiken, bijvoorbeeld als je gebruik moet maken van vertalingen met karakters die niet in UFT-8 zitten. Maar als je ermee wegkomt, zeker gebruiken!
#14. Gebruik de em eenheid voor tekst
De em eenheid schaalt de tekst relatief aan het oorspronkelijke formaat. Als je pixels gebruik om de grootte van je tekst aan te geven ziet dat er wellicht goed uit op computers en laptops, maar niet op andere apparaten. En omdat steeds meer mensen websites bezoeken via smartphones en tablets, is het slim om hun ervaring zo prettig mogelijk te maken. Het gebruiken van de em eenheid zorgt ervoor dat je tekst op alle apparaten automatisch goed wordt weergegeven.
