Home > Article > Web Front-end > Write CSS in a more logical way
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.
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!