Publicatie: 25 augustus 2024
Stylesheets opbreken
Een kleine mooi opgemaakte pagina vereist al aardig wat lijntjes code in je stylesheet. Wanneer je een hele site in elkaar steekt, is dit een hele hoop meer.
Het kan daarom handig zijn om die enorme stylesheet op te breken in verschillende delen, om het overzicht te bewaren. Zo heeft BeVries.nl een basis stylesheet voor het skelet, en heeft een onderdeel (zoals /handleidingen) een eigen stylesheet die daar op voortborduurt.
@import in de CSS stylesheet
Helemaal bovenaan in de stylesheet kun je door middel van @import een ander stylesheet 'importeren'.
@import url("../assets/css/style.css"); /*importeer eerst de basis stylesheet */
- Je begint met @import en geeft de url waar je andere stylesheet te vinden is
- Wat er nu gebeurt is dat in deze stylesheet ook alle CSS regels gelden van de geïmporteerde stylesheet. Je ziet ze echter niet! Hierdoor heb je een mooi schoon document dat toch alle eerder geschreven CSS regels onthoudt
- Waneer je de import helemaal bovenaan in je stylesheet zet, zal alles wat je daarna aanpast gelden voor je site. Het deel in de bron wordt dan genegeerd.