CSS in Legacy-Projekten

Vor kurzem habe ich wieder einmal den Auftrag bekommen, ein altes Projekt optisch etwas aufzufrischen. In diesem Fall hat das Layout dem Kunden nach wie vor gut gefallen, es gab aber Anpassungen für eine bessere Lesbarkeit und Anpassungen am Mobile-Layout.

Wenn man ein bestehendes Projekt anpassen möchte, bekommt man als erstes mal einen Einblick, wie das Projekt aufgebaut wurde.

Welches CMS wurde verwendet? Welche Template-engine? Welches CSS-Framework? Welche Erweiterungen und Anpassungen gibt es?

Das ist manchmal auch so der Moment, in dem man das Guckloch am liebsten wieder verschliessen und vergessen würde.

An den verwendeten Techniken und Hilfsmittel kann man das Alter eines Projekts (oder aber das Skilllevel des damaligen Entwicklers) etwa abschätzen.

In diesem Fall also gab es kein CSS Framework, ein einziges unkomprimiertes CSS und ein zusätzliches für jede Subsite.

Es ist nichts dokumentiert und nicht ersichtlich, nach welchen Prinzipien die Elemente gestaltet wurden.

Also bleibt nichts anderes übrig als die Elemente mit Inspect zu suchen und in den am besten passenden Selektoren Anpassungen vorzunehmen.

Bestehende CSS Anweisungen

Dieses Beispiel zeigt, wie Standardtext im Projekt gestylt wird. Jedes Element unterhalb #contents bekommt dieselbe Schriftgrösse, Zeilenhöhe und Farbe zugewiesen.

Das heisst, dasselbe gilt auch für Titel innerhalb der Seite.

Um diesen eine andere Farbe geben zu können, habe ich eine Klasse page-title definiert.

Dies reicht aber nicht, wegen der Spezifität.

Neue CSS Klasse mit Hack

Also musste ich meiner Anweistung mit !important mehr Gewicht verleihen.

Solche Hacks sind meist ein Zeichen dafür, dass nicht sauber gearbeitet wird. Sie sind in einem ordentlichen Projekt nur in Ausnahmefällen nötig.

So verwende ich dies in meiner CSS Bibliothek bisher nur in vier Anweisungen, wenn es darum geht ein Element bei einem bestimmten Breakpoint auszublenden.

In so einem Projekt bleibt mir eigentlich nichts anderes übrig, als immer neue Selektoren zu schreiben. Ich weiss ja nicht, wo die bestehenden Selektoren überall greifen. Insbesondere Stern-Selektoren sind diesbezüglich schwierig.

Solche Probleme kann man nur umgehen, wenn mit einem bestimmten Plan und dem Bewusstsein, dass Anpassungen in der Zukunft gemacht werden, gearbeitet wird.

Posted on Jun 28, 2019.

Schreib mir eine Nachricht