Erklärung

OOCSS steht für objektorientiertes CSS. Bei objektorientiertem CSS werden u.a. Struktur und Aussehen getrennt.

Um eine Infobox zu gestalten würde man in OOCSS beispielsweise nicht die Farbe der Box in der gleichen Klasse definieren wie die Breite und die Höhe. Stattdessen erstellt man zwei CSS-Klassen und kombiniert sie. Somit kann die Gestaltung auch auf andere Objekte angewendet werden. Elemente mit gleicher Struktur und abweichendem Look (z.B. Boxen für Erfolgs- oder Fehlermeldungen) können über weitere visuelle Klassen erzeugt werden.

Üblicherweise werden die Namen thematisch zusammengehöriger Klassen mit dem gleichen Präfix eingeleitet. Z.B. .box, .box-info, .box-error etc.

<section class="box box-info">
  <h3>Zur Info</h3>
  <p>Das ist ein Beispiel</p>
</section>

Ein weiterer wichtiger Bestandteil von OOCSS ist das bewusste Styling über CSS-Klassen. Um die Spezifität gering zu halten, wird wo möglich auf lange Selektoren oder IDs verzichtet.

Solche Selektoren solltet ihr in eurem Code daher nicht finden

#main-menu > ul li.item a { }

Stattdessen vergibt man den Links direkt Klassen und schreibt

.menu-link { }

Mit Hilfe von OOCSS ist möglich es Elemente wiederverwertbar zu machen und den Code schlank zu halten.


Diskussion zu dieser Frage

  1. Jarek
    schrieb am 22.12.2016 um 03:39 Uhr:

    Hat sich diese ansatzweise bewährt?

    Ich finde zu diesem Thema nur alte Beiträge bzw hört man nicht oft von diesem Ansatz.

    Hat sich vielleicht eine andere Herangehensweise durchgesetzt?

    • Jonas Hellwig
      schrieb am 22.12.2016 um 09:57 Uhr:

      Hallo Jarek,
      die Herangehensweise ist nach wie vor sehr aktuell. Bootstrap setzt beispielsweise auf dieses Konzept und wir nutzen es ebenfalls – wenn auch in leicht abgewandelter Form – bei fast allen Projekten. Alternativ sehe ich BEM noch recht häufig. Wir setzen aktuell ein großen Projekt auf Basis eines sehr modernen Frontend-Styleguides um, bei dem BEM eingesetzt wurde.

      • Jarek
        schrieb am 22.12.2016 um 23:32 Uhr:

        Vielen dank für das Feedback,
        in deinem Letzten Responsive Tutorial vom Reihnwerk-Verlag hast du weder was von OOCSS noch von BEM erwähnt, aber vielleicht sind diese neuen Ansätze zu diesem Zeitpunkt neu raus gekommen.

        Es scheint mir so als würden immer mehr Entwickler in die Richtung gehen ihren Code zu strukturieren.

        gibt es vielleicht noch andere dinge die man Wissen sollte um den Code übersichtlicher, konsistenter und effizienter zu schreiben, kannst du noch ein paar weitere Schlüsselwörter in diesem Zusammenhang erwähnen oder links anhängen?

  2. Jarek
    schrieb am 23.12.2016 um 04:10 Uhr:

    Korrektur: Ich sehe in einer deiner Tutorials „Modernes Webdesign mit Jonas Hellwig“ das du sehr wohl auf das Thema OOCSS ein gehst, sogar als Einführung zu SCSS Sass, genau das was ich suche.

Ihr Kommentar zu dieser Frage

Bei Fragen, Anregungen oder Kritik zu dieser Frage, nutzen Sie bitte das Kommentar-Formular.

Ihr Kommentar wird überprüft bevor er auf der Website erscheint. Nicht themenrelevante Beiträge werden gelöscht.

Mit diesen Kunden haben wir bereits erfolgreich zusammengearbeitet.