133
| Date post: | 18-Dec-2014 |
| Category: |
Documents |
| Upload: | varvara-stepanova |
| View: | 2,200 times |
| Download: | 3 times |
Frontend developer
BEMWhat you can borrow from Yandex frontend dev
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
Dark side of the Force
Programming is a team work
Developers community
We do enjoy sharing
Web Interface
Behind the page
13
CSS
body { font: 0.8em Arial, sans-serif; margin: 0; color: black;}.sidebar ul li {
HTML
<!DOCTYPE html><html> <head>...</head> <body> ... </body>
Block
Menu block
20
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;
Search block
2120
HTML
<div class="search"> <input type="text" name="search" value="..."/> <input type="button" name="sbmt" value="Search"/></div>
CSS
.search { padding: 2em 0;
Tabbed pane block
22
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; ...}
INDEPENDENT
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>
The page of blocks
24
Repeating
Menu block
27
HTML<ul id="menu"> ...
HTML<ul class="menu"> ...
CSS#menu { ...
CSS.menu { ...
Block is independent, if
• a block has its "name"–no "id" but "classname" selectors
• avoids cascade• no "tag" selectors
28
Movement within a Page
Block is independent, if
• a block has its "name"–no "id" but "classname" selectors
• avoid cascade• no "tag" selectors
31
almost NO CASCADEwhen using Cascading Style Sheets
32
Moving within a Site
index page
Pages are sets of blocks
40
search page contacts page
CSS for different pages
41
common.css
body { ... }
.head { ... }
.head ul li { ...}
a:link, ... {}
index.css
.advert { ... }
.layout .books { ...}
contacts.css
body .phone { ...}
.phone a { ...}
#map {}
style.css
body { ... }.head { .. }.head ul li { ... }a:link, ... { ... }.advert { ... }.layout .books { ... }body .phone { ... }.phone a { ... }#map { ... }
index page
Pages are sets of blocks
44
search page contacts page
blocks/ header.css menu.css button.css tabbed-pane.css logo.css footer.css
CSS for every block
45
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);...
CSS for a page
46
blocks/
advert.css books-list.css head.css foot.css logo.css menu.css search.css tabbed-pane.css
pages/
index.html index.css
contacts.html contacts.css
book.html book.css
Project file system
47
WE NEED TO GO
DEEPER
Inside a Block
Menu block
50
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>
Menu block
51
blocks/menu.css
.menu li{ list-style: none; display: inline-block; padding: 0 0.5em;}
Menu and Dropdown blocks
52
blocks/menu.css.menu li{ list-style: none; display: inline-block; padding: 0 0.5em;}
pages/index.html<li> <a href="#">Bestsellers</a> <div class="dropdown"> <ul> <li>Item One</li> <li>Item Two</li> <li>The best item</li> <li>Item Three</li>
Block is independent, if
• a block has its "name"–no "id" but "classname" selectors
• avoid cascade• no "tag" selectors
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
54
mzl.la/UuwZql
.menu li {
55
.menu li {
56
Menu block
57
Element
Elements
59
Search block
60
Tabbed-pane block
61
Menu
62
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>
Menu
63
.tabbed-pane__tab
.block-element
.block--element
.block___element
blocks/menu.css
.menu li{ list-style: none; display: inline-block; padding: 0 0.5em;}
Optional elements
64
blocks/
search.css search__checkbox.css search__autocomlete.css
tabbed-pane.css tabbed-pane__tab.css tabbed-pane__pane.css
menu.css menu__item.css
book.css book__title.css book__image.css
Files for elements
65
Modifier
Similar but different
67
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>
Modifier
68
HTML
<div class="tabbed-pane tabbed-pane_theme_blue tabbed-pane_direction_bottom"> ...</div>
<input class="button button_theme_black button_size_l" ... />
Modifier
69
tabbed-pane_theme_bluetabbed-pane_theme_white
tabbed-pane_size_stabbed-pane_size_l
button_size_sbutton_size_l
block-name_mod-name_mod-val
70
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
Block files structure
71
CSS
@import url(blocks/header.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);
Taken when necessary
72
Modifiers for elements
73
CSS
<div class="tabbed-pane"> <span class=" tabbed-pane__tab tabbed-pane__tab_state_current">...</span></div>
Taken when necessary
74
Block modifier DO affects elements
75
CSS
.tabbed-pane_theme_blue
.tabbed-pane__tab{ background-color: #9CF;}
Cascade is possible
76
Block File 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_size_l.css tabbed-pane_size_s.css
menu.css menu__item.css menu_size_l.css menu_size_s.css
logo.css search.css search__checkbox.css search__autocomplete.css
File structure. The flat case
78
blocks/
tabbed-pane/ tabbed-pane.css tabbed-pane__tab.css tabbed-pane__pane.css tabbed-pane_theme_blue.css tabbed-pane_theme_black.css tabbed-pane_size_l.css tabbed-pane_size_s.css
logo/ logo.css
menu/ menu.css menu__item.css menu_size_l.css menu_size_s.css
search/ search.css search__checkbox.css search__autocomplete.css
File structure. Block folder
79
blocks/
tabbed-pane/ __tab/ _state/ tabbed-pane__tab_state_current.css tabbed-pane__tab.css __pane/ tabbed-pane__pane.css _theme/ tabbed-pane_theme_blue.css tabbed-pane_theme_black.css tabbed-pane.css
File structure. Yandex way
80
BEM entities
• Block– combined in different ways– included one into another– independent
• Element• Modifier
81
BEM is
• Methodologyis a way of thinking when developing
• Toolsdo monkey job for you
• Block librariesmake you develop faster and better
83
IE
HTML
<html> <head> <!--[if gt IE 7]><!--> <link rel="stylesheet" href="index.css"> <!--<![endif]--> <!--[if lt IE 8]> <link rel=stylesheet href="index.ie.css"> <![endif]--> </head> ...
Render to IE the things that are IE's
85
HTML
<html> <head> <!--[if gt IE 7]><!--> <link rel="stylesheet" href="index.css"> <!--<![endif]--> <!--[if lt IE 8]> <link rel=stylesheet href="index.ie.css"> <![endif]--> </head> ...
Render to IE the things that are IE's
86
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);
CSS file for IE
87
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);
CSS file for IE
88
blocks/
tabbed-pane/ tabbed-pane.css tabbed-pane.ie.css ...
menu/ menu.css menu.ie.css
Block files for IE
89
blocks/
tabbed-pane/ tabbed-pane.css tabbed-pane.ie.css tabbed-pane__item.css tabbed-pane__item.ie.css tabbed-pane_theme_blue.css tabbed-pane_theme_blue.ie.css
Element files for IE
90
Block encapsulates all
91
blocks/ menu/ menu__item.css menu__item.ie.css menu.css menu.ie.css
@import...@import...@import...@import...@import...@import...
index.css
@import...@import...@import...@import...@import...@import...
index.ie.css
JavaScript
Tabbed-pane block
94
Dropdown block
95
Dropdown block
96
index.html
<!DOCTYPE html><html> <head> <link rel=stylesheet href="index.css"> <script type="text/javascript" src="all.js"/> </head> ...
Page with JavaScript
97
index.html
<!DOCTYPE html><html> <head> <link rel=stylesheet href="index.css"> <script type="text/javascript" src="index.js"/> </head> ...
Page with JavaScript
98
index page
Pages are sets of blocks
99
search page contacts page
blocks/ menu/ menu.css menu.js dropdown/ dropdown.css dropdown.js tabbed-pane/ tabbed-pane.css tabbed-pane.js
JavaScript for blocks
100
index.js
borschik:include:blocks/menu/menu.jsborschik:include:blocks/tabbed-pane/tabbed-pane.js...
Page JavaScript of blocks
101
index.js
/* Menu block begins */(function($){ $('.menu__item').on('click', function(e) { $(this).toggleClass('menu__item_state_current'); });})(jQuery)
git.io/borschik
Borschik — CSS&JS flattening
102
index.css
@import url(blocks/header.css);@import url(blocks/menu.css);...
CSS flatenning
103
_index.css
.header { ...}.menu { ...}
Relative paths in CSS
104
pages/_index.css
.menu {
background: url(../blocks/menu/menu__bg.png);
}
blocks/menu/menu.css.menu {
background: url(menu__bg.png);
}
pages/index.css@import url(blocks/menu/menu.css);
105
HTML<!DOCTYPE html><html> <head> <title>Awesome online bookshop</title> <link rel="stylesheet" href="style.css"/> <script type="text/javascript" src="magic.js"></script> </head> <body> <div class="head"> <ul class="menu"> <li class="menu__item"><a href="/">Home</a></li> <li class="menu__item"><a href="/news">News</a></li> ... </ul> <div class="phone">+3 71 1234567</div> </div> <div class="layout"> ... </div> </body></html>
general CSS@import url(blocks/head/head.css);@import url(blocks/search/search.css);@import url(blocks/layout/layout.css);@import url(blocks/menu/menu.css);@import url(blocks/text/text.css);@import url(blocks/foot/foot.css);
CSS for IE@import url(index.css);@import url(blocks/menu/menu.ie.css);@import url(blocks/text/text.ie.css);@import url(blocks/foot/foot.ie.css);
JavaScript(function($){
$('.menu__item').on('click', function() {
$(this).toggleClass('menu__item_state_current');
});})(jQuery)
Building Page Files
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> ...
Page declaration
108
index.bemjson
{ block: 'page', content: [ { block: head, content: [ { block: 'logo' }, { block: 'search', ....
Page declaration. BEM tree
109
Change BEM tree if you need changes
110
page.htmlpage.csspage.js}
git.io/bem-tools
BEM tools build pages with blocks
111
blocks/
menu/ menu.sass menu.less menu.coffee
tabbed-pane/ tabbed-pane.sass tabbed-pane.coffee
pages/
index.htmlindex.sass -> index.cssindex.coffee -> index.js
BEM tools support many technologies
112
blocks/
menu.css menu_theme_black.css menu_theme_blue.css menu_size_l.css menu_size_s.css menu-item.css menu-item_state_current.css
tabbed-pane.css tabbed-pane_theme_black.css tabbed-pane_theme_blue.css tabbedpane-item.css tabbedpane-pane.css
logo.css
BEM tools support any file structure
113
blocks/
menu/ __item/ menu__item.css _theme/ menu_theme_black.css menu_theme_blue.css _size/ menu_size_l.css menu_size_s.css menu.css
tabbed-pane/
logo/
Multilingual
blocks/
menu/ tabbed-pane.css tabbed-pane.js tabbed-pane.md
BEM tools support custom technologies
115
blocks/
menu/ tabbed-pane.css tabbed-pane.js tabbed-pane.md tabbed-pane.xsl
BEM tools support custom technologies
116
Gruelling race... every day
blocks/
menu/ tabbed-pane.css tabbed-pane.js tabbed-pane.md tabbed-pane.bemhtml
BEMHTML template engine
118
bit.ly/bemhtml-doc-raw
BEMHTML reference [RU]
119
Libraries
Block libraries
121
Block page and block examples
123
Block code on GitHub
124
git.io/bootstrap-bl
git.io/jqueryui-bl
git.io/modernizr-bl
Libraries with BEM stack
125
Wanna try?
git.io/bem-project-stub
BEM-based project
127
Dev Tools
git.io/borschik
Borschik — CSS & JS flattening
129
bem.info/tools/csso
CSS Optimizer
130
BEFORE.test1 { border: none; background-color: red;}
.test2 { border: none}
.test3 { background-color: #FF000;}
AFTER.test1, .test2 { border: none}
.test1, .test3 { background-color: #F00;}
git.io/svgo
SVG Optimizer
131
Varvara StepanovaVladimir VarankinFrontend developers
[email protected]@toivonens@tvii
@bem_tw
Thank you
