3. There is no unified semantic model
across different FE technologies
● HTML stands for hypertext
I've heard we mostly do web apps...
● CSS offers no structure out of the box
Usually a pile of rules put together. Sorry.
● JavaScript uses its own approaches.
...a new one comes with every framework.
4. ● ≈ 8,500 packages in Bower registry
● JavaScript:
the most popular language on GitHub
Repositories created:
≈ 264,000 in 2013
≈ 296,000 in 2012
Frameworks are not enough
6. What is BEM?
BEM claims that simple semantic model
(Blocks, Elements, and Modifiers)
is enough to define the way you author
HTML / CSS / JavaScript, structure code
and components, set up interaction
and scale your project to build
an industry-leading service.
7. What is BEM?
● BEM is a methodology, not a framework
Semantic model + best practices
for all things frontend
● BEM is a fix for web app semantics
...the same as jQuery is a fix for DOM APIs
● Originally introduced by Yandex
— 19 million daily audience
— 200+ web services
— tools, code, tutorials, conferences
— open source
9. What is BEM?
BLOCK
– Standalone part of an interface:
● button
● text field
● flyout
● heading
● menu
10. What is BEM?
BLOCK
– Standalone part of an interface:
● button
● text field
● flyout
● heading
● menu
– Re-usable in different contexts
– Self-sufficient
11. What is BEM?
ELEMENT
– An integral part of a block:
● button
● text field
● flyout
● heading
● menu
12. What is BEM?
ELEMENT
– An integral part of a block:
● button — contains no elements
● text field label
● flyout title
● heading logo
● menu item
13. What is BEM?
ELEMENT
– An integral part of a block:
● button — contains no elements
● text field label
● flyout title
● heading logo
● menu item
– No standalone meaning outside of a block
– Some blocks have no elements
14. What is BEM?
MODIFIER
– Defines property or state on a block or
element:
● button
● text field
● flyout
● heading
● menu item
15. What is BEM?
MODIFIER
– Defines property or state on a block or
element:
● button theme
● text field editable state
● flyout alignment
● heading level
● menu item bullet type
16. What is BEM?
MODIFIER
– Defines property or state on a block or
element:
● button theme
● text field editable state
● flyout alignment
● heading level
● menu item bullet type
– Multiple modifiers may co-exist
on a single block/element
17. BEM forms a semantic overlay over
the existing DOM structure.
This overlay is called a BEM tree.
19. How does BEM map to DOM?
● Blocks/elems/mods are denoted
with CSS classes using a naming
convention.
● DOM nodes can be shared:
— block1 + block2 may occupy the same
container;
— element1 + block2 may co-exist on
the same node.
● DOM is encapsulated:
— complex DOM structure may constitute
a single element
32. BEM CSS: best practices
1. Map the whole document to BEM blocks
2. No CSS outside of blocks
3. Independent blocks → no global CSS
resets
33. Benefits!
Drop tag names and IDs
● Faster selectors
● Re-use same semantics on any tag:
— <DIV class=”block”>
— <SPAN class=”block”>
— <TABLE class=”block”>
34. Benefits!
CSS specificity magic solved
Priority of CSS rules:
by specificity first, then by rule order
td.data { background-color: gray }
td.summary { background-color: white }
.total-summary { background-color: yellow }
<TD class="summary total-summary">
<!-- Still gray, baby :-( -->
</TD>
35. Benefits!
CSS specificity magic solved
Priority of CSS rules:
by specificity first, then by rule order
td.data { background-color: gray }
td.summary { background-color: white }
td.total-summary { background-color: yellow }
<TD class="summary total-summary">
<!-- This works, I'm yellow now -->
</TD>
36. Benefits!
Bye-bye CSS cascade?!
Only one CSS class needed to:
● style a block container
● style any element within a block
● add extras/overrides with a modifier
Doesn't it cover 90% of your styling
needs?
37. Benefits!
Bye-bye CSS cascade?!
...well, not exactly.
Example of an element affected by a block
modifier:
/* theme menu items for a dark theme */
.menu_theme_dark .menu__item
{
color: white;
background-color: darkgray;
}
46. JavaScript deals with BEM
blockObj
blockObj.setMod('active');
// <div class=”block block_active”>
blockObj.delMod('active);
// <div class=”block”>
47. JavaScript deals with BEM
BlockObj.do({
'active': function() {
// do smth when active
},
'disabled': function() {
// do something when disabled
}
});
48. JavaScript
i-bem.js framework by Yandex +
tutorial
http://bit.ly/bem-js-tutorial/
● First English docs (expect more!)
● 100% BEM-based declarative API
● Part of a larger bem-core library
53. UX + Frontend
● Live style guide
● Always up-to-date
● Prototyping mapped to code from
day one
● Designers and devs speak the
same language
● Good for making early estimates
55. File and folder structure
Flat block structure with a folder for each block.
Simple structure for BEM beginners:
/block
block.css
block.js
block.tpl
...whatever you need
56. File and folder structure
Advanced structure to expose semantics
/block
/__elem1
block__elem1.css
block__elem1.tpl
/_mod
block_mod.css
block.css
block.js
block.tpl
58. Build process and deployment
Use a build tool!
Borschik:
an open-source build tool by Yandex
Code:
https://github.com/bem/borschik
English docs:
http://bem.info/articles/borschik