Was bedeutet OOCSS?
Erklärung
OOCSS steht für objektorientiertes CSS. Bei objektorientiertem CSS werden u.a. Struktur und Aussehen getrennt. Ein populärer Vertreter dieses Ansatzes ist das CSS-Framework Bootstrap.
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.
Feedback & Ergänzungen – 4 Kommentare
Kommentar zu dieser Seite
Falls du es verpasst hast
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 →
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.
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?
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.
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?