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, easy-to-assemble components.
You can reduce nesting and reduce the specific sex.
can help us create an extensible stylesheet.
oocss, or "Object oriented CSS", is a way to write CSS, and the idea is to encourage you to think of StyleSheets as a collection of "objects": creating reusable, repeatable snippets of code that you can use across your site multiple times.
Resources:
BEM, also known as "Block-element-modifier", is a naming convention for HTML and CSS class names. BEM was originally presented by Yandex, and to know that they had a huge code base and scalability, BEM was born to do so, and could be used as a set of reference guidelines to follow oocss.
Example
<article class= "Listing-card listing-card--featured" >
. 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, which belongs to a .listing-card
part, so the block is made up of elements.
.listing-card--featured
is a modifier (modifier) that indicates that the block .listing-card
has a different 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, easy-to-assemble components.
You can reduce nesting and reduce the specific sex.
can help us create an extensible stylesheet.
oocss, or "Object oriented CSS", is a way to write CSS, and the idea is to encourage you to think of StyleSheets as a collection of "objects": creating reusable, repeatable snippets of code that you can use across your site multiple times.
Resources:
BEM, also known as "Block-element-modifier", is a naming convention for HTML and CSS class names. BEM was originally presented by Yandex, and to know that they had a huge code base and scalability, BEM was born to do so, and could be used as a set of reference guidelines to follow oocss.
Example
<article class= "Listing-card listing-card--featured" >
. 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, which belongs to a .listing-card
part, so the block is made up of elements.
.listing-card--featured
is a modifier (modifier) that indicates that the block .listing-card
has a different state or change.