BEM — Build ‘em Modular!

Talk (in English) for You Gotta Love Frontend 2015, June 8 — 9, Tel Aviv, Israel.

Abstract

Every web developer, designer or manager who supports huge project or tryes to reuse some parts of HTML + CSS anywhere else sooner or later will face with the same issues and most likely come to the idea of componentized web. It's rather popular now and was even described as a W3C standard Web Components.

But how exactly new are the new ideas and how useful is its realization?

In the frontend world since Internet Explorer 5.5 a lot of developers know and use BEM methodology that was created to solve exactly the same problems. During years of use it formed its own huge ecosystem that includes technologies, tools, libraries and active community. It is built and developed by developers within Yandex and outside that use it everywhere both in small such as promo page for a cat and high loaded projects such as Yandex services and Mail.ru. They are well aware of the problems that developers face.

During our talk we start from the beginning that covers CSS and design and will go on as far as you would wish to.

Video link https://www.youtube.com/watch?v=huQp7gr3WPE

Speakers' biography

Vladimir Grinenko, the head of BEM development team. HTML/CSS/JS-professional. BEM-addict. Answers BEM questions 24/7. Outside Yandex runs his own web development agency, consults projects and helps them stay healthy and wealthy with BEM.

Yelena Jetpyspayeva, BEM Developer Relations Specialist. Helps BEM team with coordination of an open source activity inside and outside Yandex and the community making sure everyone is happy with BEM. Outside Yandex volunteers for open source and helps developers run developer events. Dreamer of the better web and believer in true power of open source.

Transcript

2. BEM — Building 'em modular Yelena Jetpyspayeva, Vladimir Grinenko, Yandex You Gotta Love FrontEnd 2015, June 8-9, Tel-Aviv 2
3. Vladimir • 4 years at Yandex • Head of BEM Development Division at Yandex • HTML/CSS/JS/BEM 24/7 • tadatuta@yandex-team.ru • @tadatuta • github.com/tadatuta 3
4. Yelena • 4 years at Yandex • BEM Developer Relations Programm Manager • Techevents, marketing, devcommunity — come talk to me! • mursya@yandex-team.ru • @mursya • github.com/mursya 4
6. Agenda • What's BEM historically? • What's BEM technically? • Methodology • Tools, frameworks and template engines • Block libraries • What BEM can do that others can't? • How to start? 6
7. What's BEM historically? 7
16. Problems we faced • Low speed of rendering • Naming that does not help • Any interaction with code was dangerous because of 0 in capsulation • and made it possible not only for maintainment but for re-use too 16
18. Problems → Solution • Long cascade affected speed of rendering... • ... so, BEM helped us eliminate cascade • by using block__element_modifier naming system 18
19. Problems → Solution • CSS classes forced us to reinvent names everyday... • ... so, with BEM we get a naming convention! 19
20. Problems → Solution • 0 incapsulation... • ...so, BEM helped us incapsulate code on block level • and made possible to re-use 20
21. Problems → Solution • More demand on interactive interfaces... • ...was not longer a threat • BEM file structure gave an option to separate code according to technologies 21
24. What is BEM now? • methodology • libraries • tools • JS-framework • templating engine • engine for building docs and samples • tests for blocks • the community 24
25. What is BEM now? • a development division at Yandex with 30+ frontenders • 400+ frontenders at Yandex.Services • 1500+ community developers • a standard for frontender's CV in CIS 25
29. What's BEM technically? 29
30. What's BEM technically? • Methodology • Tools, frameworks and template engines • Block libraries 30
31. Web development is... 31
32. Web development is a pain. 32
33. BEM methodology • Teachs how to relieve that pain. • Just a bunch of best practicies 33
34. Where pain comes from • Support someone's else code • Your own in a month • #foot div div * 34
35. Where pain comes from • Support someone's else code • Refactoring • Reuse • Copy/paste doen't work • Hard to tell what to copy • Useless code • Update is a nightmare 35
36. Where pain comes from • Support someone's else code • Refactoring • Reuse • A lot of different frameworks &apm; libs 36
37. What BEM can do that others can't 37
38. Abstraction • speak the same terms • code becomes self-documented • possibility to update components appear 38
39. In short Block Elem Modifier 39
40. Block
41. Block, elements
42. Block, elements, modifiers
45. Naming convention Block__Element_Modifier 45
46. Some of BEM principles • Map document to BEM blocks — no tag or id selectors • No CSS outside of blocks • Independent blocks -> no global reset • Avoid cascade 46
47. File system p r j / b l o c k s / h e a d e r / h e a d e r . c s s h e a d e r . j s h e a d e r . t m p l h e a d e r . s v g h e a d e r . m d 47
48. File system p r j / b l o c k s / h e a d e r / _ t h e m e / h e a d e r _ t h e m e _ s i m p l e . c s s h e a d e r _ t h e m e _ f u l l . c s s _ _ l o g o / h e a d e r _ _ l o g o . c s s 48
49. BEM tree Before: div > div > span After: block1 > block2 > block2__elem 49
50. What is BEM now? • methodology • libraries • tools • JS-framework • templating engine • engine for building docs and samples • tests for blocks • the community 50
51. BEM Platform: How to start? 51
52. Quick start • bem.info • git clone https://github.com/bem/project-stub.git 52
53. bem.info
55. BEM Block__Element_Modifier bem.info/forum @bem_en #b_ bem info@bem.info 55