BEM — Build ‘em Modular!

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@yandex-team.ru

•  @tadatuta

•  github.com/tadatuta

3

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

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

info@bem.info

55