Esta es una historia corta sobre un pequeño truco que puede ayudarnos a separar las limitaciones, optimizar el rendimiento y tener una forma genial de insertar estilos en nuestras páginas.

Cualquiera que haya creado un sitio web sabe que hay muchas formas de incluir CSS, hablemos de las principales

• Estilo en línea
  Este tipo de inserciones de CSS es muy popular debido a las nuevas tendencias de los frameworks js que usan “CSS en js”, esto se puede lograr dentro del atributo de estilo

<div style=””>

Esto es genial si tienes pre-procesadores para optimizar el CSS usado o algo que pueda ayúdarnos a reducir el gran contenido del archivo principal, porque la solicitud realizada a través del servidor será cada vez más grande y debe descargarse en un solo archivo, lo que tendrá un gran impacto negativo en el LCP (pintada de contenido más grande) pero también un buen impacto en CLS (Cambio de diseño acumulativo) , porque el renderizado mostrará las cosas como lo harán, basado en el sistema de cascada CSS y el CSSOM.

CSS Object Model

• Con CSS vanilla es imposible aplicar consultas de medios en línea.
  Estilos internos
  La otra forma de incluir CSS dentro del mismo HTML es con una etiqueta <style> para estilizar la web esto nos permite organizar mejor el estilo dentro de una etiqueta específica y nos permite usar el sistema en cascada para implementar el estilo requerido y tener los mismos beneficios y desventajas que el uso de estilo en línea con una mejora que nos permite usar consultas @media.

• Estilos externos
  Ahora hablemos de lo que nos trajo aquí los estilos externos, esto normalmente se hace extrayendo todo el CSS en un archivo .css externo que se puede vincular al HTML con la etiqueta de enlace, pero hay una característica oculta aquí que no muchos saben, que es como separar estos archivos por consulta de media-query:

<link rel="stylesheet" media="screen and (max-width: 767px)" href="css/mobile.css" />

Los beneficios de estas implementaciones son que si la web se sirve a través de un protocolo ≥ http2, podemos manejar la descarga de esos recursos en paralelo con el HTML y mejorar el rendimiento, y permitir que el navegador tenga la capacidad de elegir qué CSS descargar en función de su tamaño o forma de mostrar el contenido, porque este atributo de medios se puede establecer como cualquiera de las consultas de medios normales.

Eso es todo por ahora, por favor avíseme si tiene alguna propuesta de publicación para la próxima.