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_box h1 {
    margin: 0 0 8px 0;
    text-align: center;
}

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

    input[type="text"] {
        border: 1px solid #ccc!important;
    }
}
BEM
.opinions-box {
    margin: 0 0 8px 0;
    text-align: center;

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

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

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

Easy

Image for: Easy

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

Modular

Image for: Modular

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

Flexible

Image for: Flexible

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