maintainable frontend development with bem
DESCRIPTION
We are all familiar with the common interface development process which is: * first, preparing an interface layout by a designer; * then, making an HTML/CSS dummy; * next, adding some JavaScript tricks with a help of JavaScript ninja; * and, finally, having a server guy operating on templates and doing all the integration stuff. Even while sometimes all these things are done by the same person, these are different roles and different project stages, and you switch from stage to stage to complete the development cycle. When looking for performance gains, people often try to achieve that by changing the way the process is managed. This presentation is about is a completely different approach which changes development from within. The goal is to convert a flat process with distinct stages into a continuous, uninterrupted development flow. You can achieve this by decomposing a web interface into independent pieces (the so-called blocks), once and for all, and use them to build interfaces the same way bricks are used to build a house. Thus, each of these interface components can be developed separately, which allows maintenance, refactoring and redesign to happen simultaneously on different interface parts, whenever necessary. You are not tied to a specific stage of project development anymore. To make this happen, there are several principles you can follow: 1. Special project file structure, where files are stored the way the whole project can be built from components; 2. CSS guidelines that allow an interface piece to fit anywhere on any page without affecting other pieces; 3. In JavaScript, your functionality can be described in a highly semantic way usually unavailable with any other common approach. All this magic is called BEM, which stands for Block, Element, and Modifier. With my presentation, this technology will be revealed in greater detail, and magic explained bit by bit.TRANSCRIPT
UI Framework Team Lead
Maintainable Frontend Development with BEM
Varvara Stepanova
#b_
It's me
3
4
Search
Images Video Realty Social
Blogs Apps Jobs
Maps Mail Marketplace etc.
Next 30 minutes
• Usual development cycle• Main problems it brings• BEM solutions to the problems• New development workflow• Recently happened in BEM world
5
Usually
Usual development cycle and problems
7
Usual development cycle and problems
• decomposition – every time• every change starts from zero• cannot reuse your own work
8
BEM is a world on its own
• methodology of modularity• file structure recommendations• reusable libraries• helpful tools & optimizers• template engine
10
Block • Element • Modifier
11
Block is an independent component
12
Page of blocks
13
page.html
<body class="page">
<div class="header"> <img class="logo" ... /> <div class="search">...</div> <div class="menu">...</div> </div>
<div class="layout"> <div class="sidebar">...</div> <div class="menu">...</div> </div>
</body>
Some blocks have elements
14
Block with elements
15
page.html
<div class="tabbed-pane"> <ul> <li class="tabbed-pane__tab">Tab1</li> <li class="tabbed-pane__tab">Tab2</li> </ul> <div class="tabbed-pane__panel"> ... </div></div>
Elements
16
Block of elements
17
Modifiers change blocks and elements
18
<div class=" tabbed-pane tabbed-pane_theme_blue"> <!-- // --></div>
<div class=" tabbed-pane tabbed-pane_to_bottom"> <!-- // --></div>
Block • Element • Modifier
19
1. Ever-changing layout
2. No copy-paste
3. Unified semantic
What do we want?
1. Ever-changing layout
Independent CSS blocks
• are not affected by parents• do not affect children
22
Independent CSS blocks
• a block has its nameNot id but classname selectors
• no tag selectors• avoid cascade
23
Cascade: a way to express dependency
24
CSS
.header a { text-decoration: none;}.main .photo { width: 150px; height: 150px;}.sidebar li { list-style: none; display: inline-block; padding: 0 0.5em;}
div.big_form .photo { width: 250px; height: 250px;}
.big_form .photo { width: 500px !important;}
«
Improving rendering performance
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).
25
David Hyatt, MDN
mzl.la/UuwZql
Who uses the method
• Yandexbit.ly/bem-riga-2012
• GitHubbit.ly/github-css
• Harry Robertsinuitcss.com
• OOCSS, SMACSS, etc.
26
2. No copy-paste
Each block is a separate CSS file
28
blocks/
search.css search__checkbox.css search__autocomplete.css
tabbed-pane.css tabbed-pane__tab.css tabbed-pane__panel.css
menu.css menu__item.css menu_size_big.css
book.css book__title.css
...taken when you need it!
29
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__panel.css);@import url(blocks/book.css);@import url(blocks/book__image.css);@import url(blocks/menu.css);@import url(blocks/menu_size_big.css);@import url(blocks/menu__item.css);@import url(blocks/footer.css);
Easy to share
• email to a friend• version control systems
30
Linking library to projects
31
search maps market
Services are using two block levels
32
search marketmaps
Project file structure with a library linked
33
library/ # by linking a remote repo header.css footer.css menu.css ...
blocks/ header.css books.css vote.css
library/header.css
Redefining in CSS
34
.header {
color: red;
}
blocks/header.css
.header {
color: green;
}
Pick up from two levels
35
CSS
@import url(library/blocks/header.css);
@import url(library/blocks/search.css);@import url(blocks/search.css);
@import url(library/blocks/tabbed-pane.css);@import url(library/blocks/tabbed-pane__tab.css);@import url(library/blocks/tabbed-pane__panel.css);@import url(blocks/book.css);@import url(blocks/book__image.css);@import url(library/blocks/menu.css);
Automation
• Make• Rake• Grunt
36
3. Unified semantic
Unified semantic
39
Different implementations
Block: CSS + JavaScript
40
blocks/
book/ book.css menu/ menu.css menu.js menu__item.css
search/ search.css
tabbed-pane/ tabbed-pane.css tabbed-pane.js
Block: many technologies
41
tabbed-pane/ tabbed-pane.css tabbed-pane.js tabbed-pane.xsl
logo/ logo.png logo.css logo.xsl
search/ search__autocomplete.css search__autocomplete.js search.css search.js search.xsl
Block: several templating solutions
42
tabbed-pane/ tabbed-pane.css tabbed-pane.js tabbed-pane.xsl tabbed-pane.bemhtml
logo/ logo.png logo.css logo.xsl logo.bemhtml
search/ search__autocomplete.css search__autocomplete.js search.css search.js search.xsl search.bemhtml
Block: documentation
43
tabbed-pane/ tabbed-pane.css tabbed-pane.js tabbed-pane.bemhtml tabbed-pane.md
logo/ logo.png logo.css logo.bemhtml logo.md
search/ search__autocomplete.css search__autocomplete.js search__autocomplete.md search.css search.js search.bemhtml search.md
Services are using two block levels
44
search marketmaps
New dev workflow
Breaking an interface into blocks
47
Fix. Grow. Improve.
• single language• blocks are easy to add/move/remove• maintainability• non-stop refactoring ;-)
48
Do we like what robots like?
Nice development tools
• BEM tools to build pages• Borschik to flatten the CSS and JS files• CSSO to optimize
50
index.css
@import url(blocks/header/header.css);@import url(blocks/menu/menu.css);...
CSS flattening with Borschik
51
_index.css
.header { ...}.menu { ...}
index.js
/*borschik:include:blocks/menu/menu.js*//*borschik:include:blocks/tabbed-pane/tabbed-pane.js*/...
JavaScript flattening with Borschik
52
_index.js
/* Menu block begins */(function($) { $('.menu__item').on('click', function(e) { $(this).toggleClass('menu__item_state_current'); });})(jQuery);
Nice development tools
• BEM tools to build pages• Borschik to flatten the CSS and JS files• CSSO to optimize
53
Optimizing with CSSO
54
DEVELOPMENT
.header { color: red;}
.header { color: green;}
PRODUCTION
.header { color: green;}
bem.info/tools
55
Recently in BEM world
bit.ly/bem-history
The evolution of BEM
57
by Max Shirshin and Vitaly Harisov
Several block libraries
• common library of 100+ blocks• distinct libraries
– search services– map services– image services
...
58
Linking several libraries to a project
59
common-lib/ header/ footer/ layout/ ...
search-lib/ header/ search-form/ ...
maps-lib/ map/ map-point/ ...
blocks/ books/ header/ map-point/ ...
Any library needs...
• web site– documentation– block examples
• release workflow– changelogs– unit tests
60
What to do with BEM?
• follow recommendations– modular everything (CSS, JS, etc.)– file structure– building projects
• participate• write your own libraries
62
http://bem.info
63
Varvara StepanovaUI Framework Team Lead
@toivonens@bem_tw
Thank you
