CSS - @import om stylesheets op te delen


Het is misschien wel herkenbaar. Op het moment dat je begint met bijvoorbeeld de bouw van een uitgebreide website of een webshop dan valt het nog mee maar naar mate je verder komt zul je zien dat je stylesheet langer en langer wordt en je steeds meer tijd kwijt bent aan het zoeken van een bepaald gedeelte in je CSS bestand. Het wordt dan misschien tijd om je stylesheet te gaan opdelen in logische stukken met behulp van de @import regel. Je importeert in dat geval een stylesheet vanuit een stylesheet.

Opdelen

Deze manier van importeren bestaat al lang, het gebruik is simpel en het kan je leven een stuk makkelijker maken. Het idee is dat je bijvoorbeeld je stylesheet opdeelt in meerdere bestanden zoals bijvoorbeeld header.css, content.css, tekst.css en footer.css. Maar uiteraard moet je hier zelf kiezen welke indeling je het handigst lijkt om mee te werken.

Je plaats dan in elk bestand de specifieke opmaak voor het betreffende onderdeel. Zo plaats je in het bestand header.css alleen opmaak betreffende de header van een site en in tekst.css zorg je dat alles omtrent tekst staat vermeld zoals de opmaak van koppen.

Gebruik

Het gebruik is eenvoudig. Je hebt nu meerdere bestanden maar het is niet nodig om deze allemaal in de broncode van je website te gaan oproepen, je wilt dit gedeelte immers ook een beetje schoon houden. Plaats in het <head> gedeelte slechts één vermelding naar een algemeen css bestand, bijvoorbeeld main.css zoals je normaal ook zou doen.

<link rel="stylesheet" type="text/css" href="main.css" />


Open dan het bestand main.css en voeg daarin het onderstaande gedeelte toe. Plaats deze regels helemaal bovenaan je CSS document, er mag niets bovenstaan, ook geen tussengevoegde comments. Middels deze regels roep je de verschillende CSS bestanden aan die je gebruikt op je website die allen vanuit het hoofdbestand worden opgeroepen. Zorg er uiteraard wel voor dat de paden van de bestanden kloppen.

@import url('header.css');
@import url('content.css');
@import url('tekst.css');
@import url('footer.css');


Op deze manier wordt je stylesheet iets behapbaarder en hoef je deze niet allemaal aan te roepen in de bron van de website zelf. Overigens ondersteunen de echt oude browsers zoals Internet Explorer 4 de import regel niet maar dit is dan ook niet echt belangrijk meer.

Print

Aanvullend erop kun je aangeven waarvoor een bepaald stylesheet bedoeld is zodat je ook bijvoorbeeld je Print stylesheet hierin kunt vermelden. Een voorbeeld daarvan zie je hieronder echter hou er rekening mee dat dit dan weer niet werkt in Internet Explorer 7, wel in Internet Explorer 8 en 9. Verder werkt dit ook gewoon in Firefox en Google Chrome.

@import url('content.css') screen;
@import url('print.css') print;