CSS BEM

BEM (Block, Element, Modifier) is a naming convention methodology in CSS. It uess __ (two undercores) for element, and -- (double dashes) for modifier.

/* block component - button */
.btn {}
/* element that depends on the block */
.btn__price {}
/* modifier that changes the state/style of block */
.btn--big {}

In BEM, everything is a class and nothing is nested. That makes CSS specificity very flat and low.

The idea is undoubtedly useful to maintain codes. But personally I don't like -- and __ in class name, probably we can look for some alternatives like using -e- (element) and -m- (modifier). I believe the  consistent naming convention helps understand and maintain css codes.

/* this is a block */
.btn {}
/* price is an element of btn block */
.btn-e-price {}
/* big is a modifier of btn block */
.btn-m-big {}