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: