Module anpassen: CSS

Bei vielen Modulen gibt es einen Schalter, mit dem man direkt zum CSS des Moduls gelangt und dieses ändern kann. Das scheint also der richtige Weg zu sein. Aber: Ist das wirklich eine gute Idee?

Bei fast jedem Modul gibt es eine Datei frontend.css, in der das Design der Ausgabe geregelt ist. Diese Datei muss vom Modulentwickler laufend angepasst werden, etwa wenn es neue Features gibt oder Unschönheiten bekannt wurden.

Wenn ein Anwender ein Update eines Moduls macht, kann er auswählen, ob auch neuere Dateien überschrieben werden sollen – was in aller Regel nur diese frontend.css betreffen kann.

Nun muss man sich fragen: Was habe ich denn für eine Wahl? Natürlich muss ich auch die frontend.css überschreiben, sonst habe ich veraltetes CSS und kann selbst im Dickicht auf Fehlersuche gehen.
Bei Core-Modulen habe ich ohnehin gar keine Wahl, weil die Dateien einfach überschrieben werden, egal wie alt sie sind. Generell ist das Dateialter kein verlässliches Kriterium.

Besser: Eigene modules.css

Man sollte die CSS-Dateien der Module nicht anrühren, sondern gesondert in einem eigenen Style-Sheet behandeln: Zur Erinnerung: Gleichlautende Bezeichner überschreiben, wenn die CSS-Datei später geladen wurde. Genauere Bezeichner gelten immer.
Rufe ich also eine modules.css im Template später auf, kann ich einfach die classes und ids aus der frontend.css übernehmen und geändert in modules.css angeben.

Das hat Vorteile: Ich weiß, wo meine Änderungen sind – und diese sind nicht verstreut irgendwo, sondern für alle Module gesammelt in einer Datei. Und: Bei einem Upgrade eines Moduls muss ich mir keine Gedanken machen.

Sinnvollerweise wird man diese modules.css im Template-Ordner (TEMPLATE_DIR) aufbewahren, weil sich die meisten Anpassungen ja auf ein bestimmtes Template beziehen und nur dort gültig sein sollen.
Für jedes Modul lege ich bei Bedarf einen Abschnitt an, mit vorangestellt zB:
/*Responsive FG*/
.rfg-classe {border: 2px solid #999;}

Noch besser: Ab ins template.css

Statt einer neuen Datei kann man natürlich auch die Anweisungen direkt ins CSS des Templates geben. Ganz am Ende der template.css (style.css – wie auch immer) ist ein guter Ort dafür.
 

Zurück