Fapulous Framework

Die Code-Schreibweise im fapulous Framework folgt einigen Regeln, die leichte Wartbarkeit, schnelle Eingaben und bessere Fehleranalyse ermöglichen sollen.

Einrückungen

Die Einrückung des Codes erfolgt durch 2 Leerzeichen; es werden keine Tab-Zeichen verwendet.

CSS-Klassen- und ID-Namen

CSS-IDs beginnen mit einem großen, Klassennamen mit einem kleinen Buchstaben. Das erleichtert die Unterscheidung zwischen Klassen und IDs außerhalb von CSS-Dateien (etwa in Skriptsprachen) und führt bei konsequenter Einhaltung zu weniger Fehlern.

Zusammengesetzt Wörter werden in der CamelCase-Schreibweise definiert. Etwa:

.sidebarBox oder #MainContent

Der Grund, weshalb CamelCase gegenüber Trennungstrichen bevorzugt werden ist, dass sich so zusammengesetzte Wörter unter jedem System und Editor mit einem Doppelklick markieren lassen (was bei Wörtern mit Unter- oder Trennungsstrichen nicht immer der Fall ist).

Single-Line-Schreibweise, Leerzeichen und Interpunktion

CSS-Anweisungen sind in der Single-Line-Schreibweise geschrieben, was bei größeren Monitoren eine bessere Platznutzung, sowie ein leichteres Erkennen der DOM-Struktur des formatierten Markups ermöglicht.

Nach jeder Anweisung folgt ein Semikolon, also auch nach der letzten Anweisung. Dies ist zwar aus syntaktischen Gründen nicht notwendig, hat sich aber bei der Projektarbeit als wirksam erwiesen, da bekanntermaßen Anweisungen oft umkopiert werden und so immer das Semikolon unabhängig von der Anweisungsposition mitgenommen werden kann.

Zur schnelleren Markierbarkeit wird nach jedem Semikolon, Doppelpunkt und Klammer ein Leerzeichen gesetzt. Beispiel:

h3 { margin: 0 0 10px; } statt h3{margin:0 0 10px;}

Abstände

Die Regel ist: Alle Abstände gehen nach unten. Das heisst, es wird vermieden, dass die Abstände eines Elemnts nach oben oder nach oben und unten gehen. Also anstatt

p { margin: 5px 0 5px 0; } oder p { margin: 10px 0 0 0; }

wird

p { margin: 0 0 10px 0; }

geschrieben. Erfahrungsgemäß erleichtert es die Fehlersuche bei komplexeren Konstrukten, wenn man weiß, dass Abstände meist nach unten gesetzt sind. Natürlich gibt es auch berechtigte Ausnahmen von dieser Regel.

Klassen- und ID-Namen in HTML-Kommentaren der schließenden Elemente

Nach schließenden, semantiklosen Elementen werden die entsprechenden Klassen- oder ID-Namen der Elemente in HTML-Kommentaren aufgeführt. Zweck ist die Lesbarkeit des Codes zu erhöhen. Beispiel:

<div id="Header">
  <div class="corset">
    <div class="fapline">
      <div class="fapcol fap-00-66" id="SiteTitle">
        <div class="macroPadder">
          ...
        </div> <!-- /macroPadder -->
      </div> <!-- /fapcol, fap-00-66, SideTitle -->
      <div class="fapcol fap-66-33" id="Logo">
        <div class="macroPadder">
          ...
        </div> <!-- /macroPadder -->
      </div> <!-- /fapcol, fap-66-33, Logo -->
    </div> <!-- /fapline -->
  </div> <!-- /corset -->
</div> <!-- /Header -->