BEM it! Introduction to BEM methodology

by Varya Stepanova
@varya_en http://varya.me
BEM it!
Introduction to BEM Methodology

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.

● ≈ 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

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.

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

What is BEM?
BLOCK
– Standalone part of an interface:
● button
● text field
● flyout
● heading
● menu

What is BEM?
BLOCK
– Standalone part of an interface:
● button
● text field
● flyout
● heading
● menu
– Re-usable in different contexts
– Self-sufficient

What is BEM?
ELEMENT
– An integral part of a block:
● button
● text field
● flyout
● heading
● menu

What is BEM?
ELEMENT
● button — contains no elements
● text field label
● flyout title
● heading logo
● menu item

What is BEM?
ELEMENT
● 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

What is BEM?
MODIFIER
– Defines property or state on a block or
element:
● button
● text field
● flyout
● heading
● menu item

What is BEM?
MODIFIER
element:
● button theme
● text field editable state
● flyout alignment
● heading level
● menu item bullet type

What is BEM?
MODIFIER
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

BEM forms a semantic overlay over
the existing DOM structure.
This overlay is called a BEM tree.

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

BEM HOWTO
for your beloved project
with benefits explained

CSS naming conventions
“BEM uses CSS class names to
denote blocks, elements and
modifiers.”

BLOCK
.button
.text-field
.flyout
.heading
.menu
or with prefix
.b-button
.b-text-field
.b-flyout
.b-heading
.b-menu

<ul class=”menu”>
<li>
<a href=”/more”>Read More</a>
</li>
<li>
<a href=”/buy”>Buy Online</a>
</li>
<li>
<a href=”/buy”>Contact</a>
</li>
</ul>

ELEMENT
.button__icon
.text-field__label
.flyout__title
.heading__logo
.menu__item

MODIFIER
.button_theme_dark
.text-field_editable
.flyout_align_top
.heading_level_alpha
.menu__item_promo

MODIFIER
.button--theme--dark
.text-field--editable
.flyout--align--top
.heading--level--alpha
.menu__item--promo
as you wish

so structure
much semantics
wow
much semantics
very code
such frontend

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

Benefits!
Drop tag names and IDs
● Faster selectors
● Re-use same semantics on any tag:
— <DIV class=”block”>
— <SPAN class=”block”>
— <TABLE class=”block”>

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">

</TD>

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">

</TD>

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?

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;
}

LoginLoginpassword
Main
username
Download Help Contact

LoginLoginpassword
Main
username
headerheader
text inputtext input text inputtext input buttonbutton
menumenu

LoginLoginpassword
Main
username
_size_small _size_small _primary

LoginLoginpassword
Main
username
.header .input { font-size: 0.85em }
.header .button { background: navy }

LoginLoginpassword
Main
username
.header .input { font-size: 0.85em }
.header .button { background: navy } !

JavaScript
Components → Blocks
Work with BEM tree, not DOM tree

JavaScript deals with BEM
blockObj
blockObj.setMod('active');
// <div class=”block block_active”>
blockObj.delMod('active);
// <div class=”block”>

JavaScript deals with BEM
BlockObj.do({
'active': function() {
// do smth when active
},
'disabled': function() {
// do something when disabled
}
});

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

HTML is no longer semantic.
JavaScript is.

BEM is the universal language
for developers and designers,
the bridge across technology
gaps.

Build your block library.
The code itself is the styleguide.

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

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

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

Bundles for browsers
page.css:
@import url(“header/header.css”);
@import url(“button/button.css”);
@import url(“button/button_promo.css”);
page.js:
/* include: button.js */
/* include: login.js */

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

http://bem.info

Thank you Booking!
@varya_en
http://varya.me

BEM it! Introduction to BEM methodology

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to BEM it! Introduction to BEM methodology (20)

More from Varya Stepanova (9)

Recently uploaded (20)

BEM it! Introduction to BEM methodology