BEM. What you can borrow from Yandex frontend dev

BEM
What you can borrow from
Yandex frontend dev

Frontend developer
Varvara Stepanova

Over 80 services

• search
– web pages
– images, video
– goods, news, blog posts, people
• web mail
• web maps
– traffic jams, wiki maps, taxi
• hosting and sharing
– files, photos, video

5

Inside Yandex

• 2500 developers
• 150+ frontend developers

6

Behind the page
HTML
<!DOCTYPE html>
<html>
<head>...</head>
<body>
...
</body>

CSS
body {
font: 0.8em Arial, sans-serif;
margin: 0;
color: black;
}
.sidebar ul li {

13

Menu block

HTML
<ul class="menu">
<li><a href="/new">New titiles</a></li>
<li><a href="/soon">Coming soon</a></li>
<li><a href="/best">Bestsellers</a></li>
...

CSS
.menu {
list-style: none;

20

Search block

HTML
<div class="search">
<input type="text" name="search" value="..."/>
<input type="button" name="sbmt" value="Search"/>
</div>

CSS
.search {
padding: 2em 0;

20
21

Tabbed pane block
HTML
<div class="tabbed-pane">
<ul>
<li>Bestsellers</li><li>...</li>
</ul>
<div>
The Casual Vacancy, J.K. Rowling
</div>
</div>

CSS
.tabbed-pane {
margin: 0.5em;
...
}

22

The page of blocks
index.html
<!DOCTYPE html>
<html>
<head>..</head>
<body>

<div class="head">
<div class="logo">...</div>
<ul class="menu">...</ul>
<div class="search">...</div>
</div>

<div class="layout">...</div>

<div class="foot">...</div>

</body>
</html>

24

Menu block

HTML HTML
<ul id="menu"> <ul class="menu">
... ...

CSS CSS
#menu { .menu {
... ...

27

Block is independent, if

• a block has its "name"
– no "id" but "classname" selectors
• avoids cascade
• no "tag" selectors

28


• avoid cascade

31

almost NO CASCADE
when using Cascading Style Sheets

32

Pages are sets of blocks
index page search page contacts page

40

CSS for different pages

common.css index.css
style.css contacts.css
body { ... } body { { }
.advert... ... } body .phone {
.head { .. } ...
.head { ... } .head ul li { ...
.layout .books} { }
a:link, ... { ... }
...
.head ul li { .advert { ... }
} .phone a {
... .layout .books { ... } ...
} body .phone { ... } }
.phone a { ... }
a:link, ... { #map { ... } #map {
} }

41


44

CSS for every block

blocks/
header.css
menu.css
button.css
tabbed-pane.css
logo.css
footer.css

45

CSS for a page
index.css
@import url(blocks/header.css);
@import url(blocks/menu.css);
@import url(blocks/tabbed-pane.css);
@import url(blocks/text.css);
@import url(blocks/logo.css);
@import url(blocks/footer.css);
...

46

Project file system

blocks/ pages/

advert.css index.html
books-list.css index.css
head.css
foot.css contacts.html
logo.css contacts.css
menu.css
search.css book.html
tabbed-pane.css book.css

47

Menu block

HTML
<ul class="menu">
<li><a href="/new">New titles</a></li>
<li><a href="/soon">Coming soon</a></li>
<li><a href="/best">Bestsellers</a></li>
...
</ul>

50

Menu block

blocks/menu.css
.menu li
{
list-style: none;
display: inline-block;
padding: 0 0.5em;
}

51

Menu and Dropdown blocks

blocks/menu.css pages/index.html
.menu li <li>
{ <a href="#">Bestsellers</a>
list-style: none; <div class="dropdown">
display: inline-block;
padding: 0 0.5em; <ul>
} <li>Item One</li>
<li>Item Two</li>
<li>The best item</li>
<li>Item Three</li>

52


• avoid cascade

53

The style system matches rules by starting with the key
selector, then moving to the left (looking for any ancestors
in the rule’s selector).
David Hyatt, MDN

mzl.la/UuwZql

54

Menu

page.html
<ul class="menu">
<li class="menu__item"><a href="/">Index</a></li>
<li class="menu__item"><a href="/new">New</a></li>
<li class="menu__item"><a href="/offer">Special offer</a></li>
<li class="menu__item"><a href="/shipping">Shipping</a></li>
</ul>

62

Menu

blocks/menu.css
.menu li .tabbed-pane__tab
{
list-style: none;
display: inline-block; .block-element
padding: 0 0.5em; .block--element
} .block___element

63

Files for elements

blocks/

search.css menu.css
search__checkbox.css menu__item.css
search__autocomlete.css

tabbed-pane.css book.css
tabbed-pane__tab.css book__title.css
tabbed-pane__pane.css book__image.css

65

Modifier
HTML

<div class="tabbed-pane tabbed-pane_theme_blue">
<ul>
<li class="tabbed-pane__tab">Tab 1</li>
<li class="tabbed-pane__tab">Tab 2</li>
</ul>
<div class="tabbed-pane__pane">
...
</div>
</div>

68

Modifier
HTML

<div class="tabbed-pane
tabbed-pane_theme_blue
tabbed-pane_direction_bottom">
...
</div>

<input class="button
button_theme_black
button_size_l" ... />

69

block-name_mod-name_mod-val

tabbed-pane_theme_blue
tabbed-pane_theme_white

tabbed-pane_size_s
tabbed-pane_size_l

button_size_s
button_size_l

70

Block files structure

blocks/

tabbed-pane.css
tabbed-pane__tab.css
tabbed-pane__pane.css
tabbed-pane_theme_blue.css
tabbed-pane_theme_black.css
tabbed-pane_direction_bottom.css

71

Taken when necessary
CSS

@import url(blocks/search.css);
@import url(blocks/tabbed-pane.css);
@import url(blocks/tabbed-pane__tab.css);
@import url(blocks/tabbed-pane__pane.css);
@import url(blocks/tabbed-pane_theme_blue.css);
@import url(blocks/button.css);
@import url(blocks/logo.css);
@import url(blocks/footer.css);

72

Taken when necessary
CSS

<div class="tabbed-pane">
<span class="
tabbed-pane__tab
tabbed-pane__tab_state_current">...</span>
</div>

74

Block modifier DO affects elements

75

Cascade is possible
CSS

.tabbed-pane_theme_blue
.tabbed-pane__tab
{
background-color: #9CF;
}

76

File structure. The flat case

blocks/

tabbed-pane.css logo.css
tabbed-pane__pane.css search.css
tabbed-pane_theme_blue.css search__checkbox.css
tabbed-pane_theme_black.css search__autocomplete.css
tabbed-pane_size_l.css
tabbed-pane_size_s.css

menu.css
menu__item.css
menu_size_l.css
menu_size_s.css

78

File structure. Block folder

blocks/

tabbed-pane/ menu/
tabbed-pane.css menu.css
tabbed-pane__tab.css menu__item.css
tabbed-pane__pane.css menu_size_l.css
tabbed-pane_theme_blue.css menu_size_s.css
tabbed-pane_size_l.css
tabbed-pane_size_s.css search/
search.css
logo/ search__checkbox.css
logo.css search__autocomplete.css

79

File structure. Yandex way

blocks/

tabbed-pane/
__tab/
_state/
tabbed-pane__tab_state_current.css
__pane/
tabbed-pane__pane.css
_theme/
tabbed-pane.css

80

BEM entities

• Block
– combined in different ways
– included one into another
– independent
• Element
• Modifier

81

BEM is

• Methodology
is a way of thinking when developing
• Tools
do monkey job for you
• Block libraries
make you develop faster and better

83

Render to IE the things that are IE's
HTML

<html>
<head>

<link rel="stylesheet" href="index.css">


</head>
...

85

Render to IE the things that are IE's
HTML

<html>
<head>

<link rel="stylesheet" href="index.css">


</head>
...

86

CSS file for IE
CSS

@import url(index.css);
@import url(blocks/menu/menu.ie.css);
@import url(blocks/button/button.ie.css);
@import url(blocks/footer/footer.ie.css);

87

CSS file for IE
CSS

@import url(index.css);
@import url(blocks/menu/menu.ie.css);
@import url(blocks/button/button.ie.css);
@import url(blocks/footer/footer.ie.css);

88

Block files for IE

blocks/

tabbed-pane/
tabbed-pane.css
tabbed-pane.ie.css
...

menu/
menu.css
menu.ie.css

89

Element files for IE

blocks/

tabbed-pane/
tabbed-pane.css
tabbed-pane.ie.css
tabbed-pane__item.css
tabbed-pane__item.ie.css
tabbed-pane_theme_blue.ie.css

90

Block encapsulates all
index.css
blocks/
menu/ @import...
menu__item.css @import...
menu__item.ie.css @import...
menu.css @import...
menu.ie.css @import...
@import...

index.ie.css
@import...
@import...
@import...
@import...
@import...
@import...

91

Page with JavaScript
index.html

<!DOCTYPE html>
<html>
<head>
<link rel=stylesheet href="index.css">
<script type="text/javascript" src="all.js"/>
</head>
...

97

Page with JavaScript
index.html

<!DOCTYPE html>
<html>
<head>
<link rel=stylesheet href="index.css">
<script type="text/javascript" src="index.js"/>
</head>
...

98


99

JavaScript for blocks

blocks/
menu/
menu.css
menu.js
dropdown/
dropdown.css
dropdown.js
tabbed-pane/
tabbed-pane.css
tabbed-pane.js

100

Page JavaScript of blocks
index.js

borschik:include:blocks/menu/menu.js
borschik:include:blocks/tabbed-pane/tabbed-pane.js
...

index.js

/* Menu block begins */
(function($){
$('.menu__item').on('click', function(e) {
$(this).toggleClass('menu__item_state_current');
});
})(jQuery)

101

Borschik — CSS&JS flattening

git.io/borschik

102

CSS flatenning
index.css

@import url(blocks/menu.css);
...

_index.css

.header {
...
}
.menu {
...
}

103

Relative paths in CSS
pages/index.css blocks/menu/menu.css
@import url(blocks/menu/menu.css); .menu {

background: url(menu__bg.png);

}

pages/_index.css
.menu {

background: url(../blocks/menu/menu__bg.png);

}

104

general CSS
HTML
@import url(blocks/head/head.css);
<!DOCTYPE html> @import url(blocks/search/search.css);
<html> @import url(blocks/layout/layout.css);
<head> @import url(blocks/menu/menu.css);
<title>Awesome online bookshop</title> url(blocks/text/text.css);
@import
<link rel="stylesheet" href="style.css"/>
@import url(blocks/foot/foot.css);
<script type="text/javascript" src="magic.js"></script>
</head>
<body> CSS for IE
<div class="head">
<ul class="menu"> @import url(index.css);
<li class="menu__item"><a href="/">Home</a></li> @import url(blocks/menu/menu.ie.css);
<li class="menu__item"><a href="/news">News</a></li> url(blocks/text/text.ie.css);
@import
... @import url(blocks/foot/foot.ie.css);
</ul>
JavaScript
<div class="phone">+3 71 1234567</div>
</div>
(function($){
<div class="layout">
...
$('.menu__item').on('click', function() {
</div>
</body>
$(this).toggleClass('menu__item_state_current');
</html>
});
})(jQuery)

105

Page declaration
index.xml

<b:page>
<b:head>
<b:logo/>
<b:search>
<e:input/>
<e:button/>
</b-search>
<b:menu>
<e:item>Home</e:item>
<e:item>Contacts</e:item>
...

108

Page declaration. BEM tree
index.bemjson

{
block: 'page',
content: [
{
block: head,
content: [
{ block: 'logo' },
{
block: 'search',
....

109

Change BEM tree if you need changes

}
page.html
page.css
page.js

110

BEM tools build pages with blocks

git.io/bem-tools

111

BEM tools support many technologies

blocks/ pages/

menu/ index.html
menu.sass index.sass -> index.css
menu.less index.coffee -> index.js
menu.coffee

tabbed-pane/
tabbed-pane.sass
tabbed-pane.coffee

112

BEM tools support any file structure

blocks/ blocks/

menu.css menu/
menu_theme_black.css __item/
menu_theme_blue.css menu__item.css
menu_size_l.css _theme/
menu_size_s.css menu_theme_black.css
menu-item.css menu_theme_blue.css
menu-item_state_current.css _size/
menu_size_l.css
tabbed-pane.css menu_size_s.css
tabbed-pane_theme_black.css menu.css
tabbedpane-item.css tabbed-pane/
tabbedpane-pane.css
logo/
logo.css

113

BEM tools support custom technologies

blocks/

menu/
tabbed-pane.css
tabbed-pane.js
tabbed-pane.md

115

BEM tools support custom technologies

blocks/

menu/
tabbed-pane.css
tabbed-pane.js
tabbed-pane.md
tabbed-pane.xsl

116

BEMHTML template engine

blocks/

menu/
tabbed-pane.css
tabbed-pane.js
tabbed-pane.md
tabbed-pane.bemhtml

118

BEMHTML reference [RU]

bit.ly/bemhtml-doc-raw

119

BEM block library

bit.ly/bem-bl-site

122

Block page and block examples

123

Libraries with BEM stack

git.io/bootstrap-bl
git.io/jqueryui-bl
git.io/modernizr-bl

125

BEM-based project

git.io/bem-project-stub

127

Borschik — CSS & JS flattening

git.io/borschik

129

CSS Optimizer

BEFORE AFTER
.test1 { .test1, .test2 {
border: none; border: none
background-color: red; }

bem.info/tools/csso
}
.test1, .test3 {
.test2 { background-color: #F00;
border: none }
}

.test3 {
background-color: #FF000;
}

130

SVG Optimizer

git.io/svgo

131

Varvara Stepanova
Vladimir Varankin
Frontend developers

toivonen@yandex-team.ru
varankinv@yandex-team.ru
@toivonens
@tvii

@bem_tw

Thank you

BEM. What you can borrow from Yandex frontend dev

More Related Content

What's hot

Viewers also liked

Similar to BEM. What you can borrow from Yandex frontend dev

More from Varya Stepanova

BEM. What you can borrow from Yandex frontend dev