Write CSS in a more logical way

OOCSS and BEM

We encourage the use of some combination of OOCSS and BEM for the following reasons:

• It can help us sort out the differences between CSS and HTML Clear and rigorous relationships.

• can help us create reusable and easy-to-assemble components.

• can reduce nesting and reduce specificity.

• can help us create extensible style sheets.

OOCSS, also known as "Object Oriented CSS", is a method of writing CSS. The idea is to encourage you to use style sheets Think of it as a collection of “objects”: Create reusable, repeatable pieces of code that you can use multiple times throughout your website.

Reference:

• Nicole Sullivan's OOCSS wiki

• Smashing Magazine's Introduction to OOCSS

BEM, or "Block-Element-Modifier", is a naming convention for HTML and CSS class names. BEM was originally proposed by Yandex, knowing that they have a huge code base and scalability, BEM was born for this, and can serve as a set of reference guidance specifications that comply with OOCSS.

• CSS Trick’s BEM 101

• Harry Roberts’ introduction to BEM

Example

<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 is a block that represents a high-level component.

• .listing-card__title is an element that is part of .listing-card, so the block is composed of elements of.

• .listing-card--featured is a modifier, indicating that this block has different features from .listing-card state or change.

OOCSS and BEM

We encourage the use of some combination of OOCSS and BEM for the following reasons:

• can help us clarify the clear and rigorous relationship between CSS and HTML.

• can help us create reusable and easy-to-assemble components.

• can reduce nesting and reduce specificity.

• can help us create extensible style sheets.

OOCSS, also known as "Object Oriented CSS", is a method of writing CSS. The idea is to encourage you to use style sheets Think of it as a collection of “objects”: Create reusable, repeatable pieces of code that you can use multiple times throughout your website.

Reference:

• Nicole Sullivan's OOCSS wiki

• Smashing Magazine's Introduction to OOCSS

BEM, or "Block-Element-Modifier", is a naming convention for HTML and CSS class names. BEM was originally proposed by Yandex, knowing that they have a huge code base and scalability, BEM was born for this, and can serve as a set of reference guidance specifications that comply with OOCSS.

• CSS Trick’s BEM 101

• Harry Roberts’ introduction to BEM

Example

<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 is a block that represents a high-level component.

• .listing-card__title is an element that is part of .listing-card, so the block is composed of elements of.

• .listing-card--featured is a modifier, indicating that this block has different features from .listing-card state or change.

#For more articles related to writing CSS in a more reasonable way, please pay attention to the PHP Chinese website!