bem-methodology

why bem?

  • BEM (Block, Element, Modifier) Methodology helps to solve specificity issue with equal specificity
  • It is a methodology helps to organize large CSS codes.
  • It helps to avoid CSS class clashes
  • A common rules for classes naming

What is BEM and their using procedure?

  Block
  1. block is a meaningful container; 
  2. we can use letters, digits, dashes for naming block; 
  3. use dash when more than one word  

  Element
  1. Element is not directly meaningful but connected to block/container;   
  2. we can use letters, digits, dashes, underscore for naming element;
  3. syntax: block__element 
  4. use dash when more than one word 

  Modifier
  1. Modifies block or element; (changes in apperance, states)
  2. we can use letters, digits, dashes, underscore for naming modifiers;
  3. syntax: block/element--modifier
  4. use dash when more than one word