Estilo responsivo mediante selectores de atributos

 

 

 

Uno de los desafíos que enfrentamos al implementar un estilo atómico basado en clases es que a menudo depende de un punto de interrupción específico para el contexto.

div/div !-- we want this for small screens --div/div !-- we want this for medium screens --div/div !-- we want this for large screens --

Es común usar un prefijo para apuntar a cada punto de interrupción:

div/div

Esto funciona bien hasta que comenzamos a agregar varias clases. Ahí es cuando resulta difícil realizar un seguimiento de lo que se relaciona con qué y dónde agregar o eliminar. o cambiar cosas.

div/div

Podemos intentar hacerlo más legible reagrupando:

 

div class=" sm-span-12 sm-font-size-xl 
 md-span-6 md-font-size-xl md-font-weight-500 
 lg-span-4 lg-font-size-xl lg-font-weight-700"/div

Podemos agregar separadores originales (se ignorarán los nombres de clases no válidos):

div/div

Pero esto todavía me parece confuso y difícil de entender, al menos para mí.

Podemos obtener una mejor visión general y evitar prefijos de implementación agrupando selectores de atributos en lugar de clases reales:

div data-sm="span-12 font-size-lg" data-md="span-6 font-size-xl font-weight-500" data-lg="span-4 font-size-xl font-weight-700"/div

Estas no son clases perdidas, sino una lista de atributos separados por espacios en blanco que podemos seleccionar usando [attribute~="value"], donde ~=requiere que se encuentre la palabra exacta en el valor del atributo para que coincida.

@media (min-width: 0) { [data-sm~="span-1"] { /*...*/ } [data-sm~="span-2"] { /*...*/ } /* etc. */ }@media (min-width: 30rem) { [data-md~="span-1"] { /*...*/ } [data-md~="span-2"] { /*...*/ } /* etc. */ }@media (min-width: 60rem) { [data-lg~="span-1"] { /*...*/ } [data-lg~="span-2"] { /*...*/ } /* etc. */ }

Puede parecer un poco extraño, pero creo que traducir clases atómicas a atributos es bastante sencillo (por ejemplo, .sm-span-1se convierte en [data-sm~="span-1"]). Además, los selectores de atributos tienen la misma especificidad que las clases, por lo que no perdemos nada allí. Y, a diferencia de las clases, los atributos se pueden escribir sin caracteres especiales de escape, como /+.:?. Solucion de crucigramas

¡Eso es todo! Nuevamente, esto es simplemente una idea que tiene como objetivo hacer que las declaraciones de cambio en las consultas de medios sean más fáciles de escribir, leer y administrar. Definitivamente no es una propuesta para acabar con las clases ni nada por el estilo.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Estilo responsivo mediante selectores de atributos

Estilo responsivo mediante selectores de atributos

Uno de los desafíos que enfrentamos al implementar un estilo atómico basado en clases es que a menudo depende de un punto de interrupción específico para e

programar

es

https://pseint.es/static/images/programar-estilo-responsivo-mediante-selectores-de-atributos-1568-0.jpg

2024-06-13

 

Estilo responsivo mediante selectores de atributos
Estilo responsivo mediante selectores de atributos

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences