Codecandies

Das Weblog von Nico Brünjes.

You never have expected…

Hallo, hier spricht die heilige CSS-Inqisition. Sie hätten das sicherlich nicht erwartet, aber hier ging es ja schon das eine oder andere Mal um CSS-Codepoetrystyleguidespießereien, da kann ich natürlich kaum an mich halten, wenn in einem von mir hochgelobten Webmagazin derartig hahnebüchener Blödsinn verzapft wird.

Andreas Dölling ist laut Autorenangbae Webentwickler, kann es aber nicht lassen, seine Nase immer wieder in Bereiche zu stecken, die ihn eigentlich gar nichts angehen, und seine Meinung dazu kundzutun. Schon passiert würde ich mal sagen, obwohl ich dachte, dass CSS einen Webentwickler sehr wohl etwas angeht.

Zunächst einmal ist es natürlich eine super Sache, seine CSS-Klassen gut und semantisch zu benennen, es werden auch wirklich schöne und einleuchtende Besipiele genannt, die Herr Dölling einem alten Hasen abgescahut hat bzw. zu denen ihn das Qualitätsmanagement einer professionellen Firma gezwungen hat. Scheinbar aus Rachen gegen die Affront jedoch hat sich Herr Dölling noch einige Reste eigenen CSS-Stils bewahrt und die haben es in sich. Mein Vorschlag dazu: auf gar keinen Fall nachmachen!

Anordnung von CSS-Eigenschaften

Es wird empfohlen, Eigenschaften in der Reihenfolge der Wichtigkeit zu notieren, wobei in fünf Wichtigkeitsgruppen eingeteilt wird (Verhalten, Position und Dimension, Abstände und Rahme, Schriftgröße und Zeilenhöhe, Hintergrund und übrige Eigenschaften). Dämliche Idee numero uno: erstens halte ich die Wichtigeit von CSS-Eigenschaften für höchst diskutabel, das kommt halt immer auf den Fall an, in Wahrheit ist dies ein willkürliche Festlegung. Wogegen man eigentlich gar nichts einwenden kann, denn wenn es keine logische Reihenfolge gibt ist koordninierte Willkür der einzige Weg. Nur sind diese Gruppen schwer vemittelbar: man muss lernen, was zu welcher Gruppe gehört, lernen in welcher Reihenfolge die Gruppen anzuordnen sind und innerhalb der Gruppen, gibt es gar keine definierte Reihenfolge. Stellen sie sich einmal vor, sie sind Qualitätsmanager und sollen nun dieses Regelwerk an diverse Webentwickler und -dekorateure kommunizieren. Schönen Dank. Ich sag’s mal in CSS-Inquisitions-Sprache: wird sich nicht durchsetzen. Zu kompliziert, zu schwierig umzusetzen.

Der Gegenvorschlag bleibt bestehen: CSS-Eigenschaften immer in aplhabetischer Reihenfolge notieren. Das ist einfach, versteht jeder, ist eine nachprüfbare, also durchsetzbare Regel und super umsetzbar. Und führt auch auf lange Sicht zu lesbaren Stylesheets.

Einrückung und Umbrüche

Endgültig die Haare zu Berge stehen einem dann, wenn man die Idee zum quer schreiben liest. Herr Dölling, lassen sie sich an dieser Stelle einmal folgendes sagen: wer quer schreibt, ist noch lange kein Querdenker, eher schon ein Quertreiber. Mal davon abgesehen, dass die letzte Übersichtlichkeit, die Herrn Döllings drolliger Dialekt noch bietet, einzig und allein durchs Synthaxhighlighting zustande kommt, ist dies ein CSS-Code der sagt: »Fass mich nicht an! Mein Autor ist so von sich selbst überzeugt, dass er nicht glaubt, dass jemand anderes ausser er selbst Änderungen vornehmen möchte.« Danke schön.

Sowas darf man sicherlich auf den Server stellen, es spart eine Menge Platz und sicherlich das eine oder andere Byte an Gewicht. Aber während der Entwicklungszeit ist so eine Schreibweise einfach nur eins: kontraproduktiv. Man stelle sich nur vor, man soll jetzt hier eine CSS-Regel hinzufügen, womöglich nach der vorgenannten Fehllehre, sozusagen irgendwo in der 400 Zeichen langen Zeile. Wir wünschen fröhliches horizontal scrollen. Das ist wirklich eine dumme Idee. Auf gar keinen Fall nachmachen.

Hoffe, das war jetzt inquisitorisch genug, war ja auch so gewünscht. Da kann einem aber auch der Geduldsfaden reissen. Schon passiert: hier habe ich eine Videoaufnahme davon:

Nachtrag: ich habe heute morgen in meiner grenzenlosen Weisheit Dämlichkeit diesen Artikel aus Versehen gelöscht und musste z.T. von Hand restoren, dabei sind die Pingbacks flöten gegangen. Sorry.

22 Kommentare

  1. @Tobias Nein, man muss natürlich nicht persönlich werden. Aber zu einer echten Inquisition gehörts irgendwie dazu, meine ich.

  2. Die alphabetische Anordunung von CSS-Eigenschaften ist doch auch nix. Man reißt zusammengehörige Dinge auseinander (width+height, top+left …) und muss ständig umsortieren.

    Die „Wichtigkeit“ ist bei Andreas’ Methode natürlich diskutabel, aber die Gruppierung von zusammengehörigen Eigenschaften ist schon sinnvoll.

  3. Lustigerweise schreibt er zu seiner Ein-Zeilen-Schreibweise ja selbst auch folgendes:

    „Und bisher konnte ich mich damit auch in noch keinem einzigen Projekt durchsetzen, das ich im Team bestritten habe. Dennoch behaupte ich, dass meine Schreibweise praktischer und übersichtlicher ist […]“

    Ja ach, warum wohl nur? Weil es einfach Blödsinn ist, deshalb wohl. Aber trotzdem weiß er es natürlich besser. Ich weiß dagegen, wie man solche Leute nennt, was ich aber aus Höflichkeit jetzt nicht hier schreibe.

  4. @Dirk: Die Inquisition ist einfach stärker. :)

    @Gerrit: Halte ich wirklich für Einzelkämpferdenke. Da hat jeder eine andere Ordnung. Da nehme ich mir als Style-Police heraus dazwischen zu hauen und alphabetische Reihenfolge zu bestimmen.

  5. Muss man den immer gleich persönlich werden? Ist man ein schlechter Webentwickler weil man anders arbeitet?

    Die Einzeilen-Schreibweise ist sicherlich nicht optimal. Besonders wenn mehrere Leute am CSS arbeiten. Trotzdem nutze ich sie, so lange ich alleine an einem Projekt schraube. Ich kann damit einfach am schnellsten Arbeiten. Ich kenne meinen Code in-und-auswendig, ich brauche keine Übersicht, ich muss einfach nur schnell an alles rankommen.

    Klar, manch einer kommen damit nicht klar. Das ist geschmacksache. Ich gehe davon aus das jeder seinen eigenen Stil hat. Man hat ihn sich über Jahre angewöhnt und sieht ihn als „Best Practice“ an. Aber das bedeutet nicht das er es auch ist.

  6. Wenn man in einem Team arbeitet ist die alphabetische Sortierung von CSS Eigenschaften der kleinste gemeinsame Nenner.
    Als „One Man Show“ muss man seinen Weg selber finden.

  7. Es gibt verschiedene CSS-Coder mit verschiedenen Stilen. Wichtig ist, dass es nur an einer Stelle einheitlich ist, und das ist im Repository. Dann kann man es sich runterziehen, so formatieren wie man will (von der Fächer zur 1-Zeilen-Ansicht ist es in CSSEdit genau 1 klick) und bevor man es wieder hochlädt wird es eben in das standardisierte Format hochgeladen.

    Ich bin auch gegen die alphabetische Anordnung, weil CSS-Styles meist nicht so komplex sind, dass man sich da wirklich verliert, wenn Redundanzen mit anderen Selektoren da sind, dann hilft das auch nix.

    @Dirk:

    Ja ach, warum wohl nur? Weil es einfach Blödsinn ist, deshalb wohl. Aber trotzdem weiß er es natürlich besser

    Du doch aber genauso. Jeder scheint hier ein Besserwisser zu sein (ich nehme mich davon nicht aus). Lass ihm doch seinen Stil, seine Meinung, auch wenn er nicht mehrheitsfähig ist. Es tut doch niemandem weh, wenn jemand eine andere Art hat CSS zu schreiben.

  8. Ich weiß dagegen, wie man solche Leute nennt, was ich aber aus Höflichkeit jetzt nicht hier schreibe.

    Bleib mal locker -- it’s only CSS.

  9. Ich halte die Gruppierung ebenfalls für sehr, sehr sinnvoll.

    Bei mir kommen auch immer zuerst „layoutbestimmende“ Angaben wie float und position, dann so Sachen wie width, border, margin, padding — und danach der ganze Rest.

    Beim Absatz über die horizontale Anordnung des Codes musste ich allerdings auch mit dem Kopf schütteln. Wie man das favorisieren und dann auch noch verteidigen kann ist mir vollkommen unbegreiflich.

  10. Da hab ich ein paar Kommentare verpasst, muss ja auch noch anderenorts Inquisition üben.

    Ich fasse mal zusammen: was die Sortierung der Eigenschaften angeht, herrscht Uneinigkeit, die langen Zeilen werden mehrheitlich abgelehnt.

    @Eric Eggert macht ja den sehr richtigen Einwurf, das ja jeder seinen Code schreiben kann wie er will, nur im Repository muss er dann einheitlich landen. Das kann man machen, teilweise dürften dann aber ziemlich spektakuläre RegExe nötig sein, um das umzusetzen. Jedenfalls bei der Zeilensortierung. Alles aber machbar.

    @alle anderen: hört mal auf persönlich aufeinander loszudreschen, das mit der Inquisition ist ja auch sehr satirisch gemeint… (»Ha, die Geister die ich rief, was darf’s denn sein?«)

  11. So eine Überraschung. Es wird auf Andreas‘ Ein-Zeilen-CSS rumgehackt. Dachten wir uns vorher schon. Macht nichts.

    Tenor des Artikels ist, sich auf eine Schreibweise zu einigen. Ich war am Anfang auch dagegen, aber Andreas‘ Methode ist nicht mehr oder weniger übersichtlich als andere Methoden -- wenn man sich darauf einlässt.

    Und eine alphabetische Sortierung? Damit kann ich mich so gar nicht anfreunden. Hört sich so an, als sei das was für Leute, die auch CDs oder Bücher alphabetisch sortieren.
    Kann man machen. Ordnung ist gut, aber das ist mir -- rein persönlich -- zu bürokratisch.
    Ich sortiere auch nach „Wichtigkeit“, ähnlich wie Andreas.

  12. Übrigens gibt es noch einen anderen Grund, nicht alles in eine Zeile zu quetschen: „CSS minification“ ist nicht die Aufgabe des Programmierers, dafür gibt es Skripte :)

  13. Was die alphabetische Sortierung angeht, muss ich da erst höchste CSS-Inquisitions-Schützenhilfe herbeiholen?

    There are I don’t know how many ideas how to sort declarations within declaration blocks, but the simplest and “cognitively least demanding” is alphabetical sorting. So instead of thinking measurements first, then colors, then sizes, and so on, just order alphabetically[…]

    Schreibt schon Jens Meiert. Jens Meiert!

  14. Jens Meiert scheint aber auch alle Eigenschaften in eine Zeile zu werfen. Öhm.

  15. @Fred :)

  16. Ich teile hier mal kurz auf. Für Projekte mit ein paar Zeilen CSS-Code mag eine proprietäre Sortierlogik noch adäquat, wenn auch nicht sonderlich vorausschauend sein. Für große Projekte ist die alphabetische Sortier-Logik eine sehr sinnvolle. Das Alphabet ist die erste (und wichtigste) Sortier-Logik, die wir uns aneignen. Und sie ist (bis auf internationale Ausnahmen) universell. Hier kann man durch eine Konvention Pflegbarkeit gewährleisten, die ihresgleichen sucht. Priorität ist zu diskutabel, Spezifität zu komplex und nach Seitenbereichen zu sortieren ist oft nur inkonsistent durchzuhalten.

    Und wenn man sich darauf einlässt und sich die alphabetische Sortierung angewöhnt, ist das Schreiben nach kurzer Zeit ein Kinderspiel. Man verliert beim Schreiben keine Zeit mehr, sondern spart sie beim Lesen des Codes.

    Und die letzte Komponente ist, wie so vieles im Leben, eine Geschmacks- oder Glaubensfrage. Und darüber streiten wir alle ja am liebsten, oder?

  17. Der Meiert -- dessen Namen und Webseite ich heute zum ersten Mal gesehen habe -- ist aber nur in der HMTL und den WCAG WGs drin. NICHT in den CSS WGs. Ob der da nun DIE Autorität ist wage ich ja zu bezweifeln. Eric Meyer -- den ich da ja intuitiv als Autorität sehen würde -- scheint da mehrere Sachen zu kombinieren. Aber meine Meinung ist ja eh unwichtig. Wer bin ich denn schon, hier mitdiskutieren zu wollen. Ich bin nur ein unwürdiger kleiner Gläubiger, dessen CSS nie länger wurden als ein paar Zeilchen.

    Treat me with the soft cushion!

  18. Ich gebe zu: Eine alphabetische Sortierung ist klar der kleinste gemeinsame Nenner. Man muss sich dann nicht mehr darüber streiten, welchen Eigenschaften nun wichtiger sind als andere.

    Trotzdem: Alles eine Frage der Gewöhnung. Und was sich andere angewöhnt haben. Und wer dann in der Mehrheit ist bzw. lauter schreit.

  19. Ich kann auch nicht nachvollziehen, wie man mit der Ein-Zeilen-Schreibweise zurechtkommen soll. Hat schonmal jemand so eine Codewurst in der Sidebar der Webdeveloper Tollbar aufgehabt? Also mir wird dann immer ganz flau inder Magengegend … Aber es ist ein guter Trick, wenn man ein paar interessante Kniffe „verstecken“ will. Oder banale Fehlgriffe. ;)

    Ich find’s furchtbar. Es quetscht doch auch keiner seine anderen Codes in eine Zeile …

  20. @ Datenkind: Da haben wir es mal wieder. Du ladest Dein Stylesheet in die Sidebar und bevorzugst deshalb die mehrzeilige Schreibweise, ich arbeite mit 2 Bildschirmen und habe das Stylesheet auf dem Widescreen. Deshalb bevorzuge ich die einzeilige Schreibweise.

    Wir zwei können uns gar nicht einigen ;-) .

    Wichtig ist doch nur, dass die gesamte CSS-Datei in einem durchgängigen Stil geschrieben ist. So kompliziert ist doch CSS nicht, dass man die „Handschrift“ eines anderen nicht erfassen kann.

  21. Nunja, wie man sieht, kann man sich trefflich darüber streiten. ;)

    Der Hinweis, dass man sich auf eine Schreibweise einigen muss, ist tatsächlich sehr wichtig.

  22. Es geht auch um Performance. Ob der User Agent eine CSS-Datei mit 1.500 Zeilen oder mit 200 Zeilen interpretieren muss, ist schon ein Unterschied. Bei einer Seite mit 50.000 PI am Tag ist das ein Zeitfaktor sein. Und es geht beim Coden doch in erster Linie um Eleganz und Performance, um die Qualität des Endprodukts, und nicht um die Bequemlichkeit und die persönlichen Vorlieben des Programmierers. Da muss man sich, gerade im Team, auch mal ein wenig zurücknehmen.

    Ob man nun bei kleinen Projekten händisch alles blockweise oder zeilenweise schreibt, ist tatsächlich geschmacksabhängig.

    Auf der anderen Seite kann man das Stylesheet auch automatisiert formatieren lassen, ohne sich beim Coden darauf konzentrieren zu müssen, eine bestimmte Sortier-Logik einzuhalten.

2 Pings

  1. […] welcher Reihenfolge man CSS-Eigenschaften notieren soll, haben wir nun wohl genug diskutiert, kommen wir nun zu etwas völlig anderem: programmiertes […]

  2. […] Diskussionsrunden um die (nicht)-Formatierung von […]