Könnten HTML-Klassen-Gruppierungen sie besser lesbar machen?

Sie können mehrere Klassen für ein HTML-Element haben

<div class="module p-2"></div>

Daran ist überhaupt nichts falsch oder ungültig. Es hat zwei Klassen. In CSS werden beide angewendet

.module { }
.p-2 { }

const div = document.querySelector("div");
console.log(div.classList.contains("module")); // true
console.log(div.classList.contains("p-3"));    // false

Aber wie sieht es mit der Gruppierung aus? Alles, was wir hier haben, ist ein durch Leerzeichen getrennter String. Vielleicht ist das in Ordnung. Aber vielleicht können wir die Dinge klarer machen!

Vor Jahren sprach Harry Roberts darüber, sie zu gruppieren. Er umschloss Klassengruppen in eckige Klammern

<div class="[ foo  foo--bar ]  [ baz  baz--foo ]">

Die obigen Beispielklassennamen sind völlig abstrakt, nur um die Gruppierung zu demonstrieren. Stellen Sie sich vor, sie sind wie Primärnamen und Variationen als eine Gruppe, und dann Utility-Klassen als eine andere Gruppe

<header class="[ site-header site-header-large ]  [ mb-10 p-15 ]">

Diese eckigen Klammern? Bedeutungslos. Diese sind da, um uns Entwicklern visuell die Gruppen darzustellen. Technisch gesehen sind sie *auch* Klassen, also wenn ein Sadist .[ {} schreiben würde, würde es in Ihrem CSS etwas bewirken. Aber das ist so unwahrscheinlich, dass die Klarheit durch die Gruppen hoffentlich überwiegt und hilfreicher ist.

Das obige Beispiel gruppiert den Primärnamen und eine Variation in einer Gruppe und einige Beispiel-Utility-Klassen in einer anderen Gruppe.

Ich empfehle diesen Ansatz nicht unbedingt. Es sind einfach Gruppen von Klassen, die Sie haben könnten.

Hier ist derselbe Gruppierungsstil mit anderen Gruppen

<button class="[ link-button ] [ font-base text-xs color-primary ] [ js-trigger ]" type="button" hidden>

Das Beispiel hat einen einzelnen Primärnamen, Utility-Klassen mit unterschiedlichen Namensstilen und eine dritte Gruppe für JavaScript-spezifische Selektoren.

Harry hat diesen Ansatz vor einigen Jahren aufgegeben und gesagt, dass sein Aussehen für die verschiedenen Leute und Teams, mit denen er arbeitete, einfach zu seltsam war. Es verursachte genug Verwirrung, dass die Vorteile von gruppierten Klassen es nicht wert waren. Er schlug stattdessen Zeilenumbrüche vor

<div class="media  media--large
            testimonial  testimonial--main"> 

Das erscheint mir ähnlich klar. Die Zeilenumbrüche in HTML sind völlig in Ordnung. Außerdem hat der Browser damit keine Probleme und JSX wird sowieso oft mit vielen Zeilenumbrüchen in HTML geschrieben, wegen all dem zusätzlichen Zeug, das auf Elemente gepackt wird, wie Event-Handler und Props.

Vielleicht kombinieren wir die Ideen von Zeilenumbrüchen als Trennzeichen und identifizierten Gruppen ... mit Emojis!

Siehe den Pen
Grouping Classes von Chris Coyier (@chriscoyier)
auf CodePen.

Seltsam, aber lustig. Emojis sind dort absolut gültig. Wie die eckigen Klammern könnten sie auch etwas bewirken, wenn jemand einen Klassennamen dafür schreiben würde, aber das ist generell unwahrscheinlich und etwas, worüber ein Team sprechen sollte.

Eine weitere Sache, die ich verwendet habe, sind data-* Attribute für Gruppen anstelle von Klassen, wie...

<div 
  class="primary-name"
  data-js="js-hook-1 js-hook-2"
  data-utilities="padding-large"
>

Sie können immer noch basierend auf Attributen in CSS und JavaScript auswählen und stylen, so dass es funktionsfähig ist, wenn auch etwas weniger bequem aufgrund der umständlichen Selektoren wie [data-js="js-hook-1"] und dem Fehlen von praktischen APIs wie classList.

Wie sieht es bei Ihnen aus? Haben Sie andere clevere Ideen für Klassengruppierungen?