Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

Importar CSS

Importar CSS
Las hojas de estilo en cascada (CSS) son la base del diseño de la mayoría de los sitios web. Describe cómo se deben representar los elementos en la pantalla. Aquí es donde @importinterviene la regla CSS para ayudar. La @importregla le dice al motor CSS que importe una hoja de estilo externa a otra hoja de estilo. Esto permite agregar reglas de estilo de una hoja de estilo a otra hoja de estilo. Esta regla también se puede usar en combinación con consultas de medios para importar una hoja de estilo basada en el tipo de dispositivo. La @importregla de estilo es beneficiosa porque puede usarse para evitar reglas de estilo duplicadas e incluso importar estilos específicos basados ​​en el dispositivo de acceso. La @importregla debe estar en la parte superior de la hoja de estilo.
@import "style.css"; /* using a string */
@import url("rebrand.css"); /* using a URL */
@import "print.css" print; /* using a media query */
El problema no está en la complejidad del lenguaje o la dificultad de la codificación. El problema radica en el gran volumen de información necesaria para crear incluso un sitio web de tamaño medio. Si considera la cantidad de HTML que se necesita para crear características de diseño incluso simples y luego extrapola a numerosas páginas con diseños e información en cada página, la tarea puede ser desalentadora.
Esta gran cantidad de información también puede ser difícil de controlar. Si desea copiar y pegar ciertas reglas, debe regresar para encontrarlas. Incluso si hace un gran trabajo organizando su CSS, el gran tamaño del sitio web y la cantidad de información pueden ser completamente abrumadores. La @importregla es una excelente manera de organizar una gran cantidad de reglas de estilo.

Los aspectos positivos de CSS @import#

Lo mejor de CSS @importes que te ahorra tiempo y frustración. Si no está utilizando, @importentonces está, al menos, volviendo al CSS anterior para copiar y pegar la información que necesita o administrar todas las reglas de estilo en una sola hoja de estilos. Esto puede llevar mucho tiempo, ser frustrante e incluso difícil a medida que su sitio web se hace cada vez más grande y el código se vuelve más difícil de encontrar. Peor aún es tener estilos duplicados que conducen a una hoja de estilos más grande que puede reducir el rendimiento del sitio web.
CSS @importahorra mucho tiempo, pero también proporciona una gran precisión. En lugar de escribir potencialmente reglas de estilo deficientes o copiar y pegar la información incorrecta, todo lo que tiene que hacer es importar las reglas que están presentes. Esto es simple y muy preciso, especialmente en comparación con las alternativas. También se puede usar para separar las reglas de estilo en hojas de estilo separadas, por ejemplo:
@import "buttons.css";
@import "links.css";
@import "forms.css";
Además de esos aspectos positivos, aquí hay una lista más detallada de por qué CSS @importes una gran herramienta de desarrollo web:
  • Ahorra tiempo incluso en comparación con el enfoque de copiar y pegar o el enfoque de agregar enlaces.
  • Es difícil cometer un error con el @importmétodo.
  • Proporciona ayuda organizativa al crear un sitio web de mediano a grande. Hay tanta información y codificación involucrada que cualquier ayuda es importante.
  • Puede crear tantos archivos CSS como desee importar. Puede crear un archivo primario y luego tener archivos adicionales como tipografía o imágenes.
  • Es una herramienta de construcción web gratuita, que ahorra tiempo, simple y efectiva.

Los negativos de CSS @import#

Lo único negativo real asociado con CSS @importes que puede agregar tiempo de carga de la página a su sitio web si no se usa durante el proceso de construcción. Cuando una página se carga con el @importcomando, debe ir a leer e importar la hoja de estilo especificada en la regla y luego aplicarla a la página actual. Esto no lleva mucho tiempo, e incluso los sitios web más grandes que usan el @importcomando no experimentarán una diferencia notable en el tiempo de carga. Sin embargo, para los bots que usan el tiempo de carga para calcular su clasificación de búsqueda, esto podría moverlo hacia arriba o hacia abajo en la codiciada lista de motores de búsqueda.

Alternativas a CSS @import#

Hay algunas alternativas a CSS @importAlgunos se mencionaron anteriormente, pero se mencionarán aquí con un poco más de detalle. Si bien existen alternativas, CSS @importes la forma más rápida y precisa de llevar estilos ya existentes de una hoja de estilos a otra. Las alternativas son las siguientes:
  • Enlaces: el uso de una <link>etiqueta para vincular sus archivos CSS dentro del encabezado de su HTML permite descargar archivos CSS en lugar de llamarlos. Esto significa que el navegador no tiene que ir a otra hoja de estilo para importarlo, sino que se puede descargar en el acto. La vinculación es una ventaja porque no aumenta los tiempos de carga, pero también tiene algunos aspectos negativos. Lo más importante es que si desea vincular a su archivo CSS, debe saber dónde está. Si no lo hace, y su sitio web es grande y complejo, entonces podría llevar bastante tiempo encontrar ese enlace.
  • Reescribir las mismas reglas de estilo: esta es una vía de fusión, pero no es una alternativa realmente válida. Reescribir lo mismo una y otra vez en diferentes páginas sería demasiado difícil de manejar y, en el mejor de los casos, ineficiente. Si bien se puede hacer, y se puede hacer de manera efectiva, el riesgo de error y la gran cantidad de tiempo necesario hacen que esto sea irrelevante.
  • Copiar y pegar: la otra forma de fusionar datos es simplemente copiar y pegar. Si ha creado un sitio web anteriormente, entonces sabe que hay una gran cantidad de copias y una cantidad aún mayor de pegado. Sin embargo, cuando las hojas de estilo, y las largas, son las cosas que se copian y pegan, puede volverse difícil. Por un lado, si pierde una letra o agrega más espacios, puede desordenar fácilmente el código existente. También debe saber a dónde ir en un CSS antiguo para encontrar la información que desea copiar.

¿ @importVale la pena usar CSS ?# #

La respuesta corta es sí. Los aspectos positivos simplemente superan a los negativos y por un margen bastante grande. Si usted es una empresa que tiene los recursos para contratar a alguien para que trabaje a tiempo completo en la codificación, construcción y mantenimiento de su sitio web, entonces puede estar bien sin el @importcomando. Por otro lado, si usted es diseñador web o propietario de una pequeña empresa que construye su propio sitio web, no se pueden ignorar las ventajas.
CSS @importposiblemente podría agregar tiempo de carga a su sitio web. El truco, sin embargo, es que no agregará tiempo de carga a su página de inicio. Esto es clave porque cualquiera que visite su página de inicio, en su mayor parte, está allí por una razón. Si visitan páginas posteriores es porque están interesados ​​y enganchados a su idea o producto. Este tipo de visitante a su sitio probablemente esté dispuesto a permanecer los 0.074 segundos adicionales (esta es una cifra inventada, pero usted entiende) lo que se necesita para cargar su página debido al CSS @importEste tiempo adicional puede incluso eliminarse por completo si @importse usa durante el proceso de compilación.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas