martijn managing director - Endeavour Heroes

Meer weten? Neem contact op.

3 tips om je CSS te structureren

3 tips om je css te structureren - Endeavour Heroes
Anne van Gorkom
Anne van Gorkom
- 3 min lezen
Tags

Wanneer je net begint met front-end development, maak je al snel kennis met CSS. In deze fase is het heel logisch om het bij CSS te houden, aangezien je meestal oefent met kleine websites/pagina’s waar niet zo heel veel styling voor nodig is. Maar je zal al snel merken dat hoe groter jouw website wordt, hoe meer styling er aan te pas komt. Daarnaast zal je ook steeds meer willen experimenteren. Je CSS file zal hierdoor helaas steeds langer en dus ook onoverzichtelijker worden. Hieronder lees je 3 tips die het je een stuk makkelijker kunnen maken. Al helemaal als je ze weet je combineren!

1. Stap over op SCSS

SCSS is een superset van CSS, wat inhoudt dat alle CSS ook geldig is als SCSS. Je zou jouw SCSS bestanden volledig met CSS kunnen programmeren zonder dat er iets fout gaat. Het verschil zit ‘m in de mogelijkheden.

Met SCSS kun je bijvoorbeeld gebruik maken van variabelen. Een voorbeeld hiervan is het gebruik van kleuren. Meestal wil je een bepaalde kleur op meerdere plekken terug laten komen. Je geeft vervolgens die kleur mee aan meerdere selectors. Maar wat nou als je op een gegeven moment die kleur wil aanpassen? Dan moet je alle selectors en de betreffende properties langs om de kleur aan te passen. Met SCSS kan je een variabele kleur definiëren die je vervolgens aan de juiste properties meegeeft. Het handige hieraan is dat je de kleurcode maar op 1 plek hoeft aan te passen: bij de variabele.  

Een ander voordeel van SCSS is dat je je code kan splitsen in verschillende documenten. Elk component kan dus een eigen document hebben met alleen de code die hiervoor nodig is. Je kan dus een document hebben waar alleen code voor een button in staat, of de navigatie, of een card.  Je kan hierdoor heel makkelijk je code hergebruiken op meerdere plekken. Dit zijn slechts 2 van de vele voordelen van SCSS, maar wie een rondje Googelt vindt er al snel nog veel meer.

2. Maak gebruik van BEM

Als je je SCSS nog overzichtelijker wil hebben, dan is het handig om gebruik te maken van de BEM methode. BEM staat voor Block, Element, Modifier. Met deze methode maak je alleen gebruik van classes in je SCSS. Het block moet gezien worden als de parent van het component (bijv. .btn). De onderliggende elementen krijgen een specifiekere class mee. Dit wordt gedaan door de extra informatie aan de block class mee te geven met twee underscores als scheidingsteken (bijv. .btn__price). Tot slot zijn er de modifiers, deze zijn bedoeld om een specifieke styling mee te geven aan de class. Dit doe je door twee streepjes mee te geven aan de block class (bijv. .btn—orange). Het voordeel hiervan is dat je aan de classes al af kan lezen wat er precies gestyled wordt.

3. Sorteer op alfabetische volgorde

Het spreekt wellicht voor zich, maar door je selectors en properties te sorteren kan je ze een stuk makkelijker terug vinden. SCSS en BEM zorgen er al voor dat je selectors met een hiërarchie gegroepeerd worden in verschillende files. Door vervolgens ook je properties nog alfabetisch te sorteren, kun je alles makkelijk terug blijven vinden. Het gebruik van een SCSS linter kan je hierbij heel goed helpen. Je code wordt automatisch gecheckt en je krijgt tips om je code beter te schrijven.

Het gebruik van een van bovenstaande opties zal je al veel helpen met de organisatie van je code, maar als je ze combineert zal er een wereld voor je open gaan. Het voordeel is dat je niet opeens hele andere code hoeft te schrijven omdat SCSS ook gewone CSS accepteert. Je kan er dus spelenderwijs steeds meer bekend mee raken en bepaalde functionaliteiten uitproberen.

Ook BEM kan je langzaam introduceren. Begin bij een klein component zoals een button en als je daar vertrouwd mee bent geraakt kan je het gaan proberen met de grotere componenten zoals de navigatie. Succes!

Ook interessant?