icon-arrow-lefticon-arrow

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.


Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir sind nicht auf eine Branche festgelegt und arbeiten u.a. mit folgenden Unternehmen erfolgreich zusammen:

ovh-logoaws-logo