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.

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
7. Scope
8. Lesbarkeit
9. Komponenten
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
18. Fragen?