Thomas Maier | Magento & WordPress Develover post@webzunft.de | +49 162 9313 708

Antworten auf die Fragen – nicht nur meiner Kunden 

RSS
Home Meine CSS-Standards

Meine CSS-Standards

Standards sind immer so ein Ding. Viele Projekte geben welche vor, einige Entwickler haben sich auf bestimmte festgelegt und andere, so wie ich, suchen noch. Mit dem Start dieser Seite habe ich mich entschlossen, die mir in der Praxis als sinnvoll begegneten Standards beim Schreiben von CSS zusammenzuschreiben und als eigene Referenz zu benutzen. Vielleicht helfen sie auch dem ein oder anderen sich für einen der vielen Wege zu entscheiden.

Struktur

  • versuche, so viele CSS Dateien in einer zu kombinieren und verwende niemals (@import)
  • Reset-Befehle stehen ganz am Anfang der Datei
  • Trenne Hauptbereiche ab und markiere sie mit auffälligen, eindeutigen Hinweisen (z.B. Header, Footer, Content, Sidebar, nach Modulen); daraus ergibt sich auch, CSS Angaben zu gruppieren

Umbrüche

  • Einrückungen mit Hilfe von Tabs
  • mehrere Selektoren mit einerfachem Umbruch trennen (z.B. .footer, .header {})
  • Klammern einer Anweisung auf der Linie mit dem Selektor Block beginnen
  • Klammern einer Anweisung in einer eigenen Linie beenden
  • eine Leerzeile zwischen Anweisungen

Selektoren

  • Selektoren sollten so lang wie nötig und so kurz wie möglich sein (.footer statt div.footer)
  • Benennungen sollen kurz, jedoch verständlich sein und das Element beschreiben, das sie stylen
  • keine Angaben zur Positionierung, sondern sinnvolle, funktionale Angaben bei der Beschreibung nutzen, vgl. diesen semantischen Ansatz
  • konsequente Kleinschreibung von durch Minus getrennter Wörter (z.B. #sidebar-main statt #sidebarMain oder #SidebarMain)
  • für WordPress: Selektoren, die zu Plugins oder eigenen Funktionen gehören, sollten einen immer gleichen, das Plugin identifizierenden Prefix (ggf. aus den Anfangsbuchstaben) haben, z.B. #wg-shortcode-header; es versteht sich von selbst, dass zu einem Plugin gehörende Stylesheets zueinander gruppiert werden

class oder id?

hier gibt es keine feste Regel, aber class ist generell flexibler, id spezifischer und eindeutiger. Grundsätzlich sollte id sparsamer und nur bei wirklich eindeutigen Bereichen verwendet werden. Als Gedankenstütze: würde man einen Nutzer, z.B. durch einen Anker, an diese Stelle führen wollen?

Eigenschaften und Werte

für beide

  • doppelte statt einfacher Anführungszeichen benutzen (z.B. bei Attributen oder content-Eigenschaft)

Eigenschaften

  • so viele wie nötig, so wenig wie möglich verwenden
  • Eigenschaften werden immer klein geschrieben (bis auf wenige zwingende Ausnahmen wie Schriftarten)
  • Farben möglichst als gekürzte, hex-Werte in Kleinschreibung angeben (z.B. #fff); rgba()-Angaben sind erlaubt, wenn opacity gewünscht ist
  • CSS-Shorthand verwenden (.box {margin: 10px 20px} anstelle von .box {margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; })
  • Eigenschaften sind wie folgt zu sortieren: display, position (inkl. z-index), box-model (margin, border, padding, width, height), color + fonts, andere

Werte

  • Kleinschreibung
  • Komma nach dem Doppelpunkt der Eigenschaft; Abschluss mit einem Semikolon
  • keine Leerzeichen vor oder nach Klammern
  • keine Einheiten hinter 0 -Werten, außer dort, wo unbedingt notwendig (transition-duration)
  • line-height sollte nach Möglichkeit keine Einheit folgen (weil es nur dann dynamisch auf die aktuelle Höhe verwendet wird)
  • offen: eine 0 vor Dezimalzahlen verwenden, wenn diese kleiner als 1 sind

weitere Ressourcen

Eine der besten Übersichten an CSS Selektoren mit Beispielen die ich bisher gefunden habe.

http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048

andere Referencen

Eigentlich für WordPress-Core Entwicklung gedacht, häufig aber auch in WordPress Plugins zu finden und daher sind auch in meinen Stil viele Elemente und Regeln von hier eingeflossen.

http://make.wordpress.org/core/handbook/coding-standards/css/