Hay varias maneras de aplicar estilos CSS a una página web, incluyendo hojas de estilo externas o incluso estilos en línea. Si está utilizando una hoja de estilo externa, que es la forma recomendada de dictar el aspecto de un documento HTML, un enfoque es utilizar
@import.
El
La regla
@import
le permite importar hojas de estilo externas en su documento — ya sea en una página HTML o incluso en otros documentos CSS. Dividir muchos estilos en varios archivos más pequeños y enfocados (uno para el diseño, otro para la tipografía, otro para las imágenes, etc.) a veces puede facilitar la gestión de esos archivos y de los distintos estilos que contienen. Si desea disfrutar de ese beneficio, entonces importar esos archivos es lo que tendrá que hacer para que todos funcionen en la pantalla de su página web.
Índice de contenidos
Importación a HTML
Para usar el
@import
en su HTML, usted agregaría lo siguiente al
del documento:: @import url("/styles/default.css");/style>Este código ahora importaría esta hoja de estilo para su uso en esta página HTML y usted podría manejar todos sus estilos en ese archivo. La desventaja de las hojas de estilo importantes de esta manera es que este método no permite las descargas paralelas. La página debe descargar una hoja de estilo completa antes de pasar al resto de la página, incluyendo cualquier otro archivo CSS que esté importando utilizando este método. Esto tendrá un efecto negativo en la velocidad de su página y en el rendimiento de la descarga. Teniendo en cuenta lo importante que es el rendimiento de la página para el éxito del sitio web, esta desventaja por sí sola puede ser una razón por la que querría evitar el uso de @import. Enfoque alternativo
Como alternativa al uso de
@import
en su HTML, puede enlazar a ese archivo CSS de esta manera:
Esto funciona de forma muy similar a
@import
ya que le permite gestionar todas sus CSS desde una ubicación/archivo central, pero este método es preferible desde la perspectiva de la descarga. Si todavía desea segmentar diferentes tipos de estilos en archivos separados, puede continuar haciéndolo y utilizar la funcionalidad @import dentro de su archivo CSS maestro. Esto significa que sus archivos CSS externos pueden ser administrados individualmente, pero como todos ellos se importan a un CSS maestro, el rendimiento mejora.
Importación a CSS
Usando el
ejemplo de código anterior traería el archivo "default.css" para usar en su página HTML. Dentro de ese archivo CSS, usted tendría sus varios estilos de página. Puede tener todos esos estilos detallados en esa página, o puede usar @import para separarlos y facilitar su administración. Una vez más, digamos que estamos usando 4 archivos CSS separados - uno para el diseño, otro para la tipografía y otro para las imágenes. El cuarto archivo es nuestro archivo "maestro", que es el que enlaza con nuestra página (para este ejemplo, es "default.css"). En la parte superior de ese archivo CSS maestro podemos añadir las reglas que se muestran a continuación: @import url('/styles/layout.css');@import url('/styles/type.css');@import url('/styles/images.css');
>.
Tenga en cuenta que estas reglas deben estar antes que el resto del contenido de su archivo CSS para que funcionen. No puede tener ningún otro estilo CSS antes de estas reglas de importación.
Debajo de esas reglas de importación, puedes añadir cualquier otro estilo de CSS que quieras tener en tu hoja por defecto. Cuando ese archivo CSS principal es cargado, primero importará estos archivos separados y agregará sus estilos a la parte superior de la hoja de estilos. A continuación, tendrá todos sus otros estilos debajo de estos importados, creando el archivo CSS completo que el navegador web utilizará para mostrar su sitio. Obtendrá el beneficio de administrar archivos más pequeños y enfocados sin dejar de tener una sola hoja de estilo vinculada a ese HTML.
Uso de @import para consultas multimedia
Una cosa que puede considerar hacer es separar las consultas de medios de su sitio web para los estilos de respuesta del sitio web en un archivo separado. Debido a que estos estilos sensibles pueden ser confusos cuando se ven junto con las otras reglas de estilo de su sitio, tenerlos por sí solos en un archivo diferente puede ser atractivo. Una preocupación con este enfoque es que, como su
Las reglas
@import
deben ser las primeras, esto significa que sus consultas de medios se cargarán antes que el resto de los estilos de su sitio. Al crear un sitio que responda primero al móvil y que tenga en cuenta el rendimiento, es probable que esto sea un problema. Por esta razón, se sugiere que no seccione los estilos de respuesta de su sitio por separado y utilice
@import
para traerlos a su sitio. Sí, puede parecer que hay beneficios de hacerlo, pero los inconvenientes superan esos beneficios.
¿Necesito usar @import?
No, no lo harás. Muchos sitios simplemente muestran todos sus estilos principales dentro de un archivo y, por grande que sea ese archivo, se administra de esa manera (así es como lo hago en mi propio trabajo). Si encuentra
@import
útil, entonces puede ser parte de su flujo de trabajo. De lo contrario, usted puede construir con seguridad las páginas web que su hoja de estilo único de todas sus reglas CSS.
Los navegadores muy, muy antiguos tienen problemas con algunas de estas reglas de @import, pero es poco probable que estos navegadores sean un problema para usted en estos días. Esto es especialmente cierto ahora que la fecha límite para el fin de la vida útil de las versiones anteriores de Internet Explorer ya ha pasado. En última instancia, si decide usar
@import
en su HTML o CSS, no debería tener problemas con las versiones anteriores de los navegadores web a menos que tenga alguna necesidad extraña de soportar versiones increíblemente antiguas de IE.
Editado por Jeremy Girard
