CSS BEM Methodology
The BEM methodology (Block, Element, Modifier) is a popular naming convention for classes in HTML and CSS.
It is less confusing comparing to the other methods (i.e. SMACSS) but still provides a good architecture with a recognizable terminology.
3 principle elements of BEM
- Block: Container, Wrapper, Layout elements
- Element: Child of a Block element
- Modifier: can change the appearance of a Block or Element
Rules of BEM
- HTML tag or ID selector shouldn't be used
- Elements are namespaced using the Block names and separated by
- Modifiers are separated by
Benefits of using BEM
- BEM is hugely adopted and one of the most popular methodology for writing CSS
- BEM helps to build a solid structure that remains simple and easy to understand.
- Because of strict naming conventions, there is less possibility to run into conflicts with CSS names
- Everything is a class and nothing is nested, so won't have to face specificity related issues.
- The Prolonged naming convention can reduce the readability of the code but it helps to understand the role of each element.