Über CSS-Regeln-Regeln

23. September 2008

Zurzeit wird ja viel darüber geschrieben, wie man am besten seine CSS-Dateien organisiert. Ich habe dazu keine klare Meinung und glaube, dass das alles nicht sooo wichtig ist, wie man derzeit allenortens tut. Warum?

  1. CSS is no rocket science. Es gibt keine Hierarchien und nur wenig Abhängigkeiten. Flach und simpel.
  2. Firebug, CSS-Edit, xyle scope und andere Tools lassen jeden halbwegs gewitzten Entwickler sofort alles finden und ergänzen, auch in fremden Projekten.
  3. These: 95 Prozent der CSS-Statements besitzen weniger als 8 Eigenschafts-Zuweisungen. Wozu muss ich da Ordnung schaffen?

Ob ich nun alphabetisch schreibe:

#sidebox {
  background: #aaa url(img/backshadow.gif) 0 0 repeat-x;
  border: 1px solid #090;
  min-height: 200px;
  width: 300px;
}

oder ob ich es willkürlich schreibe:

#sidebox {
  width: 300px;
  min-height: 200px;
  background: #aaa url(img/backshadow.gif) 0 0 repeat-x;
  border: 1px solid #090;
}

… ist meines Erachtens völlig schnuppe! Die Reihenfolge innerhalb von Statements spielt keine Rolle, denn egal, wie man es macht: Es wird dadurch nicht übersichtlicher. Und sich jetzt die Mehrarbeit zu machen, nur um eine alphabetische Ordnung zu bekommen, ist für meine Begriffe sehr ineffektiv. Die einzige »Regel«, die ich beim Schreiben im Kopf habe: Zusammengehöriges sollte auch zusammen stehen. Es ist schon nett, wenn top und left untereinander stehen, oder natürlich width und height. Warum sollte man das auseinanderreißen? Nur damit alles seine teutonische Ordnung hat und man das Codeschreiben schön bürokratisieren kann?

Unabhängig davon: Dass man eine CSS-datei mit mehr als 200 Zeilen sinnvoll in einzelne Abschnitte gliedert, dürfte sich von selber verstehen. Dass man diese Abschnitte dann per genormten CSS-Doc-Kommentaren voneinander absetzt, klingt einleuchtend. Aber auch hier gilt: Gesunder Menschenverstand vor Regelwerk.

Denn man kann auch Probleme sehen, wo eigentlich gar keine sind.

(Übrigens: Eric hat ein CSSDoc-Bundle für Textmate gemacht. Cool.)

16 Kommentare

  1. Marcel am 23. September 2008 #

    Ja da hast du Recht. Alphabetische Ordnung ist eine nicht lohnenswerte Mehrarbeit. Aber CSS sollte zumindest größtenteils klar, logisch und offensichtlich strukturiert sein, um später schnell und effizient Fehler ausmerzen und Verbesserungen anwenden zu können. Viele scheitern allerdings leider schon daran.

  2. GE am 23. September 2008 #

    In Zeiten der Widescreens kann es Sinn machen, die CSS-Anweisungen ohne Zeilenumbrüche zu schreiben. Die meisten meiner CSS-Dateien passen so auf 1-2 Bildschirme.

    Um aber da den Überblick zu behalten muss man sich schon irgendeine Ordnung angewöhnen, damit keine Doppelungen vorkommen.

    Ohne Quatsch, ist mir schon passiert: Ich habe border einen Wert zugewiesen und nix passierte. Grund: weiter hinten in der Zeile stand ein »border: 0;«.

    Ich finde allerdings eine thematische Gruppierung auch sinnvoller als eine alphabetische. Da ich Einzelkämpfer bin ist es mir auch relativ schnuppe, wie andere mit meinen CSS-Dateien zurechtkommen ;-) .

  3. steve am 23. September 2008 #

    genau … ich organisiere die Regeln nach Aufbau, also zuerst allgemeines Aussehen/Verhalten (background, color, margin, padding), dann position, font etc. eifnach das alles zusammengehörige zusammen ist. einfach logisch und einfach zum lesen. :-)

  4. macx am 23. September 2008 #

    Jede Arbeit, egal ob die Ebenen in Photoshop, die HTML-Elemente im Quelltext, die CSS-Anweisungen oder die PHP-Funktionen und -Klassen sollten immer strukturiert sein. Und zwar in der Form, dass andere (im Team) jederzeit damit arbeiten können. In welch einer Form das dann statt findet ist im Prinzip egal.
    Für jedes große Projekt empfehle ich obendrauf Coding Guidelines. Aber auch hier gilt: Die können pro Agentur/Firma/Webschmiede unterschiedlich sein, sollten in sich aber stimmig und einheitlich sein.
    Hauptsache ist: Sauber arbeiten! Das machen leider die wenigsten (freiwillig).

  5. Chris am 23. September 2008 #

    Viele der »CSS-Regeln« oder best-practices sind meiner Meinung nach einfach ein Versuch des entsprechenden Autor, sein CSS-Blog Nr. 4712 zu differenzieren. Das ist ein bisschen so wie GTD und andere Hype-Themen, die durch Bloggersdorf getrieben werden.

    Brain 1.0 hilft, wie Gerrrit schreibt, meist weiter.

  6. Karsten am 23. September 2008 #

    Das entspricht exakt meiner Meinung, wie ja auch schon aus meinem Kommentar bei Peter hervorgeht.

    Aber CSS is no rocket science trifft es eigentlich genau…quasi prägnant.

  7. Fabian am 23. September 2008 #

    …und was letztendlich aus der ganzen Diskussion hervor geht, ist genau das was vorher auch schon da war. Jeder machts so wie er es für richtig hält und sich angeeignet hat. Arbeitet man in einem Team sollte es kein Problem sein einen Konsens zu finden ohne sich sinnlos die Köpfe einzuhauen.

    Danke Gerrit für diesen Beitrag!

  8. Dan Arkway am 23. September 2008 #

    Overkill und Nullthema. Firebug und @import url() können vermutlich meist helfen. Wenn man oft mehr als 20kb große Dateien hat, macht man evtl. zu viel CSS oder verlässt sich auf zu viele Frameworktools und blickt vermutlich selber eh nur noch mit Firebug durch.

    Wer will/muss oder es gerne kompliziert mag, entwickelt sich nach sinnvollen Vorgaben eine persönliche Rangfolgenliste und sortiert mit einem Tool entsprechend nach dieser. Der Rest kommt dann ans Ende oder man muss seine Liste erweitern.

  9. Benny am 23. September 2008 #

    volle Zustimmung.
    Ich lese ja in Peters Blog fast jeden Eintrag, aber die regelmäßigen ›so kann / sollte / mache ich CSS-Formatierung‹ übergehe ich immer.

  10. Arne am 23. September 2008 #

    An mir ist diese Diskussion zum Glück bisher vorbeigezogen.
    Ich denke schon, dass eine Aufteilung sinnvoll ist, gerade wenn die CSS-Dateien größer werden. Dann kann man sich auch ohne Firebug und Co darin zurecht finden.
    Wichtig ist nur, dass man einen Stil findet und den konsequent umsetzt!
    Und, das hat Gerrit natürlich auch vollkommen Recht, Verstand vor Regelwerk! So sieht es bei Programmiersprachen ja auch aus: Es ist zwar empfehlenswert, sich an die Konventionen zu halten, man muss es aber nicht, wenn man dafür seinen eigenen Stil durchgehend umsetzt. Was alle mal sinnvoller ist, als sich dogmatisch an Vorgaben zu klammern …

  11. Jann am 23. September 2008 #

    Persönlich orientiere ich mich seit Jahren bei der Struktur meiner CSS-Dateien immer an dem Aufbau des »Box-Models«. D.h. von Innen nach Außen gesehen: margin, border, padding etc…

    Irgendwo hatte ich mal gelesen, dass dadurch der CSS-Code vom Browser schneller interpretiert werden kann.

  12. Sven am 24. September 2008 #

    Danke dafür, Gerrit!
    Meiner Meinung nach steht die ganze Diskussion der um die GTD-Thematik sehr nahe. Man kann es auch übertreiben!

  13. Sebastian am 24. September 2008 #

    Oder man schreibt gleich gar kein echtes CSS mehr sondern benutzt so clevere Dinge wie CleverCSS .

  14. Eric Eggert am 24. September 2008 #

    Sebastian: Das ist nicht wirklich Clever, weil es auf Einrückungen angewiesen ist. Sobald du irgendwo ein kleines Fehlerchen hast ist dein layout kaputt, weil er dir das CSS falsch parst. Das sind ja die Vorteile von den abgeschlossenen CSS-Angaben, sie sind nicht voneinander abhängig.

    Man muss schon eine ganz besondere Aversion gegen geschweifte Klammern haben um das gut zu finden.

  15. Harald am 24. September 2008 #

    Ich wollte gerade feststellen, dass es jetzt an der Zeit ist, ein CSS-Sortierprogramm zu fordern, da gibt es das schon :-) Obwohl – so clever finde ich das CleverCSS auch nicht. Einrückungen sind mir egal, wers mag. Aber komplexe CSS-Datei muss ich so bearbeiten können wie sie mir mit Firebug angezeigt werden.

    Ne, und sortieren tu ich das CSS so wie ich das will. Wichtig sind vernüftige Klassen- und ID-Namen und nicht für jedes Unterelement ein eigenes Statement, dann klappt das schon im Team.

    Insgesamt scheint mir diese Diskussion aber mehr so eine Art Webstandards-Sommerloch zu sein- bis der neue IE kommt.

  16. Martin am 25. September 2008 #

    Die meisten Entwickler werden sich ein eigenes Schema entwickeln. Thematische Ordnung ist schon sinnvoll, und von oben nach unten (header, content, footer) und vielleicht noch mit Einrückungen, aber alles weitere ergibt sich.
    Ich habe mir mal ein Standard-CSS-Template mit wichtigen Deklarationen gemacht, dieses nehme ich bei neuen Webprojekten immer als Grundlage.

Kommentar schreiben

Textile zur Textstrukturierung. Werbliche und SEO-Links werden gelöscht.

Kommentarfeed

Zusatzinfos

Aktuelle Artikel