Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
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:
Project classnames should follow these guidelines:
- 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.
- Take the name of the component, convert to lowercase and hyphenate. For example: Data Tables becomes
data-tables. This becomes your block.
- Break the element down into logical pieces. Typically this can be done by looking at the specification and seeing how it breaks parts down.
- Once parts are settled, name them as closely as you can to how the specification names them. These become your elements.
- Finally, add any modifiers where the specification allows multiple forms of an item.