Understanding BEM

BEM stands for Block, Element, Modifier. It is a method used to construct CSS class-names so they are consistent, isolated, and expressive. A few good resources for learning more about BEM methods are:

• CSSWizardry
• CSS-Tricks
• Smashing Magazine

These are great resources that simplify the data needed to understand BEM. If you want to read the methodology from the inventors, Yandex provides the resource. This holds no bars and goes way beyond just the CSS and into the full JavaScript setup they use as well.

For MDL

Project classnames should follow these guidelines:

1. Start each classname developers use with mdl-. This provides a solid namespace of any provided classes so they have the least chance to collide with other projects.
2. Take the name of the component, convert to lowercase and hyphenate. For example: Data Tables becomes data-tables. This becomes your block.
3. Break the element down into logical pieces. Typically this can be done by looking at the specification and seeing how it breaks parts down.
4. Once parts are settled, name them as closely as you can to how the specification names them. These become your elements.
5. Finally, add any modifiers where the specification allows multiple forms of an item.