Wie definiere ich „Objekt“ in OOCSS?
Objekte ähneln Klassen in JAVA und behalten OO-Eigenschaften bei.
Ein CSS-Objekt besteht aus 4 Teilen:
Kann der HTML-Code eines oder mehrerer DOM-Knoten sein
CSS-Stildeklaration, beginnend mit dem Klassennamen des Wrapper-Knotens
Ähnlich wie Hintergrundbilder und Sprites-Komponenten zur Anzeige und
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 Bestandteil einer Wrapper-Klasse sein kann. Zum Beispiel:
<div class="mod">
<div class="inner">
<div class="hd">Blockkopf</div>
<div class="bd">Blockkörper</div>
<div class="ft">Blockfuß</div>
</div>
</div>
Das Objekt ist ein Modul mit der Klasse mod. Enthält 4 Komponentenknoten (kann 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:
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 dieser vom Browser wiederverwendet oder zwischengespeichert wird.
Weniger Neuzeichnungen und Layoutberechnungen für den Browser
Je mehr CSS-Regeln auf einer einzelnen Seite wiederverwendet werden, desto weniger Berechnungszeit 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 Leistungsvorteil, wenn Sie ein Objekt auf derselben Seite (oder auf derselben Site, beide gut zwischengespeichert) wiederverwenden. Die Verwendung einer ID zum Schreiben von Stilen kann nur einmal auf derselben Seite verwendet werden. @cgriego (Twitter) Ich habe es mit Singletons verglichen und finde 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