Een CSS @import is een manier om een stijlblad in een ander stijlblad te importeren. Het belangrijkste voordeel van het gebruik van @import is dat u meerdere stijlbladen in uw project kunt hebben en dat er slechts één bestand hoeft te worden gedownload. Er zijn echter enkele nadelen aan het gebruik van @import. Een daarvan is dat het nog een HTTP-verzoek toevoegt, wat van invloed kan zijn op de laadtijden van pagina’s in WordPress. Een andere is dat het beter ondersteund moet worden in oudere browsers. Er zijn een paar opties beschikbaar als u CSS @import wilt vermijden. Laten we erin duiken!
Hoe vermijd je het gebruik van @import?
1) Gebruik een preprocessor zoals Sass of Less. Hiermee kunt u uw CSS-bestanden importeren in uw Sass- of Less-bestanden. Vervolgens kunt u uw Sass- of Less-bestanden compileren in één enkel CSS-bestand. Hierdoor wordt de grootte van uw CSS-bestand kleiner en wordt het gemakkelijker te onderhouden.
2) Gebruik een tool zoals Grunt of Gulp . Met deze tools kunt u uw CSS-bestanden samenvoegen tot één enkel bestand. Hierdoor wordt de grootte van uw CSS-bestand kleiner en wordt het gemakkelijker te onderhouden.
Er zijn een paar alternatieve methoden voor het laden van CSS die over het algemeen de voorkeur verdienen boven het gebruik van @import:
1. Gebruik de element. Een andere optie is om een linktag te gebruiken in plaats van een @import-instructie. Hierdoor is er ook geen extra HTTP-verzoek meer nodig en wordt het beter ondersteund in oudere browsers. U kunt echter slechts één stijlblad in uw project gebruiken.
2. Gebruik inline One is to use an inline stylesheet, which can be added directly to your HTML document. This eliminates the need for an extra HTTP request but can make your code more difficult to manage.
3 . Gebruik server-side technieken om CSS-bestanden te laden (zoals PHP of ASP).
Waarom zou je het gebruik van een @import vermijden?
U moet zich bewust zijn van enkele mogelijke nadelen van het gebruik van @import voordat u besluit of u het wel of niet in uw project wilt gebruiken.
Ten eerste moeten @import-instructies helemaal bovenaan uw CSS-code worden geplaatst om correct te werken. Als ze ergens anders worden ingesteld, worden ze door de browser genegeerd. Dit kan ervoor zorgen dat uw code soms moeilijker te lezen en te onderhouden is, omdat al uw @import-instructies aan het begin van uw bestand moeten worden gegroepeerd.
Bovendien kunnen @import-instructies de laadtijden van pagina's verlengen, omdat elk geïmporteerd CSS-bestand afzonderlijk door de browser moet worden gedownload. Soms kan deze extra tijd onbeduidend zijn, maar het is iets om in gedachten te houden als u aan een site werkt met een bijzonder groot of complex stylesheet.
Conclusie
De CSS @import-regel is een handige manier om stijlbladen in andere stijlen te importeren, maar heeft enkele nadelen:
- Niet alle browsers ondersteunen @import.
- @import voegt een extra HTTP-verzoek toe, waardoor het laden van uw pagina kan worden vertraagd.
- @import kan problemen met caching veroorzaken.
Als u op zoek bent naar een manier om CSS @import te vermijden, overweeg dan om een CSS-preprocessor zoals Less of Sass te gebruiken. Met een preprocessor importeert u uw stylesheets in één hoofdbestand, dat vervolgens kan worden gecompileerd tot één CSS-bestand dat compatibel is met alle browsers.
