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.

Feedback und Ergänzungen – 4 Kommentare

  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.

Kommentar zu dieser Seite

Ihr habt Anregungen, Ergänzungen, einen Fehler gefunden oder dieser Inhalt ist nicht mehr aktuell? Dann freuen wir uns über einen Kommentar. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: