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.
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
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
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
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
50. What is BEM now?
• methodology
• libraries
• tools
• JS-framework
• templating engine
• engine for building docs and samples
• tests for blocks
• the community 50