Download to read offline
Uploaded byYandex
BEM for Javascript at CampJS III
The document presents an overview of the BEM (Block Element Modifier) methodology, which is a structured approach to building web services. It covers BEM's principles, naming conventions, file system structure, and comparisons with web components, emphasizing scalability and component reusability. It also highlights how BEM can be applied across different technologies and frameworks to create maintainable code.
More Related Content
Similar to BEM for Javascript at CampJS III
BEM for Javascript at CampJS III
- 1.
- 2. BEM for JS Vladimir Grinenko, Yandex Melbourne Node.JS Meetup 2
- 3. Myself • headof BEM team at Yandex • [email protected] • @tadatuta • github.com/tadatuta 3
- 5. What I’m goingto talk about • What’s BEM • BEM methodology • BEM VS Web Components • BEM in different techs • BEM for JS • Yandex's implementation of BEM 5
- 6.
- 7. What is itactually?! • a methodology of how to build web services 7
- 8. What is itactually?! • a methodology of how to build web services • the same language for all 8
- 9. What is itactually?! • a methodology of how to build web services • the same language for all • scaling 9
- 10. What is itactually?! • a methodology of how to build web services • the same language for all • scaling • full stack of techs and tools 10
- 11. What is itactually?! • a methodology of how to build web services • the same language for all • scaling • full stack of techs and tools • ready-made components 11
- 12. What is itactually?! • a methodology of how to build web services • the same language for all • scaling • full stack of techs and tools • ready-made components • community 12
- 13. In short Block E lem M odifier 13
- 16. Naming convention Block__ E lement_ M odifier 16
- 17. Naming convention Block__ E lement_ M odifier_ModValue 17
- 18. Naming convention Block__ E lement_ M odifier_ModValue bem.info/tools/bem/bem-naming 18
- 19. File system prj/ blocks/ header/ header.css header.js header.tmpl header.svg header.md 19
- 20. File system prj/ blocks/ header/ _theme/ header_theme_simple.css header_theme_full.css __logo/ header__logo.css 20
- 21. BEM for CSS 21
- 22. BEM principles forCSS • Map document to BEM blocks — no tag or id selectors • No CSS outside of blocks • Independent blocks -> no global reset • Avoid cascade 22
- 24. Old school <divwidth=120 height=200></div> 24
- 25. Old school <divwidth=120 height=200></div> <div width=120 height=200></div> <div width=120 height=200></div> 25
- 26. Old school <divwidth=120 height=200> <div width=40 height=40> <div width=34 height=34></div> </div> </div> <div width=120 height=200></div> 26
- 27. Declarative CSS .block { width: 120px; height: 200px; } 27
- 28. Declarative CSS .block { width: 120px; height: 200px; } .block { height: 220px; background: red; } 28
- 29. Old school <divclass="block" onclick="doSomething()"></div> 29
- 30.
- 31. Semi-declarative JS <divclass="block"></div> <div class="another-block"></div> $('.block').doSomething(); $('.another-block').switchClass('not-a-block', 'block'); 31
- 32. Truly declarative JSmade BEM way BEM.decl('block', { onSetMod: { modifier1: { value1: function() { this.onM1V1(); }, '': function() { this.onRemoveM1(); } } } }); 32
- 33. Templates var ctx= { temperature: 42 }; <div class="weather"> <div class="weather__inner"> {{temperature}} </div> </div> <div class="weather"> <div class="weather__inner"> 42 </div> </div> 33
- 34.
- 35. BEM templates varctx = { temperature: 42 }; var view = { block: "weather" }; block weather { tag: 'ul' content: { elem: 'inner', content: ctx.temperature } elem inner { tag: 'li' } } 35
- 36. Templates <ul class="weather"> <li class="weather__inner"> 42 </li> </ul> 36
- 37.
- 38. Web components <audiocontrols src="campjs.mp3"></audio> • Semantic abstraction messed with non-semantic tags • All techs together in same file • Hidden inside with Shadow DOM which lacks browser support 38
- 39. BEM blocks {block: 'audio', hasControls: true, src: 'campjs.mp3' } • Semantic abstraction with BEMTREE • All techs together in same folder • Hidden by convention which is supported in any browser • Bundled inside one file for each tech to avoid extra requests 39
- 40. One BEM torule ‘em all 40
- 41.
- 43. YModules 1. Asynchronousrequire for modules 2. Asynchronous provide for modules 3. Extending and redefining a module Why not CommonJS? See #1, #2 and #3 in the list of requirements Why not AMD? 43
- 44. BEM Block__Element_Modifier groups/bem.info @bem_en #b_ bem [email protected] 44