Codecandies

Das Weblog von Nico Brünjes.

The state of CSS

Da ist ein Eisbär im Raum?

Im Moment gibt es wieder viel zu lernen, in Sachen CSS. Da sind zunächst die vielen neuen Dinge, die CSS3 bringt. Durch die derzeit rasante Browserentwicklung, Polyfills oder einfache Fallbacklösungen kann man vieles davon schon heute oder wenigstens morgen gebrauchen. Dazu kommen die Learnings aus einigen Jahren intensiven Einsatzes von CSS, seit der internationalen Ächtung des Tabellenlayout ist viel passiert.

Seit CSS dem style-Attribut entwachsen ist, unterlag es lange Zeit einer eher langsamen Entwicklung. Gehemmt durch den Internet Explorer hat es ewig gedauert, bis sich CSS 2(.1) überhaupt durchgesetzt hat. Man hat lange Zeit eher mit den gegebenen Umständen hantiert, anstatt CSS weiter zu entwickeln. Die floats lösten die Tabellen ab, die CSS Hacks beherrschten die Szene lange, machten zweigleisige Entwicklung für potente und für beschränkte Browser möglich. Das Set an Techniken hat sich aber in der Menge kaum verändert, vielmehr lernten wir immer besser damit umzugehen. Dabei sind aber auch viele Standardlösungen entstanden, die heute einer genaueren Prüfung unterzogen werden müssen.

Our best practices are killing us!

Nicole Sullivan (die, nicht die) tritt derzeit mit einem Vortrag unter diesem Titel auf, den ich sehr beeindruckend finde, weil er so sehr das trifft, was ich derzeit selbst in der Praxis feststelle. Viele der best practices, die in den letzten Jahren ersonnen, gepaukt und umgesetzt wurden, klingen gut, haben sich aber in den Jahren ihres Einsatzes vielleicht gar nicht bewährt. Andere wurden von der Entwicklung überholt, wurden zur Angewohnheit. Um mal ein klassisches Beispiel aus einem anderen Bereich zu bringen: wenn Sie <script>-Blöcke in einem HTML-Document nutzen, umgeben sie den Code dann auch noch mit HTML-Kommentarzeichen? Eine Technik, die heute lange nicht mehr nötig ist. Trotzdem sieht man sie immer wieder. So geht es auch mit vielen Angewohnheiten in CSS.

Nicole Sullivan nennt viele Beispiele. Unter anderem findet sie:

In der Praxis nicht bewährt

Da geht es ihr genau wie mir. Wenn man betrachtet, wie wirklich große Website-Projekte entstehen, stellt man fest, dass durch die genannten best practices Nötiges nur von einer Ecke des Projekts in die andere verschoben wurde. So kann man wunderbares, absolut semantisch reines HTML schreiben, ohne jegliche Layout-Divs, so klein wie nur irgend möglich, ob die Seite dadurch wirklich schneller wird? Oder übersichtlicher? Nun, das HTML natürlich schon, aber wenn wir uns anschauen, wieviel sich gegenseitig überschreibendes CSS benötigt wird, merkt schnell, das man die Komplexität nur verlagert hat. Miss Sullivans Beispiel: bei Facebook hatte man vor einem umfassenden CSS-Relaunch 706 CSS Dateien, in denen 261 Mal die gleiche Farbe blau definiert war. Do not repeat yourself?

Und dabei geht’s nicht mal darum, sich gegenseitig den schwarzen Peter zuzuschieben: Komplexität im CSS schadet allen Beteiligten, denn sie drückt auf die Performance. Mein Beispiel ist die tägliche Praxis. Bei einem großen Projekt wurden nahezu nach Lehrbuch beim Schreiben von HTML-Code (und Javascript[1]) auf auf eine ganze Reihe best practices geachtet. Das hat zunächst mal dazu geführt, dass wir zwar schlankes HTML, aber ziemlich viel CSS (und Javascript) über die Leitungen schicken. Dabei ist die Menge an CSS und seine Komplexität eine direkte Folge der semantischen Strukturen im HTML. Aber wo im HTML bspw. nur wenige Klassen stehen, muss im CSS mit unendlich langen Selektorketten auf Elemente zugegriffen werden, was die Menge an CSS erhöht, die Geschwindigkeit des Renderings aber herabsetzt. Nach einigen Jahren ist diese Situation immer schlimmer geworden. Sie ist dabei kaum noch überschaubar, weil man praktisch nur noch mit dem Firebug entscheiden kann, welche CSS-Regel auf ein Element greift. Und die schiere Menge an Code macht es nicht besser. Abhilfe schafft da oft, einfach mal eine Klasse ins HTML zu schreiben, die direkt angesteuert wird. Und die darf dann vielleicht auch mal “blue” heissen, naja, vielleicht besser “main-color”.

CSS Refactoring?

Will man sich aber, mindestens in Teilen nun aber von dieser Praxis abwenden, dann hat man jetzt den GAU, den man eigentlich vermeiden wollte: Änderungen an der Codebasis und am CSS. Zumindest kann man das Nutzen, um die IE6-Unterstützung endgültig zu droppen und so das ganze CSS etwas zu modernisieren. So stehen nun vieler Orten viele Änderungen in Sachen CSS an. Neues hinzufügen, alte Zöpfe abschneiden. Alte Projekte auf den aktuellen Stand heben.

[1] Noch ein Nebensatz zur Rolle von Javascript: dies wurde erstaunlicherweise viel zu oft genutzt, um die selbst gesetzten Grenzen bei HTML und CSS zu überwinden oder umgehen. Hüstel…

6 Kommentare

  1. Stimme sehr zu. Irgendwann komme ich zu dem Punkt, an dem ich entscheide neben semantischen Klassen auch praktische Hilfsklassen wie ‘Main-color’ zu verwenden.

  2. Marcus Kober
    12.08.2011, 12:54 Uhr

    Vielen Dank für diesen schönen Artikel -- er spricht mir aus der Seele. :)
    Erst gestern quälte ich mich durch unsinnige Quelltexte, die voll waren mit diesen “best practices”, die alles so aufgebläht haben, dass man das “best” getrost weglassen kann. Gestern habe ich schon über das in HTML-Kommentare gepackte Javascript gelacht -- und heute hier nochmal. :)
    Ich überlege schon fast, einmal ein HTML- und CSS-Horrorkabinett aufzubauen…

  3. CSS funktioniert 2011 so ähnlich wie der vom Sex predigende Papst. Natürlich kann man auf die wenigen lauten Stimmen hören, oder man setzt sich einfach an die Tastatur und wird zum Praktiker. Egal welche der populären großen Seiten, keiner arbeitet mit so einer sterilen Grazilität, wie sich die CSS-Päpste es wünschen…und das ist gut so.

    Insofern einfach mal weniger auf den guten Ratschlag hören und eigene Fehler machen aus denen man ungleich mehr Erfahrung sammelt. Probieren geht halt immer noch über studieren. Ich für meinen Fall würde lieber die andere Nicole Sullivan über CSS lamentieren hören. Wir hören uns in 12 Monaten wieder, wenn der Papst plötzlich sagt, dass Weiß eben doch Schwarz ist.

  4. @ Markus: ich will nicht ausschließen, dass ich nicht auch noch <!-- in einigen Tempates --> stecken habe… ;)

    @Christian… ja, selig sind die, die es schon immer besser wussten.

  5. Marcus Kober
    12.08.2011, 13:38 Uhr

    Jaa, in alten Templates vielleicht. Aber doch nicht in aktuellen Entwürfen! :)

  6. CSS ist ein mächtiges und unheimlich gutes Mittel, Zielen wie Trennung von Inhalt und Design oder Wartbarkeit ein Stückchen näher zu kommen. Es ist mächtig aber auch komplex. Und als wenn das nicht reichen würde, kommen noch die diversen Browser …
    Die optimale Lösung ist nicht schwarz oder weiß. Es gibt auch kein Patentrezept für die Lösung aller Layout-Probleme. Softwareentwicklung hat viel mit der Abwägung von Möglichkeiten, Abstraktionen und kreativer Lösungsfindung zu tun. Wer sagt, dass es die optimale Lösung gibt, oder wie diese auszusehen hat? Wichtig ist, dass man einige Grundsätze beherzigt, und für den Rest bedient man sich einfach des gesunden Menschenverstandes. Aus diesem Grund heißt es “Entwicklung” und nicht “abschreiben”.

Ein Ping

  1. [...] The state of CSS – Codecandies „Die floats lösten die Tabellen ab, die CSS Hacks beherrschten die Szene lange, machten zweigleisige Entwicklung für potente und für beschränkte Browser möglich. Das Set an Techniken hat sich aber in der Menge kaum verändert, vielmehr lernten wir immer besser damit umzugehen. Dabei sind aber auch viele Standardlösungen entstanden, die heute einer genaueren Prüfung unterzogen werden müssen.“ [...]