En CSS @import er en måde at importere et stylesheet til et andet stylesheet. Den største fordel ved at bruge @import er, at det giver dig mulighed for at have flere stylesheets i dit projekt, og kun én fil skal downloades. Der er dog nogle ulemper ved at bruge @import. En af dem er, at det tilføjer en ekstra HTTP-anmodning, hvilket kan påvirke sideindlæsningstiden i WordPress. En anden er, at det skal understøttes bedre i ældre browsere. Der er et par muligheder tilgængelige, hvis du vil undgå CSS @import. Lad os dykke ned i det!
Hvordan undgår man at bruge @import?
1) Brug en præprocessor som Sass or Less. Dette giver dig mulighed for at importere dine CSS-filer til dine Sass or Less-filer. Derefter kan du kompilere dine Sass or Less-filer til en enkelt CSS-fil. Dette vil reducere størrelsen på din CSS-fil og gøre den nemmere at vedligeholde.
2) Brug et værktøj som Grunt eller Gulp. Disse værktøjer giver dig mulighed for at sammenkæde dine CSS-filer til én fil. Dette vil reducere størrelsen på din CSS-fil og gøre den nemmere at vedligeholde.
Der er et par alternative metoder til at indlæse CSS, som generelt er at foretrække frem for at bruge @import:
1. Brug En anden mulighed er at bruge et link-tag i stedet for en @import-sætning. Dette eliminerer også behovet for en ekstra HTTP-anmodning og understøttes bedre i ældre browsere. Det giver dig dog kun mulighed for at have ét stylesheet i dit projekt.
2. Brug indlejret En af dem er at bruge et inline stylesheet, som kan tilføjes direkte til dit HTML-dokument. Dette eliminerer behovet for en ekstra HTTP-anmodning, men kan gøre din kode vanskeligere at administrere.
3.filer Brug server-side teknikker (f.eks. PHP eller ASP).
Hvorfor undgå at bruge en @import?
Du bør være opmærksom på et par potentielle ulemper ved at bruge @import, før du beslutter dig for, om du vil bruge det i dit projekt eller ej.
For det første skal @import-sætninger placeres øverst i din CSS-kode for at fungere korrekt – hvis de er angivet et andet sted, vil de blive ignoreret af browseren. Dette kan nogle gange gøre din kode vanskeligere at læse og vedligeholde, da alle dine @import-sætninger skal grupperes i begyndelsen af din fil.
Derudover kan @import-sætninger øge sideindlæsningstiden, da hver importeret CSS-fil skal downloades separat af browseren. Nogle gange kan denne ekstra tid være ubetydelig, men det er noget at huske på, hvis du arbejder på et websted med et særligt stort eller komplekst stylesheet.
Konklusion
CSS @import-reglen er en praktisk måde at importere typografiark til andre typografier, men den har nogle ulemper:
- Ikke alle browsere understøtter @import.
- @import tilføjer en ekstra HTTP-anmodning, som kan forsinke indlæsningen af din side.
- @import kan forårsage problemer med caching.
Hvis du leder efter en måde at undgå CSS @import, kan du overveje at bruge en CSS-forbehandlingsprogram som Less eller Sass. Med en forbehandlingsprogram kan du importere dine stylesheets til én hovedfil, som derefter kan kompileres til en enkelt CSS-fil, der er kompatibel med alle browsere.
