En CSS @import är ett sätt att importera ett stilark till ett annat stilark. Den största fördelen med att använda @import är att det låter dig ha flera stilark i ditt projekt, och bara en fil behöver laddas ner. Det finns dock vissa nackdelar med att använda @import. En är att det lägger till ytterligare en HTTP-förfrågan, vilket kan påverka sidladdningstiderna i WordPress. En annan är att det behöver stödjas bättre i äldre webbläsare. Några alternativ finns tillgängliga om du vill undvika CSS @import. Nu kör vi!
Hur undviker man att använda @import?
1) Använd en förbehandlare som Sass or Less. Detta gör att du kan importera dina CSS-filer till dina Sass or Less-filer. Sedan kan du kompilera dina Sass or Less-filer till en enda CSS-fil. Detta minskar storleken på din CSS-fil och gör den enklare att underhålla.
2) Använd ett verktyg som Grunt eller Gulp . Dessa verktyg låter dig sammanfoga dina CSS-filer till en enda fil. Detta minskar storleken på din CSS-fil och gör den enklare att underhålla.
Det finns några alternativa metoder för att ladda CSS som generellt sett är att föredra framför att använda @import:
1. Använd element. Ett annat alternativ är att använda en länktagg istället för ett @import-uttryck. Detta eliminerar också behovet av en ytterligare HTTP-förfrågan och stöds bättre i äldre webbläsare. Det tillåter dig dock bara att ha ett formatmall i ditt projekt.
2. Använd 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. Använd serversidetekniker för att ladda CSS-filer (t.ex. PHP eller ASP) .
Varför ska man undvika att använda en @import?
Du bör vara medveten om några potentiella nackdelar med att använda @import innan du bestämmer dig för om du ska använda det i ditt projekt eller inte.
För det första måste @import-satser placeras högst upp i din CSS-kod för att fungera korrekt – om de anges någon annanstans kommer de att ignoreras av webbläsaren. Detta kan ibland göra din kod svårare att läsa och underhålla, eftersom alla dina @import-satser måste grupperas i början av din fil.
Dessutom kan @import-satser öka sidinläsningstiden, eftersom varje importerad CSS-fil måste laddas ner separat av webbläsaren. Ibland kan denna extra tid vara obetydlig, men det är något att tänka på om du arbetar på en webbplats med ett särskilt stort eller komplext stilark.
Slutsats
CSS @import-regeln är ett praktiskt sätt att importera stilmallar till andra stilar, men den har vissa nackdelar:
- Alla webbläsare stöder inte @import.
- @import lägger till en extra HTTP-förfrågan, vilket kan fördröja laddningen av din sida.
- @import kan orsaka problem med cachning.
Om du letar efter ett sätt att undvika CSS @import, överväg att använda en CSS-förbehandlare som Less eller Sass. Med en förbehandlare kan du importera dina stilmallar till en huvudfil, som sedan kan kompileras till en enda CSS-fil som är kompatibel med alla webbläsare.
