Écrivez CSS d'une manière plus logique

OOCSS et BEM

Nous encourageons l'utilisation d'une combinaison d'OOCSS et de BEM pour les raisons suivantes :

• peut nous aider à trier les différences entre CSS et HTML Relations claires et rigoureuses.

• peut nous aider à créer des composants réutilisables et faciles à assembler.

• peut réduire la nidification et réduire la spécificité.

• peut nous aider à créer des feuilles de style extensibles.

OOCSS, également connu sous le nom de "CSS orienté objet", est une méthode d'écriture de CSS L'idée est de vous encourager à utiliser des feuilles de style. une collection d'« objets » : créez des morceaux de code réutilisables et reproductibles que vous pouvez utiliser plusieurs fois sur votre site Web.

Référence :

• Wiki OOCSS de Nicole Sullivan

• Introduction à l'OOCSS de Smashing Magazine

BEM, ou "Block-Element-Modifier", est une convention de dénomination pour les noms de classes HTML et CSS. BEM a été initialement proposé par Yandex, sachant qu'ils disposent d'une base de code et d'une évolutivité énormes, BEM est né pour cela et peut servir d'ensemble de spécifications de guidage de référence conformes à l'OOCSS.

• BEM 101 de CSS Trick

• Introduction de Harry Roberts à BEM

Exemple

<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 est un bloc, représentant un composant de haut niveau.

• .listing-card__title est un élément qui fait partie de .listing-card, le bloc est donc composé d'éléments.

• .listing-card--featured est un modificateur, indiquant que ce bloc a un état ou un changement différent de .listing-card.

OOCSS et BEM

Nous encourageons l'utilisation d'une combinaison d'OOCSS et de BEM pour les raisons suivantes :

• peut nous aider à clarifier la relation claire et rigoureuse entre CSS et HTML.

• peut nous aider à créer des composants réutilisables et faciles à assembler.

• peut réduire la nidification et réduire la spécificité.

• peut nous aider à créer des feuilles de style extensibles.

OOCSS, également connu sous le nom de "CSS orienté objet", est une méthode d'écriture de CSS L'idée est de vous encourager à utiliser des feuilles de style. une collection d'« objets » : créez des morceaux de code réutilisables et reproductibles que vous pouvez utiliser plusieurs fois sur votre site Web.

Référence :

• Wiki OOCSS de Nicole Sullivan

• Introduction à l'OOCSS de Smashing Magazine

BEM, ou "Block-Element-Modifier", est une convention de dénomination pour les noms de classes HTML et CSS. BEM a été initialement proposé par Yandex, sachant qu'ils disposent d'une base de code et d'une évolutivité énormes, BEM est né pour cela et peut servir d'ensemble de spécifications de guidage de référence conformes à l'OOCSS.

• BEM 101 de CSS Trick

• Introduction de Harry Roberts à BEM

Exemple

<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 est un bloc, représentant un composant de haut niveau.

• .listing-card__title est un élément qui fait partie de .listing-card, le bloc est donc composé d'éléments.

• .listing-card--featured est un modificateur, indiquant que ce bloc a un état ou un changement différent de .listing-card.

Pour plus d'articles sur l'écriture de CSS de manière plus raisonnable, veuillez faire attention au site Web PHP chinois !