BEM names intentionally use double underscores and double hyphens instead of single to separate Block-Element-Modifier. The reason is so that single hyphens can be used as word separators. Class names should be very readable, so abbreviation isn’t always desirable unless the abbreviations are universally recognizable.
Standalone entity that is meaningful on its own.
header,container,menu,checkbox ...A part of a block that has no standalone meaning and is semantically tied to its block.
menu item,link item ...A flag on a block or element. Use them to change appearance or behavior.
disabled,highlighted,checked ...Block styles are never dependent on other elements on a page, so you will never experience problems from cascading. You also get the ability to transfer blocks from your finished projects to new ones.
Composing independent blocks in different ways, and reusing them intelligently, reduces the amount of CSS code that you will have to maintain. With a set of style guidelines in place, you can build a library of blocks, making your CSS super effective.
BEM methodology gives your CSS code a solid structure that remains simple and easy to understand.
Designers and developers can consistently name components for easier communication between team members. In other words, BEM gives everyone on a project a declarative syntax that they can share so that they’re on the same page.