1
BEM — Building 'em modular
Yelena Jetpyspayeva, Vladimir Grinenko, Yandex
You Gotta Love FrontEnd 2015, June 8-9, Tel-Aviv2
Vladimir• 4 years at Yandex
• Head of BEM Development Division at Yandex
• HTML/CSS/JS/BEM 24/7
• @tadatuta
• github.com/tadatuta
3
Yelena• 4 years at Yandex
• BEM Developer Relations Programm Manager
• Techevents, marketing, devcommunity — come talk to me!
• @mursya
• github.com/mursya
4
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
What's BEM historically?
7
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
Problems → Solution• Long cascade affected speed of rendering...
• ... so, BEM helped us eliminate cascade
• by using block__element_modifier naming system
18
Problems → Solution• CSS classes forced us to reinvent names everyday...
• ... so, with BEM we get a naming convention!
19
Problems → Solution• 0 incapsulation...
• ...so, BEM helped us incapsulate code on block level
• and made possible to re-use
20
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
What is BEM now?• methodology
• libraries
• tools
• JS-framework
• templating engine
• engine for building docs and samples
• tests for blocks
• the community 24
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
What's BEM technically?
29
What's BEM technically?• Methodology
• Tools, frameworks and template engines
• Block libraries
30
Web development is...
31
Web development is a pain.
32
BEM methodology• Teachs how to relieve that pain.
• Just a bunch of best practicies
33
Where pain comes from• Support someone's else code
• Your own in a month
• #foot div div *
34
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
Where pain comes from• Support someone's else code
• Refactoring
• Reuse
• A lot of different frameworks &apm; libs
36
What BEM can do that others can't
37
Abstraction• speak the same terms
• code becomes self-documented
• possibility to update components appear
38
In shortBlock
E lem
Modifier
39
Block
Block, elements
Block, elements, modifiers
Naming conventionBlock__E lement_Modifier
45
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
File systemprj/
blocks/
header/
header.css
header.js
header.tmpl
header.svg
header.md 47
File systemprj/
blocks/
header/
_theme/
header_theme_simple.css
header_theme_full.css
__logo/
header__logo.css 48
BEM treeBefore:
div > div > span
After:
block1 > block2 > block2__elem
49
What is BEM now?• methodology
• libraries
• tools
• JS-framework
• templating engine
• engine for building docs and samples
• tests for blocks
• the community 50
BEM Platform: How to start?
51
Quick start• bem.info
• git clone https://github.com/bem/project-stub.git
52
bem.info
BEMBlock__Element_Modifier
bem.info/forum
@bem_en #b_
bem
55
Recommended
