Schreiben Sie CSS logischer

OOCSS und BEM

Wir empfehlen die Verwendung einer Kombination von OOCSS und BEM aus folgenden Gründen:

• Dies kann uns helfen, die Unterschiede zwischen CSS zu klären und HTML Klare und strenge Beziehungen.

• kann uns dabei helfen, wiederverwendbare und einfach zu montierende Komponenten zu erstellen.

• kann die Verschachtelung und die Spezifität verringern.

• kann uns bei der Erstellung erweiterbarer Stylesheets helfen.

OOCSS, auch bekannt als „Object Oriented CSS“, ist eine Methode zum Schreiben von CSS. Die Idee besteht darin, Sie zur Verwendung von Stylesheets zu ermutigen eine Sammlung von „Objekten“: Erstellen Sie wiederverwendbare, wiederholbare Codeteile, die Sie auf Ihrer Website mehrfach verwenden können.

Referenz:

• Nicole Sullivans OOCSS-Wiki

• Smashing Magazine's Einführung in OOCSS

BEM oder „Block-Element-Modifier“ ist eine Namenskonvention für HTML- und CSS-Klassennamen. BEM wurde ursprünglich von Yandex vorgeschlagen, da sie wussten, dass sie über eine riesige Codebasis und Skalierbarkeit verfügen. BEM wurde dafür geboren und kann als eine Reihe von Referenzleitfadenspezifikationen dienen, die OOCSS entsprechen.

• CSS Trick’s BEM 101

• Harry Roberts‘ Einführung in BEM

Beispiel

<article class="listing-card listing-card--featured">

  <h1 class="listing-card__title">Adorable 2BR in the sunny Mission</h1>

  <p class="listing-card__content">
    <p>Vestibulum id ligula porta felis euismod semper.</p>
  </p>

</article>

.listing-card { }
.listing-card--featured { }
.listing-card__title { }
.listing-card__content { }

• .listing-card ist ein Block, der eine Komponente auf hoher Ebene darstellt.

• .listing-card__title ist ein Element, das Teil von .listing-card ist, sodass der Block aus Elementen besteht.

• .listing-card--featured ist ein Modifikator, der angibt, dass dieser Block einen anderen Status oder eine andere Änderung als .listing-card hat.

OOCSS und BEM

Wir empfehlen die Verwendung einer Kombination aus OOCSS und BEM aus folgenden Gründen:

• kann uns helfen, die klare und strenge Beziehung zwischen CSS und HTML zu klären.

• kann uns dabei helfen, wiederverwendbare und einfach zu montierende Komponenten zu erstellen.

• kann die Verschachtelung und die Spezifität verringern.

• kann uns bei der Erstellung erweiterbarer Stylesheets helfen.

OOCSS, auch bekannt als „Object Oriented CSS“, ist eine Methode zum Schreiben von CSS. Die Idee besteht darin, Sie zur Verwendung von Stylesheets zu ermutigen eine Sammlung von „Objekten“: Erstellen Sie wiederverwendbare, wiederholbare Codeteile, die Sie auf Ihrer Website mehrfach verwenden können.

Referenz:

• Nicole Sullivans OOCSS-Wiki

• Smashing Magazine's Einführung in OOCSS

BEM oder „Block-Element-Modifier“ ist eine Namenskonvention für HTML- und CSS-Klassennamen. BEM wurde ursprünglich von Yandex vorgeschlagen, da sie wussten, dass sie über eine riesige Codebasis und Skalierbarkeit verfügen. BEM wurde dafür geboren und kann als eine Reihe von Referenzleitfadenspezifikationen dienen, die OOCSS entsprechen.

• CSS Trick’s BEM 101

• Harry Roberts‘ Einführung in BEM

Beispiel

<article class="listing-card listing-card--featured">

  <h1 class="listing-card__title">Adorable 2BR in the sunny Mission</h1>

  <p class="listing-card__content">
    <p>Vestibulum id ligula porta felis euismod semper.</p>
  </p>

</article>

.listing-card { }
.listing-card--featured { }
.listing-card__title { }
.listing-card__content { }

• .listing-card ist ein Block, der eine Komponente auf hoher Ebene darstellt.

• .listing-card__title ist ein Element, es ist Teil von .listing-card, sodass der Block aus Elementen besteht.

• .listing-card--featured ist ein Modifikator, der angibt, dass dieser Block einen anderen Status oder eine andere Änderung als .listing-card hat.

Weitere verwandte Artikel zum vernünftigeren Schreiben von CSS finden Sie auf der chinesischen PHP-Website!