To BEM, or not to BEM

"To BEM, or not to BEM" - An introduction to a BEM methodology, why it's worth to start using it, what you should avoid and a case study based on some refactoring experiences at Wimdu.

Transcript

1. up.front.ug #56, Berlin, 14/04/2015 To BEM, or not to BEM Łukasz Kliś / @lukaszklis / klis.co
2. up.front.ug #56, Berlin, 14/04/2015 About me
3. I <3 BURGERS
4. up.front.ug #56, Berlin, 14/04/2015 Frameworks & grid systems • Bootstrap • Foundation • Pure • Semantic UI And many, many more…
5. up.front.ug #56, Berlin, 14/04/2015 Doing front-end is easy
6. up.front.ug #56, Berlin, 14/04/2015 Let’s make a button! <button class="btn"> Click me </button>
7. up.front.ug #56, Berlin, 14/04/2015 Let’s make it bigger! <button class="btn btn-lg"> Click me </button>
8. up.front.ug #56, Berlin, 14/04/2015 Let’s paint it blue! <button class="btn btn-lg btn-primary"> Click me </button>
9. up.front.ug #56, Berlin, 14/04/2015 Let’s make it full width! <button class="btn btn-lg btn-primary btn-block"> Click me </button>
11. up.front.ug #56, Berlin, 14/04/2015 After 3 months…
12. up.front.ug #56, Berlin, 14/04/2015 git commit -am "A quick fix" <button class="btn btn-lg btn-primary btn-block btn-cta btn-orange"> Click me </button>
14. up.front.ug #56, Berlin, 14/04/2015 BEM to the rescue!
15. up.front.ug #56, Berlin, 14/04/2015 github.com/nikazawila/bem-buttons
16. up.front.ug #56, Berlin, 14/04/2015 Block Element Modifier Created by Yandex in 2005
17. Source: http://bem.info/method/definitions/ Example layout
18. Source: http://bem.info/method/definitions/ Blocks
19. Source: http://bem.info/method/definitions/ Blocks
20. Source: http://bem.info/method/definitions/ Elements
21. Source: http://bem.info/method/definitions/ Modifiers
22. up.front.ug #56, Berlin, 14/04/2015 Syntax
23. up.front.ug #56, Berlin, 14/04/2015 The Yandex Way <div class="block__element"></div> <div class="block__element_mod_value"></div>
24. up.front.ug #56, Berlin, 14/04/2015 The CSSGuidelin.es & Wimdu Way <div class="block__element"></div> <div class="block__element block__element--modifier"></div>
25. up.front.ug #56, Berlin, 14/04/2015 Your Way <div class="block-_-element"></div> <div class="block-_-element block-_-element-o_O-modifier"></div>
26. up.front.ug #56, Berlin, 14/04/2015 Case Study: Wimdu Refactoring an offer tile
27. up.front.ug #56, Berlin, 14/04/2015 Let’s go back to May ’13…
28. up.front.ug #56, Berlin, 14/04/2015 An offer tile on SRP
29. up.front.ug #56, Berlin, 14/04/2015 Behind the scenes: HTML <div class="search-result thumbnail thumbnail-search"> <a class="offer-image-link" href="#"> <img class="offer-image" src="#" alt=""> </a> <div class="favorite-search-result"></div> <div class="offer-description"> <div class="h3 title"></div> <div class="subtitle"> Bielefeld, Germany </div> <div class="description"></div> <div class="offer-rating"></div> <div class="offer-additional-details"></div> </div> <div class="price price-per-night"> <div class="price-tag"></div> <div class="price-info"></div> </div> <div class="offer-actions"></div> </div>
30. up.front.ug #56, Berlin, 14/04/2015 Behind the scenes: CSS .thumbnail-search .offer-description { /* code */ } .thumbnail-search .price { /* code */ } .thumbnail-search .price-tag { /* code */ } .thumbnail-search .price-tag span { /* code */ } .thumbnail-search .primary { /* code */ }
31. up.front.ug #56, Berlin, 14/04/2015 An offer tile on the HP
32. up.front.ug #56, Berlin, 14/04/2015 Behind the scenes: HTML <li class="offer-tile"> <a href="#"> <img src="#" alt=""> <div class="price-tag"> <div class="price"></div> <div class="price-info"></div> </div> <div class="title"></div> <div class="location"> Copenhagen, Denmark </div> <div class="rating"></div> </a> </li>
33. up.front.ug #56, Berlin, 14/04/2015 Behind the scenes: CSS .offer-tile img { /* code */ } .offer-tile .price-tag { /* code */ } .offer-tile .price { /* code */ } .offer-tile .price-info { /* code */ } .offer-tile .location { /* code */ }
34. up.front.ug #56, Berlin, 14/04/2015 Bad parts • Deep selectors nesting, • Styling by elements, • Hard to maintain, • Class name duplications in other blocks, • Confusion about how to name new elements inside a block.
36. up.front.ug #56, Berlin, 14/04/2015 A BEMified offer tile on SRP
37. up.front.ug #56, Berlin, 14/04/2015 Behind the scenes: HTML <div class="offer offer--tile"> <div class="offer__image-column"> <img class="offer__image" src="#" alt=""> </div> <div class="offer__details-column"> <div class="offer__details"> <h3 class="offer__title"></h3> <div class="offer__subtitle"> Berlin, Germany </div> <div class="offer__rating"></div> <div class="offer__description"></div> </div> <div class="price price--mini"> <div class="price__tag"></div> <div class="price__info"></div> </div> </div> </div>
38. up.front.ug #56, Berlin, 14/04/2015 Behind the scenes: CSS .offer { /* code */ } .offer__image-column { /* code */ } .offer__details-column { /* code */ } .offer__details { /* code */ } .offer__title { /* code */ } .offer__subtitle { /* code */ } .offer__rating { /* code */ } .offer--tile .offer__details { /* code */ }
39. up.front.ug #56, Berlin, 14/04/2015 An offer tile on HP
40. up.front.ug #56, Berlin, 14/04/2015 Behind the scenes: HTML <div class="offer offer--carousel"> <div class="offer__image-column"> <img class="offer__image" src="#" alt=""> </div> <div class="offer__details-column"> <div class="offer__details"> <h3 class="offer__title"></h3> <div class="offer__subtitle"> Berlin, Germany </div> <div class="offer__rating"></div> </div> <div class="price price--mini"> <div class="price__tag"></div> <div class="price__info"></div> </div> </div> </div>
41. up.front.ug #56, Berlin, 14/04/2015 Behind the scenes: CSS .offer { /* code */ } .offer__image-column { /* code */ } .offer__details-column { /* code */ } .offer__details { /* code */ } .offer__subtitle { /* code */ } .offer__rating { /* code */ } .offer--carousel .offer__details { /* code */ } .offer--carousel .offer__title { /* code */ } .offer--carousel .offer__rating { /* code */ }
42. up.front.ug #56, Berlin, 14/04/2015 Good parts • Selectors nesting limited to the minimum, • Styling by class names only (OOCSS), • Easy to maintain, • Class names are unique per block, • Clear rules on how to name new elements inside
 a block, • Blocks are independent (most of the time).
43. up.front.ug #56, Berlin, 14/04/2015 Case Study: Wimdu Refactoring “flash” messages
44. up.front.ug #56, Berlin, 14/04/2015 A flash message
45. up.front.ug #56, Berlin, 14/04/2015 Flash messages: behind the scenes <div class="flash"> <div class="flash__header"> <h3 class="flash__title"> Free Cancellation Policy </h3> </div> <div class="flash__body"> Lorem ipsum dolor sit amet... </div> </div> .flash { padding: 15px; border: 1px solid #f8fdf4; border-radius: 2px; color: #212121; } .flash__header {} .flash__title { padding-bottom: 5px; } .flash__body {}
46. up.front.ug #56, Berlin, 14/04/2015 Flash messages: modifiers <div class="flash flash--success"> <!-- code --> </div> <div class="flash flash--error"> <!-- code --> </div> <div class="flash flash--info"> <!-- code --> </div> <div class="flash flash--panel"> <!-- code --> </div> <div class="flash flash--with-icon"> <!-- code --> </div>
47. up.front.ug #56, Berlin, 14/04/2015 Nice, isn’t it? Not so fast…
48. up.front.ug #56, Berlin, 14/04/2015 Code Wars:
 The Bootstrap Strikes Back
49. up.front.ug #56, Berlin, 14/04/2015 A success message with an icon on COP
50. up.front.ug #56, Berlin, 14/04/2015 <div class="flash flash--success flash--with-icon flash--voucher"> <i class="flash__icon"></i> <div class="flash__header"> <h3 class="flash__title">Lorem ipsum dolor sit amet</h3> </div> <div class="flash__body"> Lorem ipsum dolor sit amet... </div> </div> A success message with an icon on COP
52. up.front.ug #56, Berlin, 14/04/2015 “Hacking” BEM
 Preprocessors
53. up.front.ug #56, Berlin, 14/04/2015 A success message with an icon on COP <div class="flash flash--success flash--with-icon flash--voucher"> <i class="flash__icon"></i> <div class="flash__header"> <h3 class="flash__title">Lorem ipsum dolor sit amet</h3> </div> <div class="flash__body"> Lorem ipsum dolor sit amet... </div> </div>
54. up.front.ug #56, Berlin, 14/04/2015 Placeholders to the rescue .flash { // code } .flash--with-icon { @extend %flash-with-icon; } .flash--success { @extend %flash-success; } .flash--voucher { @extend %flash-with-icon; @extend %flash-success; // code } // Placeholders %flash-with-icon { // code } %flash-success { // code }
55. up.front.ug #56, Berlin, 14/04/2015 The final result <div class="flash flash--voucher"> <i class="flash__icon"></i> <div class="flash__header"> <h3 class="flash__title">Lorem ipsum dolor sit amet</h3> </div> <div class="flash__body"> Lorem ipsum dolor sit amet... </div> </div>
57. up.front.ug #56, Berlin, 14/04/2015 Using BEM
58. up.front.ug #56, Berlin, 14/04/2015 Using BEM
59. up.front.ug #56, Berlin, 14/04/2015 TL;DR
60. up.front.ug #56, Berlin, 14/04/2015 Block Element Modifier Created by Yandex in 2005
61. up.front.ug #56, Berlin, 14/04/2015 Syntax <div class="block__element"></div> <div class="block__element_mod_value"></div> The Yandex Way The CSSGuidelin.es / Wimdu Way <div class="block__element"></div> <div class="block__element block__element--modifier"></div> Your Way <div class="block-_-element"></div> <div class="block-_-element block-_-element-o_O-modifier"></div>
62. up.front.ug #56, Berlin, 14/04/2015 Pros Cons • Easy to learn, • Simplifies CSS selectors, • No styling by elements (OOCSS), • Makes maintenance easier, • Class names are unique per block, • Blocks are independent. • Hard to implement in smaller projects (sometimes), • Problems with naming blocks, • “Hacks” to avoid BEM’s Bootstrap effect.
63. up.front.ug #56, Berlin, 14/04/2015 “Should I start using BEM?”
64. up.front.ug #56, Berlin, 14/04/2015 YES.
65. up.front.ug #56, Berlin, 14/04/2015 Interesting readings • http://bem.info/ • http://getbem.com • http://cssguidelin.es/ • http://csswizardry.com/2013/01/mindbemding- getting-your-head-round-bem-syntax/ • http://www.smashingmagazine.com/ 2014/07/17/bem-methodology-for-small- projects/ • http://www.smashingmagazine.com/ 2012/04/16/a-new-front-end-methodology-bem/
66. up.front.ug #56, Berlin, 14/04/2015 Questions?
67. up.front.ug #56, Berlin, 14/04/2015 Thanks @lukaszklis / lukasz@klis.co / klis.co