Home  >  Article  >  Web Front-end  >  Write CSS in a more logical way

Write CSS in a more logical way

高洛峰
高洛峰Original
2017-02-15 13:14:531214browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:css valueNext article:css value