Tags mit Data Attributes stylen

Für einen Blog-Prototypen wollte ich kürzlich die Artikel-Tags stylen. Alle Tags in der gleichen Farbe anzuzeigen, fand ich dabei ein bisschen langweilig:

Stattdessen wollte ich die Gelegenheit nutzen, um etwas mehr Farbe auf meine sonst eher textlastige Seite zu bringen. Mein erster Gedanke war, den Tags einfach zufällige Farben zu geben. Das kann allerdings beim Überfliegen der Liste schnell verwirrend werden: Farbe ist ein recht starker Ankerpunkt, gerade wenn es ein Akzent in einem sonst eher monochromen Interface ist. Sollte css mal rot, mal blau, mal grün sein, kann das desorientieren anstatt zu unterstützen.

Stattdessen wollte ich den wenigen Tags, die ich oft benutze, feste Farben vergeben. Mein erster Schritt war, BEM-artige Modifier-Klassen für die unterschiedlichen Farben zu schreiben:

.tag {
  background-color: var(--primary-01);
  color: var(--primary-09);
  padding: 0.5rem 1rem;
	... // restliche Tag-Styles
}

.tag--blue {
  background-color: var(--blue-01);
  color: var(--blue-09);
}

Indem auf einen Tag dann noch die zusätzliche Klasse tag--blue setze, wird der Tag also blau angezeigt — so habe ich dann Tags in den Farben meines Farbschemas generiert.

Die Tags über Modifier-Klassen zu stylen ist einfach und gut zu lesen. Allerdings müsste ich dann irgendwo hinterlegen, dass zum Beispiel der Tag UX immer grün sein soll. Das könnte man zwar mit einem Javascript-Mapping machen, aber ich wollte mal etwas Neues lernen und dabei meine HTML/CSS Skills ausbauen.

Data Attributes im CSS verwenden permalink

Um diese Infos direkt im CSS zu speichern, muss ich dort irgendwie an den Tag-Inhalt kommen. Hierfür eignen sich Data Attributes, die man auch fürs Styling benutzen kann:

.tag {
  background-color: var(--grey-01);
  color: var(--grey-09);
  ... // restliche Tag-Styles
}

.tag[data-tag="ux"] {
  background-color: var(--green-01);
  color: var(--green-09);
}

.tag[data-tag="design-thinking"] {
  background-color: var(--blue-01);
  color: var(--blue-09);
}

Standardmäßig sind Tags in einem neutralen Grau. Der Tag „UX“ dagegen sollen grün sein, „Design Thinking“ und blau.

Tag-Inhalt ins Data Attribute schreiben (lassen) permalink

Die einzelnen Tags sind implementiert als List-Elements, die nun ihren Text als Data-Attribute erhalten sollen. In Nunjucks, der Templating-Sprache, die ich am meisten benutze, funktioniert das so:

{% for tag in tags %}
  <li class="tag" data-tag={{ tag | slug }}>{{ tag }}</li>
{% endfor %}

Dieser Tag-Text wird dafür durch Eleventys Slug-Filter geschickt (das passiert mit {{ tag | slug }}). Text, der durch diesen Filter geht, wird so umgewandelt, dass er sicher in HTML verwendet werden kann. Aus Design Thinking wird dann beispielsweise design-thinking.

Wenn ein Artikel also den Tag Design Thinking hat, wird dieses HTML erzeugt:

<li class="tag" data-tag="design-thinking">Design Thinking</li>

Findige Leser:innen sehen: Das ist genau das Attribut, das wir weiter oben im CSS definiert haben! Es greift also die Regel .tag[data-tag="design-thinking"], wodurch der Tag blau wird.

Jetzt kann ich im CSS für die Tags, die ich am häufigsten benutze, Farben festlegen. Und die Liste sieht gleich wesentlich ansprechender aus: