Un CSS @IMport è un modo per importare un foglio di stile in un altro foglio di stile. Il vantaggio principale dell'utilizzo di @IMport è che ti consente di avere più fogli di stile nel tuo progetto e deve essere scaricato solo un file. Tuttavia, ci sono alcuni svantaggi nell'uso di @IMport. Uno è che aggiunge un'altra richiesta HTTP, che può influire sui tempi di caricamento della pagina in WordPress. Un altro è che deve essere meglio supportato nei browser più vecchi. Sono disponibili alcune opzioni se stai cercando di evitare CSS @IMport. Immergiamoci!
Come si evita di usare @import?
1) Utilizzare un preprocessore come SASS o meno. Ciò ti consentirà di importare i file CSS nei tuoi file SASS o meno. Quindi, puoi compilare il tuo SASS o meno file in un singolo file CSS. Ciò ridurrà le dimensioni del tuo file CSS e renderà più facile la manutenzione.
2) Usa uno strumento come grugnito o sorso . Questi strumenti ti permetteranno di concatenare i file CSS in un singolo file. Ciò ridurrà le dimensioni del tuo file CSS e renderà più facile la manutenzione.
Esistono alcuni metodi alternativi per il caricamento di CSS che sono generalmente preferibili all'utilizzo di @IMport:
1. Usa il elemento. Un'altra opzione è quella di utilizzare un tag di collegamento anziché un'istruzione @IMport. Ciò elimina anche la necessità di una richiesta HTTP aggiuntiva ed è meglio supportata nei browser più vecchi. Tuttavia, ti consente di avere solo un foglio di stile nel tuo progetto.
2. Usa in linea 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 . Utilizzare le tecniche sul lato server per caricare i file CSS (come PHP o ASP).
Perché evitare di usare un @import?
Dovresti essere a conoscenza di alcuni potenziali svantaggi nell'uso di @IMport prima di decidere se usarlo o meno nel progetto.
Per uno, le dichiarazioni di @IMport devono essere inserite in cima al codice CSS per funzionare correttamente: se sono impostati da qualsiasi altra parte, saranno ignorate dal browser. Questo a volte può rendere il tuo codice più difficile da leggere e mantenere, poiché tutte le tue dichiarazioni @IMport dovranno essere raggruppate all'inizio del file.
Inoltre, le istruzioni di importazione @ possono aumentare i tempi di caricamento della pagina, poiché ciascun file CSS importato deve essere scaricato separatamente dal browser. A volte, questo tempo extra potrebbe essere insignificante, ma è qualcosa da tenere a mente se stai lavorando su un sito con un foglio di stile particolarmente grande o complesso.
Conclusione
La regola CSS @import è un modo utile per importare fogli di stile in altri stili, ma ha alcuni svantaggi:
- Tutti i browser non supportano @import.
- @IMport aggiunge una richiesta HTTP extra, che può ritardare il caricamento della tua pagina.
- @import può causare problemi con la memorizzazione nella cache.
Se stai cercando un modo per evitare CSS @IMport, considera di usare un preprocessore CSS come meno o SASS. Con un preprocessore, è possibile importare i tuoi fogli di stile in un file principale, che può quindi essere compilato in un singolo file CSS compatibile con tutti i browser.
