Modulare CSS-Lösung

Es gibt wahrscheinlich ebenso viele modulare Lösungen für CSS wie für JS. Hier finden Sie eine kurze Einführung in einige wichtige modulare Lösungen.

ooooh

Es gibt zwei Hauptprinzipien für objektorientierte Regeln: Trennung von Struktur und Erscheinungsbild sowie Trennung von Container und Inhalt.

Glossar

• Trennen Sie Struktur und Erscheinungsbild: Fügen Sie wiederholbare Designeinheiten hinzu und fördern Sie diesbezüglich das Produkt- und UI-Denken, wie beispielsweise die Benennungs- und Modularisierungsregeln von Objektmustern bei der Verwendung des folgenden CSS.
• Trennung von Containern und Inhalten: Das bedeutet, dass die Verwendung von Styles nicht eindeutig auf Elementpositionen abgestimmt ist. Sie können diesen Style an jeder beliebigen Position verwenden. Wenn Sie diesen Style nicht anwenden, bleibt der Standard-Style erhalten.

Beispiele

// DOM-Struktur <div class="toogle simple">
  <div Klasse="Toogle-Steuerung öffnen">
    <div class="toogle-tittle">Titel</div>
  </div>
  <div Klasse = "toogle-details"></div>
</div>

// Eindeutige Kennung des Moduls.toggle{
}
// So schreiben Sie Skin-Stile. Wenn die Grundstruktur gleich ist, können Sie einen Hilfsstil von complex.toggle.simple{ verwenden.
}
// Ob verschachteltes Schreiben erfolgen soll. Ich glaube, dass viele Teile des Präprozessors Verschachtelung unterstützen und viele Leute so schreiben werden, was nicht empfohlen wird. toogle{
 .toogle-Steuerung{
 }
 .toogle-details{
 }
}
// Würden Sie es tatsächlich so organisieren? Es wird nicht empfohlen. Dies verringert die Abfrageeffizienz. Wenn Sie die Eindeutigkeit bestätigen können, können Sie einfach das Unterverzeichnis .toogle{} schreiben.
.toogle-control{}
.toogle-details{}

schmatz

SMA und OOCSS weisen viele Gemeinsamkeiten auf, es gibt jedoch auch viele Unterschiede, hauptsächlich in der Klassifizierung der Stile. Dies sind: Basis, Layout, Modul, Status, Thema

Base

Kann überall angewendet werden, ich nenne es auch globalen Stil

Layout

Es wird hauptsächlich verwendet, um verschiedene charakteristische Layouts zu realisieren und die Wiederverwendungsrate von Layouts zu verbessern.

Module

Modularität im Design, eine wiederverwendbare Einheit, ist im Allgemeinen eine gekoppelte Bindung von DOM+CSS.

Zustand

Beschreiben Sie die spezielle Leistung des Layouts oder Moduls in einem bestimmten Zustand. Hier möchte ich „CSS Zen Garden“ empfehlen. Wenn die DOM-Struktur unverändert bleibt, kann der Stil durch CSS-Skinning geändert werden.

Thema

Im Vergleich zum Status ist es individueller. Wir werden das Thema für einige spezielle Module festlegen, einschließlich einer Reihe von Farben, Größen, Interaktionen usw. für umfangreiches Design und parametrisches Design.

Fall

// DOM-Struktur <div class="toogle toogle-simple">
  <div Klasse="Toogle-Control ist aktiv">
    <div class="toogle-tittle">Titel</div>
  </div>
  <div Klasse = "toogle-details"></div>
</div>

Im Vergleich zu oocss sind die meisten Designideen gleich, wobei eine Klasse als Umfang von CSS verwendet wird (Umfang bedeutet zwei Einschränkungen: 1. Die Verwendung ist verboten, wenn sie nicht dem Szenario entspricht; 2. Sie muss korrekt verwendet werden, wenn sie dem Szenario entspricht). Der andere Unterschied sind die unterschiedlichen Schreibregeln für Skins und Zustände.

bem

bem besteht darin, Stile unter Berücksichtigung von Blöcken, Elementen und Modifikatoren zu schreiben. Es handelt sich dabei nicht um eine bestimmte CSS-Struktur, sondern nur um Vorschläge zur Benennung Ihres CSS.

Fall

// DOM-Struktur <div class="toogle toogle--simple">
  <div Klasse="toogle_control toogle_control--aktiv">
    <div class="toogle_tittle">Titel</div>
  </div>
  <div Klasse = "toogle_details"></div>
</div>

erklären

• Blockebene: der Name der Komponente
• Element: Der Name des Elements in der Komponente
• Modifikator: Jede Klasse, die mit der Elementmodifizierung zusammenhängt

Der Nachteil dieser Benennungsmethode besteht darin, dass der Stilname sehr lang wird, aber tatsächlich wird sie bis zu einem gewissen Grad in Smacss und Oocss verwendet. Die Benennung ist sehr semantisch. Wenn das Modul nicht klar ist, können wir anhand des Stilnamens ableiten, was die entsprechende Struktur sein könnte.

Wählen Sie die richtige Lösung

Egal für welche Lösung man sich entscheidet, entscheidend ist, welche für das Team am besten geeignet ist. Unser aktueller Ansatz ist eine Kombination aus bem und smacss.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.