// ActionNote
Semantik lebt länger als Brand
Warum mein BeaverBuilder-Modul Annas Mail nicht überlebt hätte — und was CSS Custom Properties mit dem Unterschied zwischen Bedeutung und Erscheinung zu tun haben.
Veröffentlicht: 30. April 2026 · Holger Theymann
Drei Monate lebte mein Modul in Frieden. Dann kam die Mail von Anna: "Können wir die lr-box auch auf holgertheymann.com benutzen?"
Ich saß im Büro, Kaffee links, Editor offen, und wusste sofort, was ich mir gebaut hatte. Eine hübsche kleine Falle, mit Liebe verschnürt.
Die lr-box ist ein BeaverBuilder-Modul für WordPress. Drei Presets (info, important, voice), die als farbige Kästen auf lightrunning.net erscheinen, wenn ich im Page-Builder ein Häkchen setze. Beim ersten Build hatte ich die Farben direkt aus dem Astra-Theme gezogen: var(--lr-theme-primary) für info, var(--lr-accent) für important. Es funktionierte beim ersten Klick. Genau das war das Problem.
// Wenn etwas beim ersten Klick funktioniert, ist es noch lange kein System Design, sondern ein glücklicher Zufall mit Hex-Code.
Annas Mail bedeutete: das Modul muss auf eine zweite Site. Vielleicht eine dritte, irgendwann als Open-Source-Plugin in die WordPress-Welt. Und auf holgertheymann.com gibt es kein --lr-theme-primary. Da heißt die Variable anders, weil die Marke anders ist, weil die ganze Tonalität eine andere ist. Mein Modul würde dort in Schwarz auf Schwarz rendern, oder noch schlimmer: in den Farben einer Site, die mit der hier nichts zu tun hat. Ich hätte Brand-Spillover gebaut, ohne es zu wollen.
Ich öffnete die Datei, scrollte runter zur CSS-Sektion, und musste lachen. Ich hatte Semantik und Marke in dieselbe Variable geschrieben. "info" und "blau" lebten auf demselben Speicherplatz. Als wäre die Bedeutung des Wortes "Warnung" identisch mit der Farbe Rot. Was sie offensichtlich nicht ist — sonst hätte Japan keine roten Sonnenflaggen und die Schweiz keine roten Pässe.
Die Lösung war kleiner als der Schreck. Ich gab der Box eigene Custom Properties: --lantern-lrbox-info-color, --lantern-lrbox-important-color, --lantern-lrbox-voice-color. Die Defaults sind generische Hex-Werte, #0073aa für info, #dc3232 für important, ein gedeckter Goldton für voice. Jede Site, die das Modul einbindet, kann die Variablen über einen WP-Filter oder ihren eigenen CSS-Companion überschreiben. lightrunning.net legt seine Astra-Tokens drüber. holgertheymann.com bekommt seine eigenen. Die dritte Site, falls sie kommt, macht es genauso. Der Plugin-Core weiß, was "info" bedeutet — nicht, welche Farbe das ist. Das ist Absicht.
Beim Refactor merkte ich, dass die Schwäche älter war als das Modul. Ich hatte schon andere Sachen so gebaut — kleine Tools für eine Site, die später auf zwei wandern sollten und es dann nicht überlebten. Es ist ein Anfängerfehler, den auch Leute mit zwanzig Jahren im Geschäft machen, weil er sich nicht wie ein Fehler anfühlt, sondern wie pragmatisches Vorgehen. YAGNI, sagt man dann — bauen wir, wenn es soweit ist. Außer es ist eben schon zu spät, weil die Schnittstelle ohne Breaking Changes nicht mehr zu ändern ist.
// Der Witz an YAGNI ist, dass es nur funktioniert, wenn man die Stelle kennt, an der es zerbricht.
Was bleibt: ein Plugin, das jetzt drei Sites tragen kann und keine davon kennt. Eine Runde Housekeeping, die in Wahrheit ein Reissue der Schnittstelle war. Und die Erinnerung, dass jede Codezeile, in der ich heute "lightrunning" schreibe, morgen ein Stück Legacy Code sein wird, das vermutlich ich wieder auseinanderpflücken muss.
// Manchmal ist der zukünftige Idiot, dem man die Arbeit hinterlässt, auch nur das ältere Selbst von gestern.
Bedeutung wandert mit. Marken altern, werden umbenannt, verkauft, neu gepitcht. Das Wort "info" wird in zehn Jahren noch dasselbe meinen. Der Hex-Wert daneben wird es nicht.
Die nächste Mail von Anna wird mich an etwas Nettem finden. Hoffentlich.
// Häufige Fragen
Was ist der Unterschied zwischen einem semantischen Token und einem Brand-Token?
Gilt YAGNI nicht als Argument dagegen, Schnittstellen früh zu abstrahieren?
Muss ich CSS Custom Properties für jedes Plugin so aufbauen?
// Quellen
- MDN Web Docs (Mozilla): Using CSS Custom Properties (Variables) [documentation]
- Martin Fowler: Yagni [whitepaper]
- W3C: W3C Design Tokens Community Group [specification]
- Parnas, D.L.: On the Criteria to Be Used in Decomposing Systems into Modules . Communications of the ACM, 15(12), 1053–1058 (1972) [whitepaper]
- The Stroop Effect Involves an Excitatory–Inhibitory Fronto-Cerebellar Loop . Nature Communications, 13 (2022) [study]