F-LOG-GE

Kontexte für Module

In der letzten Zeit lese ich wieder vermehrt Artikel über Best Practices im Frontend, über die richtige Benamung von Klassen und ähnlichem. Das Thema lässt mich seit Jahren nicht los und ich gestehe, ich habe da meine eigene Meinung, die meist zwischen den jeweiligen bekannten Autoren verläuft. Ohne zu sehr in Details zu gehen, möchte ich mir heute ein Argument vornehmen, das auch durch ständige Wiederholung nicht valider wird. Alle bisher gelesenen Artikel raten komplett von der positionsabhängigen Ansprache im CSS ab. Es geht um solche Konstrukte im CSS:

.modul {
	/* CSS-Regeln */
}

#footer .modul {
	/* abweichende CSS-Regeln */
}

body.article .modul {
	/* abweichende CSS-Regeln */	
}

Ich finde diese Art CSS zu schreiben nicht schlimm. Und ich kann mich an Situationen erinnern, in denen es sinnvoll sein kann. Ignorieren wir mal den Glaubenskrieg um IDs - ich habe nichts gegen einen sinnvollen Einsatz, aber das ist ein anderer Artikel. Dann bleibt noch immer die Abhängigkeit im Code von einer speziellen Umgebung.

Was gerne als Nachteil beschrieben wird ist doch der intendierte Effekt. Ein Modul muss an zwei Stellen eine Designmodifikation erfahren. Der oben skizzierte Weg ist eine Möglichkeit. Die zweite Möglichkeit - die immer als einzig wahre propagiert wird - ist die Vergabe einer zweite Klasse für das Modul, quasi als Modifikator. Diese Vorgehensweise bevorzuge ich auch. Sie belässt das Styling beim Modul. Das Modul wird gekapselt und kann so einfach in mehreren Projekten eingesetzt werden. Unser obiges Beispiel könnte dann so aussehen:

.modul {
	/* CSS-Regeln */
}

.modul.footer {
	/* abweichende CSS-Regeln */
}

.modul.article {
	/* abweichende CSS-Regeln */	
}

Doch die Nutzung von Modifikatoren erfordert die komplette Kontrolle über den Quellcode. Ich habe jahrelang mit einem CMS gearbeitet, bei dem nicht immer die komplette Kontrolle hatten. So hatten wir Seitenmodule, die auf der Startseite an einer anderen Stelle hingen, als auf Unterseiten. Es waren innerhalb des CMS dieselben "Seiten" - also Module -, keine Instanzen des gleichen Moduls. Da lag es nahe, den Kontext des Moduls abzufragen, denn der konnte einfach bestimmt und mittels CSS angesprochen werden.

Es mag Situationen geben, in denen genau ein solches Vorgehen sinnvoll erscheint. Best Practices sind gut und wichtig. Absolute Wahrheiten erscheinen mir aber im Bereich Frontend eher selten vorzukommen. Im beschriebenen Fall finde ich die Anregung wichtig, alle für ein Modul relevanten Styles beim Modul zu belassen. Ausnahmen sollten aber möglich sein, wenn man die Konsequenzen durchdringt.

Dies ist ein Archiv meines alten Weblogs, das von Oktober 2006 bis Dezember 2022 als Wordpress-Instanz existierte.