BEM — is a methodology that helps you to create reusable components and code sharing in front‑end development

Learn why it's better
Classic CSS
#opinions_boxh1 {
margin:008px0;
text-align:center;
}

#opinions_box {
p.more_pp {
a {
text-decoration:underline;
 }
 }

input[type="text"] {
border:1pxsolid#ccc!important;
 }
}
BEM
.opinions-box {
margin:008px0;
text-align:center;

&__view-more {
text-decoration:underline;
 }

&__text-input {
border:1pxsolid#ccc;
 }

&--is-inactive {
color:gray;
 }
}

Easy

To use BEM, you only need to employ BEM’s naming convention.

Modular

Independent blocks and CSS selectors make your code reusable and modular.

Flexible

Using BEM, methodologies and tools can be recomposed and configured the way you like.

Companies using BEM

AltStyle によって変換されたページ (->オリジナル) /