Wer benutzt Nicole Sullivans objektorientiertes CSS-Framework?

Question

Edit: Aufgrund einer hervorragenden Kommentar von Kobi zu diesem StackOverflow Question zeigen, habe ich die Frage folgt geändert:

da jemand ausprobiert Nicole Sullivan Object-Oriented CSS Rahmen ist aus oder eines ihrer eigenen? Wenn ja, was waren die Vorteile/Nachteile?

Gibt es Produktionsstandorte, die das Framework Object-Oriented CSS verwenden?

Answer 1

In den meisten meiner Stylesheets verwende ich sowohl OOCSS als auch normales CSS. Ich denke nicht, dass es sinnvoll ist, OOCSS für das Styling von Typografie zu verwenden, aber für Dinge wie Spalten, Boxen und Schaltflächen denke ich, dass es Sinn macht und es wirklich (meiner Meinung nach) helfen kann, den Code einfacher zu machen.

Mit einem eher gekünstelt (und schrecklich - Klassen sollten Funktion beschreiben, bilden nicht) Beispiel:

Mit OOCSS

a.button {display: block; background-color: red;} 
a.border {border: 1px solid orange;} 

<a class="button border" href="#">My bordered button</a> 
<a class="button" href="#">My normal button</a> 

normalen CSS Mit

a.button_and_border {display: block; background-color: red; border: 1px solid orange;} 
a.button_no_border {display: block; background-color: red;} 

<a class="button_and_border" href="#">My bordered button</a> 
<a class="button_no_border" href="#">My normal button</a> 

Wie Sie sehen können, Im OO-Beispiel gibt es weniger CSS, was ich persönlich leichter zu lesen finde. Aber ich nehme an, am Ende des Tages, es ist alles auf persönlichen Vorlieben und Codierung Stil :)

Answer 2

Sie sollten nicht das Tag in der oocss, eine der Fallstricke, die sie präsentiert, so dass Sie die. Schaltfläche verwenden können auf jedem anderen Tag und dann erweitern Sie das neue Tag .. z.

<button class="button">works on this</button> 
<a class="button">works on this also</a> 
<input type="submit" class="button" value="and this too"/> 

in der CSS-Angabe a.button bedeutet, dass Sie es in der CSS wiederholen müssen wieder, wenn u es auf einem anderen Tag .. die Hauptsache ist, so verwenden möchten, dass Sie Ihre Stile wiederholen nicht und Vermeiden Sie Redundanz. sollten Sie ihre Beispiele auf GitHub herunterladen

Answer 3

Das OOCSS-Framework löst einige der Probleme nicht durch seine eigenen Prinzipien definiert. OOCSS enthält immer noch Redundanz und durch das Verschieben der Komposition von Komponenten in das DOM wird der Inhalt wieder in die Präsentation eingekoppelt.

OOCSS trifft einige gute Designentscheidungen, die Benutzer dazu ermutigen sollten, ihr CSS konsistent zu halten. Das ist eine gute Sache. Aber das Fehlen von Dokumentation bedeutet, dass Sie es zurückentwickeln müssen, sollte es nicht ganz Ihren Bedürfnissen entsprechen. Dieser Prozess wäre nicht zuverlässig, also könntest du wieder dort enden, wo du angefangen hast ... mit chaotischem CSS.

Answer 4

Ich benutze es und liebe es. Das College, an dem ich arbeite, verwendet umfangreiche Intranet-Webanwendungen, die ein von mir erstelltes Listenobjekt {} verwenden. Sie ordnet Links horizontal und vertikal an, verfügt jedoch über "erweiterte Klassen" (Skins), um sie in Überschriften, Menüs, Symbolleisten, Registerkarten, Akkordeons und Schaltflächengruppen umzuwandeln. Das List {} -Objekt enthält keine Farben oder Grenzen, nur ein Clearfix und einige Modifikatoren. Die tatsächliche Erscheinung wird in separaten Klassen gespeichert. Ich verwende auch Präprozessoren zu

Ich würde 3 Vorschläge machen, wenn Sie diesen Weg gehen.

1. Verwenden Sie B.E.M (block/element/modifier) ​​Benennungskonventionen

2. Denken Sie grundlegende Legosteine ​​und verwenden Sie Verwendungsklassen, um sie zu erweitern.

3. Verwenden Sie weniger oder SASS abzuscheiden das Aussehen