Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Learning to love BEM

Learning to love BEM

2nd WebClerks Meetup, Vienna, AT
-----
A short introduction to the BEM methodology and why it deserves your love - even if it's a little ugly.

363ae3986ffcb775ca374c83576121d1?s=128

Max Böck

April 25, 2016
Tweet

More Decks by Max Böck

Other Decks in Programming

Transcript

  1. Learning to love BEM Max Böck @mxbck mxb.at

  2. #home .intro > .left h3 { float:right; } div.col-md-6 >

    h3 { font-size:2.5em !important; } .box, .box1, .mbox, .box-full { width:100%; //IE bug }
  3. .block__element--modifier Block, Element, Modifier .search .menu .footer

  4. .block__element--modifier Block, Element, Modifier .search__input .menu__item .footer__button

  5. .block__element--modifier Block, Element, Modifier .search__input--expanded .menu__item--active .footer__button--large

  6. None
  7. Scope

  8. Lesbarkeit

  9. Komponenten

  10. None
  11. None
  12. How not to BEM

  13. .nav .nav__item > a { //Nope } .nav__item { //Yep

    } .nav--dark .nav__link { //Yep }
  14. .nav__menu__item__link__icon--small { //Nope } .nav__icon--small { //Yep }

  15. <button class=”btn--large”></button> //Nope <button class=”btn btn--large”></button> //Yep

  16. //Mixes <div class=”media post”> //Zwei Blocks am selben DOM element

  17. None
  18. Fragen?