Häufig gestellte Fragen zu objektorientiertem CSS

Originaltext: http://wiki.github.com/stubbornella/oocss/faq (Version 28, wenn übersetzt)
Übersetzung: Ytzong

Wie definiere ich „Objekt“ in OOCSS?

Objekte ähneln Klassen in JAVA und behalten OO-Eigenschaften bei.

Ein CSS-Objekt besteht aus 4 Teilen:

1. Kann der HTML-Code eines oder mehrerer DOM-Knoten sein
2. CSS-Stildeklaration, beginnend mit dem Klassennamen des Wrapper-Knotens
3. Ähnlich wie Hintergrundbilder und Sprites-Komponenten zur Anzeige und
4. JavaScript-Verhalten, Listener oder Methode, die einem Objekt zugeordnet sind

Dies kann verwirrend sein, da jede CSS-Klasse nicht unbedingt ein eigenes Objekt ist, sondern eine Komponente einer Wrapper-Klasse sein kann. Zum Beispiel:

Das Objekt ist ein Modul mit der Klasse mod. Beinhaltet 4 Komponentenknoten (können nicht unabhängig vom Modul sein, einschließlich 2 Blöcken, Innen und Körper, und zwei optionalen Blöcken, Kopf und Fuß)

Wie verbessert OOCSS die Leistung?

OOCSS bietet doppelte Leistungsvorteile:

1. Hochgradig wiederverwendbarer CSS-Code, der sehr wenig CSS-Code erfordert, was bedeutet:
   • Kleinere Dateien, was zu schnelleren Übertragungen führt
   • Da der Anteil des in Website-Seiten aufgerufenen CSS-Codes zunimmt, wird erwartet, dass er vom Browser wiederverwendet oder zwischengespeichert wird.
2. Weniger Neuzeichnungen und Layoutberechnungen für den Browser
   • Je mehr CSS-Regeln auf einer einzelnen Seite wiederverwendet werden, desto weniger Zeit verbringt die Rendering-Engine mit „berechneten Werten“.
   • Manuell hinzugefügte „erweiternde“ Klassen überschreiben weniger Regeln, was wiederum bedeutet, dass die Engine weniger tut, um die Regeln anzuwenden

Möchten Sie ID zum Gestalten des Inhalts verwenden?

Dies ist ein „Werbegeschenk“ für die Leistung, wenn Sie ein Objekt auf derselben Seite (oder auf derselben Site, während es gut zwischengespeichert wird) wiederverwenden. Die Verwendung einer ID zum Schreiben von Stilen kann nur einmal auf derselben Seite verwendet werden. @cgriego (twitter) Im Vergleich zu Singletons finde ich es sehr genau. Es kann Situationen geben, in denen Sie IDs zum Definieren von Stilen verwenden möchten, z. B. für sehr spezifische Header-Menüs. In diesem Fall können Sie IDs verwenden, um spezielle Elemente zu sandboxen und sicherzustellen, dass der Code hier keine Auswirkungen auf andere Teile der Site hat. Denken Sie zweimal darüber nach, bevor Sie sich für ID anstelle von Klasse entscheiden. Wenn Ihre Website wächst, ist es wirklich schwer vorherzusagen, was andere Leute mit dem aus Ihrem CSS erstellten HTML machen werden. Wenn Sie die Wahl haben, sollten Sie die Skalierbarkeit so weit wie möglich berücksichtigen.

Ich denke darüber nach, die IDs aus den Vorlagen Kopf, Körper und Fuß zu entfernen. Manche Menschen haben möglicherweise mehrere Wohngebiete. Mehrere Kopf- und Fußzeilen für eine Website sind schwerer zu erraten, aber ich wette, es gibt Designer, die das glauben, sodass die IDs wahrscheinlich verschwinden (nicht so glatt, lesen Sie den Originalartikel: Jemand könnte mehrere Hauptinhaltsbereiche haben. Mehrere Kopf- und Fußzeilen von Websites sind schwieriger vorstellbar, aber ich wette, es gibt einen Designer, der sich so etwas ausdenken kann, daher ist es sehr wahrscheinlich, dass die IDs verschwinden.).

Andererseits eignen sich ID-Hooks hervorragend zum Verlinken. Fügen Sie sie in HTML ein, aber verwenden Sie sie nicht zum Schreiben von Stilen.

Quelle: 99css