Veit Schiele Communications

Veit Schiele Communications

CSS-Coding-Style

erstellt von Veit Schielezuletzt verändert: 19.03.2017 16:33 © Veit Schiele Communications GmbH, 2013–2017
  • Einrückungen mit 4 Leerzeichen, z.B. in der ~/.vimrc:

    " Changes all tabs in spaces
    set expandtab
    " Number of spaces for each Tab
    set shiftwidth=4
    set tabstop=4
    " Tabs are always 'tabstop' positions
    set softtabstop=4
    
  • Leerzeichen nach : in Deklarationen

  • Leerzeichen vor {

  • Hexadezimale Farbangaben, z.B.:

    // Jumbotrons base class
    .jumbotron {
        border-bottom: 1px solid #ddd;
        color: #fff;
        text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
        background: linear-gradient(45deg, #020031 0%,#6d3353 100%);
    }
    
  • Kommentare mit //, z.B.:

    //
    // Scaffolding
    // --------------------------------------------------
    
    
    // Images
    // -------------------------
    
    // Rounded corners
    .img-rounded {
      .border-radius(6px);
    }
    
  • Dokumentation mit KSS

Maßangaben

font-size
sollte px verwendet werden da es deutlich mehr Kontrolle über die Erscheinung des Texts bietet.
line-height
kann ohne Maßangabe verwendet werden da die Zeilenhöhe direkt auf font-size basiert.

Namenskonventionen

js--Präfix
sollten nie in CSS-Klassen verwendet werden sondern nur von Javascript- Dateien
is--Pröfix
soll für Elemente verwendet werden, die sowohl von CSS- als auch von Javascript-Dateien verwendet werden

Spezifität (Klassen vs. IDs)

Elemente, die genau einmal innerhalb einer Seite vorkommen, erhalten IDs, alle anderen erhalten Klassen.

Gute Kandidaten für IDs sind header, footer und modal-popup.

Schlechte Kandidaten für IDs sind navigation, listing, article

Zum Auszeichnen eines Elements seien Sie so unspezifisch wie möglich.