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
   

   View Slide

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
   }
   

   View Slide

3. .block__element--modifier
   Block, Element, Modifier
   .search
   .menu
   .footer
   

   View Slide

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

   View Slide

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

   View Slide

6. View Slide

7. Scope
   

   View Slide

8. Lesbarkeit
   

   View Slide

9. Komponenten
   

   View Slide

10. View Slide

11. View Slide

12. How not to BEM
    

    View Slide

13. .nav .nav__item > a {
    //Nope
    }
    .nav__item {
    //Yep
    }
    .nav--dark .nav__link {
    //Yep
    }
    

    View Slide

14. .nav__menu__item__link__icon--small {
    //Nope
    }
    .nav__icon--small {
    //Yep
    }
    

    View Slide

15. 
    //Nope
    
    //Yep
    

    View Slide

16. //Mixes
    
    //Zwei Blocks am selben DOM element
    

    View Slide

17. View Slide

18. Fragen?
    

    View Slide