Responsive Styling Using Attribute Selectors

Eine der Herausforderungen, denen wir bei der Implementierung von atomarem Styling auf Basis von Klassen gegenüberstehen, ist, dass es oft einen spezifischen Breakpoint für den Kontext benötigt.

<div class="span-12"></div> <!-- we want this for small screens  -->
<div class="span-6"></div>  <!-- we want this for medium screens -->
<div class="span-4"></div>  <!-- we want this for large screens  -->

Es ist üblich, ein Präfix zu verwenden, um jeden Breakpoint zu adressieren

<div class="sm-span-12 md-span-6 lg-span-4"></div>

Das funktioniert gut, bis wir anfangen, mehrere Klassen hinzuzufügen. Dann wird es schwierig, den Überblick zu behalten, was zu was gehört und wo etwas hinzugefügt, entfernt oder geändert werden muss.

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

Wir können versuchen, es lesbarer zu machen, indem wir es neu gruppieren

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

Wir können schicke Trennzeichen hinzufügen (ungültige Klassennamen werden ignoriert)

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

Aber das fühlt sich immer noch unordentlich und schwer fassbar an, zumindest für mich.

Wir können einen besseren Überblick bekommen und Implementierungspräfixe vermeiden, indem wir Attributselektoren anstelle von tatsächlichen Klassen gruppieren

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

Dies sind keine verlorenen Klassen, sondern eine durch Leerzeichen getrennte Liste von Attributen, die wir mit [attribute~="value"] auswählen können, wobei ~= erfordert, dass das exakte Wort im Attributwert gefunden wird, um übereinzustimmen.

@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. */   
}

Es mag etwas seltsam aussehen, aber ich denke, die Übersetzung von atomaren Klassen in  Attribute ist ziemlich unkompliziert (z.B. .sm-span-1 wird zu [data-sm~="span-1"]). Außerdem haben Attributselektoren die gleiche Spezifität wie Klassen, also verlieren wir dort nichts. Und im Gegensatz zu Klassen können Attribute ohne Escaping von Sonderzeichen geschrieben werden, wie /+.:?.

Das ist alles! Auch hier handelt es sich lediglich um eine Idee, die darauf abzielt, den Austausch von Deklarationen in Media Queries einfacher zu schreiben, zu lesen und zu verwalten. Es ist definitiv kein Vorschlag, Klassen oder ähnliches abzuschaffen.