Vom Zähmen der CSS-Monster

Wer schon einmal die komplexen Tiefen des Backends verlassen musste, um im vermeintlich einfacheren Frontend eines Projektes das Bunte und Spielerische anzupassen, wünscht sich meist schnell zurück zu den dokumentierten Funktionen, übersichtlichen Modulen und standardisierten Codezeilen. Nämlich genau dann, wenn man die völlig chaotischen und total überladenen CSS-Dateien – von mir auch liebevoll CSS-Monster genannt – zu Gesicht bekommt. Meist traut man sich kaum die 1000+ Zeilen auch nur schief anzusehen, weil man schon im vornherein weiß, dass jede noch so winzige Änderung das schlafende Monster wecken und das Design zerstören kann. Doch woher kommen diese Monster und wie kann man sie vermeiden?

In diesem Artikel möchte ich die Ursachen von CSS-Monstern erklären und Ihnen vier Punkte zur Vermeidung eben dieser vorstellen.
Weiterlesen

ExtJS Theming: Eine Anwendung, 100 Gesichter

In der Frontendentwicklung ist es nicht unüblich, eine Anwendung in verschiedener Art in Erscheinung treten zu lassen. Ob für die Abgrenzung mehrerer Brands voneinander, den Verkauf einer Software mit spezifischen Designanpassungen für den Käufer (etwa für einen Online-Shop), oder zur Durchführung von A/B-Tests mit unterschiedlich gestylten Frontendkomponenten – es gibt eine Vielzahl von Gelegenheiten, bei denen es Sinn macht, eine Anwendung mit unterschiedlichen Gestaltungen in anderen Gewändern zu zeigen.

Hier möchte man selbstverständlich in den wenigsten Fällen das komplette Frontend neu schreiben. Dabei können bereits kleinere Änderungen, etwa eine Anpassung der verwendeten Farben, das Aussehen der Anwendung grundlegend ändern.

Im Folgenden möchte ich zeigen, wie man durch den Einsatz von Themes die eigene Anwendung mit relativ geringem Aufwand in neuem Glanz präsentieren kann. Weiterlesen

Agiles CSS

Bei Mayflower wird agil entwickelt. In erster Linie bedeutet dies für den Kunden, dass wir auf geänderte Anforderungen schnell reagieren können.
Schnell reagieren zu können heißt auch, neue oder geänderte Anforderungen so schnell wie möglich umzusetzen.
Dafür muss der Code so aufgebaut sein, dass man mit minimalen Aufwand Änderungen durchführen kann.
In PHP nutzen wir dafür entsprechende Abstraktionen und Kappselungen.

Aber wie schaut das Ganze im Frontend aus, insbesondere in CSS Dateien?
Was, wenn der Kunde das Blau aus dem vorgegebenen Farbschema eine Nuance dunkler haben möchte?
Weiterlesen