my_frontend_styleguide.md

Frontend Coding Styleguide

SASS/Compass Style

• drei Verschachtelungsebenen sollten nicht überschritten werden
• Selektoren sollen so wenig Abhängigkeiten wie möglich erzeugen, aber so spezifisch wie nötig sein.
• Verschachtelte IDs sind i.d.R. keine gute Idee.
• Compass geht vor SASS. Vendor-Prefixe (-moz, -webkit) sollten damit nur in begründeten Ausnahmefällen nötig sein
• Properties werden gruppiert/sortiert
  1. Position
  2. Box (width, display, float)
  3. Background
  4. Text (Font)
  5. Andere

Module

• Funktionale Elemente werden zu einen Modul zusammengefasst
• Code wird in _modulname.sass, _modulname.js.coffee abgelegt
• in den Templates findet sich eine entsprechende ID oder Klasse
• Konditionale Regeln via Kontext sollen vermieden werden. Ausprägungen von Modulen sollten stattdessen per Subklasse (SMACCS) erstellt werden
• Child-Selektoren > eignen sich gut, um die Inhalte eines Moduls zu spezifizieren

SMACCS

SMACCS steht für "Scaleable and Modular Architecture for CSS" und ist eine Sammlung von Patterns und Best Practices für den Umgang mit CSS. Grundlegende Prinzipien sind:

• Kategorisierung von CSS-Regeln in:
  • Base
  • Layout
  • Module
  • Status

Ordnerstruktur und Dateiorganisation

• Alle Dateinamen (ausser README, o.ä.) sind lowercase
• _underscore-Präfixe kennzeichnen partials/includes. (SASS ingnoriert diese Dateien beim Parsen)
• under_score case für Komposita etc.

Klassen, IDs, andere Selektoren

• Elementselektoren dürfen nicht allein auf erster Ebene stehen, sie dürfen nur im Kontext einer Klasse, ID o.ä. verwendet werden. Ausnahme: base.sass, elements.sass o.ä.

Variablen

• Mehrfach verwendete Values wie Farben, Größen und Fontdefinitionen sollten als $value angelegt und wiederverwendet werden
• Es macht Sinn, globale Basiswerte zu verwenden und diese dann Abzuwandeln, z.B. $base-gap/2 oder lighten($spot-color) Dadurch sollte die Anzahl der globalen Variablen klein gehalten werden
• Es spricht nichts dagegen, lokale Variablen im Scope eines Moduls einzusetzen. SASS kann das, die Variablen sind nur innerhalb eines Moduls gültig.

Mixins

• Mixins helfen, Codeduplikate im SASS zu vermeiden. Im generierten CSS werden diese Inhalte aber wiederum dupliziert
• Regel: Bei Mixins ohne Parameter oder Kalkulation, also reinen CSS-Snippets, als Extendable anlegen bzw. prüfen

Extendables

• @extend 'sammelt' CSS-Regeln und kann den CSS-Output signifikant reduzieren
• @extend mit Vorsicht und Aufmerksamkeit einsetzen. Der Nutzen kann sehr groß sein, das Kaputtmach-Potential ist es aber auch – man sieht einer CSS-Regel nicht an, ob Sie extended wurde
• Bitte nur die neuen (ab Sass 3.2) %placeholder-Selektoren als Basis verwenden
• Extendables niemals modulübergreifend oder ausserhalb der entsprechend gekennzeichneten Datei(en) (z.B. /_extendables/* ) verwenden