Learning CSS BEM (Blocks, Elements, Modifiers)

Just one of the things I'm learning. https://github.com/hchiam/learning

Example CSS class with the block__element--modifier format: .menu__trigger--active

• Block: menu

• Element: trigger

• Modifier: active

  .menu__trigger--active {
    background: orange;
  }
  

Example CSS class with the block--modifier-value format: .button--state-success

• Block: button

• Modifier: state

• Value: success

  .button--state-success {
    color: white;
    background: green;
  }
  

To start learning

http://getbem.com/introduction/

https://css-tricks.com/bem-101/