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 /+.:?.

¡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.

Si quieres conocer otros artículos parecidos a Estilo responsivo mediante selectores de atributos puedes visitar la categoría Tutoriales.