CSS-Spezifikation BEM CSS und OOCSS Beispielcode detaillierte Erklärung

Vorwort

Aufgrund der unterschiedlichen Codiergewohnheiten der einzelnen Personen ist der geschriebene CSS-Code während der Projektentwicklung nicht ausreichend strukturiert und es mangelt ihm an Übersichtlichkeit und Semantik. Jeder hat sicherlich schon einmal die Ideen von BEM CSS und OOCSS beim täglichen Coding verwendet, es fehlt jedoch an einem systematischen Verständnis und einer vollständig standardisierten Anwendung.

Einführung in BEM (Block, Element, Modifier) ​​​​CSS

BEM ist eine Namenskonvention für Frontends . Wie der Name schon sagt, wird die Seite in semantisch reichhaltige Blöcke aufgeteilt. Blöcke können verschachtelt werden, und Konnektoren werden verwendet, um die Beziehung zwischen Modulen und Elementstatus darzustellen, wodurch ein modularer, wiederverwendbarer, gut wartbarer und strukturierter CSS-Code generiert wird.

Namenskonvention

Verbinden Sie untergeordnete Blöcke oder Elemente mit doppelten Unterstrichen __ und Modifikatoren mit doppelten Bindestrichen --.

Wir können die HTML-Codestruktur vollständig durch CSS wiederherstellen

abschließend

Was ist die größte Schwierigkeit für Programmierer ==> Benennung. Bei der täglichen Entwicklung erleben wir auch, dass unsere eigenen Stile von anderen überschrieben werden. Die meisten Gründe dafür sind Namenskonflikte. BEM löst einfach dieses Problem. Wir brauchen nur einen Namen für den äußeren Stil, der aussagekräftig, unabhängig und eindeutig ist, und seine Nachkommen können Inhalte, Titel usw. sicher zum Verbinden verwenden. (Mama muss sich keine Sorgen mehr machen, dass ich nicht weiß, wie man etwas benennt)

Vorteile: klare Struktur und Semantik.

Nachteil: Bei tiefer Verschachtelung der HTML-Struktur wird der Klassenname länger.

Einführung in OOCSS (objektorientiertes CSS)

OOCSS ist keine vereinbarte Namenskonvention, sondern eine objektorientierte Idee. Wir alle sind mit objektorientiertem Denken vertraut. Es abstrahiert Module in Objekte. Sein Kern besteht darin, den ordentlichsten und saubersten CSS-Code auf einfachste Weise zu schreiben, wodurch der Code wiederverwendbarer, wartbarer und erweiterbarer wird.

Kernidee:

• Reduzieren Sie die Abhängigkeit von der HTML-Struktur
• Erhöhen Sie die Wiederverwendung von CSS-Klassen

grundsätzlich

Reduzieren Sie die Abhängigkeit von der HTML-Struktur

Wenn Sie Stile für <a> -Tags definieren möchten, könnte das CSS im Allgemeinen als .nav__main ul li a {} geschrieben werden. Ungeachtet der Leistungsprobleme verlässt sich dieser Ansatz zu sehr auf die Struktur der Element-Tags. Wenn sich die HTML-Struktur ändert, muss das CSS überarbeitet werden, was zu zusätzlichen Wartungskosten führt. OOCSS empfiehlt, dem a-Tag die Klasse .nav__main__item hinzuzufügen.

Erhöhen Sie die Verwendung von CSS-Klassenwiederholungen

Bevor wir OOCSS verwenden, könnten wir einen Stil wie diesen schreiben. Der Nachteil dabei ist, dass sich überall Code wiederholen kann, was die Wartung sehr mühsam macht.

Wir können ihre gemeinsamen Stile analysieren und abstrahieren und so einen wiederverwendbaren Schriftstil vorschlagen.

abschließend

Das Wichtigste an OOCSS ist, die „Objekt“-Komponenten der Projektseiten zu analysieren und zu abstrahieren und CSS-Regeln für diese Objekte zu erstellen, um sie zu verbessern. Unabhängig davon, ob Sie dann eine neue Seite im Projekt erstellen oder einem Modul Elemente hinzufügen, müssen Sie nur wenige oder sogar gar keine Stile neu schreiben.

Kombination von BEM und OOCSS

Wir entwickeln eine Komponente, die das Gewicht von Artikeln anzeigt. Der Code, den wir normalerweise schreiben, könnte so aussehen.

Es scheint in Ordnung zu sein, aber die Wartungsfähigkeit und Einfachheit sind sehr schlecht. Wenn wir BEM und OCCSS verwenden, können wir unseren Code in etwa Folgendes umwandeln.

Im Vergleich zur vorherigen Lösung ist die Benennung länger, stellt jedoch sicher, dass die CSS-Klassennamen nicht wiederholt werden, der Stil nicht von der HTML-Struktur abhängt und die Wiederverwendung von Klassen die Kernidee von BEM und OOCSS ist.

Zusammenfassen

BEM ist eine Namenskonvention, OOCSS ist das Designkonzept von CSS. Tatsächlich verwendet BEM auch das Konzept von OOCSS.

Mit der wachsenden Menge an CSS-Code wuchs auch die Größe des Entwicklungsteams. Im CSS-Entwicklungsteam ist ein einheitlicher und fester Standard für die Organisation und Verwaltung von CSS-Code erforderlich. Wenn es Mängel gibt, kann jeder diese gerne hinzufügen.

Damit ist dieser Artikel über die Beispielcodedetails der CSS-Spezifikationen BEM CSS und OOCSS abgeschlossen. Weitere relevante Inhalte zu den CSS-Spezifikationen BEM CSS und OOCSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!