What is BEM?
1) BEM Stands for Block, Element, Modifier
2) BEM is a front end methodology.
3) It was created by an European country called Yandex.
4) The goel of BEM is to create well organized css
Block: Block is a stand alone entity that is meaningful on its own.
For example: header, menu, container, checkbox, input etc.
Element: Parts of block and have no stand alone meaning. They are semantically tied to its block.
For example: menu item, list item, checkbox caption, header title etc.
Modifier: Flag on block or elements. Use them to change appearance or behavior.
For example: disabled, checked, fixed, highlited etc.
Why use BEM?
1) Modularity: No problem with cascadding. You can transfer block within project.
2) reusability: Reduce CSS
3) Structure: Simple for teams to follow
1) Blocks names must be unique.
2) Block names should equals to the css class
3) Element name must be unique to the block
4) We do not use ids