Una @importación CSS es una forma de importar una hoja de estilo a otra hoja de estilo. La principal ventaja de usar @import es que le permite tener varias hojas de estilo en su proyecto y solo es necesario descargar un archivo. Sin embargo, existen algunas desventajas al utilizar @import. Una es que agrega otra solicitud HTTP, que puede afectar los tiempos de carga de la página en WordPress. Otra es que necesita ser mejor compatible con navegadores más antiguos. Hay algunas opciones disponibles si busca evitar CSS @import. ¡Vamos a sumergirnos!
¿Cómo evitas usar @import?
1) Utilice un preprocesador como Sass o Less. Esto le permitirá importar sus archivos CSS a sus archivos Sass o Less. Luego, puede compilar sus archivos Sass o Less en un solo archivo CSS. Esto reducirá el tamaño de su archivo CSS y facilitará su mantenimiento.
2) Utilice una herramienta como Grunt o Gulp . Estas herramientas le permitirán concatenar sus archivos CSS en un solo archivo. Esto reducirá el tamaño de su archivo CSS y facilitará su mantenimiento.
Existen algunos métodos alternativos para cargar CSS que generalmente son preferibles a usar @import:
1. Utilice el elemento. Otra opción es utilizar una etiqueta de enlace en lugar de una declaración @import. Esto también elimina la necesidad de una solicitud HTTP adicional y es mejor compatible con navegadores más antiguos. Sin embargo, sólo le permite tener una hoja de estilo en su proyecto.
2. Usar en línea 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 . Utilice técnicas del lado del servidor para cargar archivos CSS (como PHP o ASP).
¿Por qué evitar el uso de @import?
Debe tener en cuenta algunos inconvenientes potenciales del uso de @import antes de decidir si usarlo o no en su proyecto.
Por un lado, las declaraciones @import deben colocarse en la parte superior de su código CSS para que funcionen correctamente; si se configuran en cualquier otro lugar, el navegador las ignorará. A veces, esto puede hacer que su código sea más difícil de leer y mantener, ya que todas sus declaraciones @import deberán agruparse al principio de su archivo.
Además, las declaraciones @ import pueden aumentar los tiempos de carga de la página, ya que el navegador debe descargar cada archivo CSS importado por separado. A veces, este tiempo extra puede ser insignificante, pero es algo que debes tener en cuenta si estás trabajando en un sitio con una hoja de estilo particularmente grande o compleja.
Conclusión
La regla CSS @import es una forma práctica de importar hojas de estilo a otros estilos, pero tiene algunos inconvenientes:
- No todos los navegadores admiten @import.
- @import agrega una solicitud HTTP adicional, que puede retrasar la carga de su página.
- @import puede causar problemas con el almacenamiento en caché.
Si está buscando una manera de evitar CSS @import, considere usar un preprocesador de CSS como Less o Sass. Con un preprocesador, puede importar sus hojas de estilo en un archivo principal, que luego se puede compilar en un único archivo CSS que sea compatible con todos los navegadores.
