BEM it! Introduction to BEM methodology

by Varya Stepanova@varya_en http://varya.me

BEM it!Introduction to BEM Methodology

Why bother?

There is no unified semantic modelacross different FE technologies

● HTML stands for hypertextI've heard we mostly do web apps...

● CSS offers no structure out of the boxUsually 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

BEM to the rescue

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

Some theory

What is BEM?

BLOCK– Standalone part of an interface:

● button● text field● flyout● heading● menu

What is BEM?

BLOCK– Standalone part of an interface:


– Re-usable in different contexts– Self-sufficient

What is BEM?

ELEMENT– An integral part of a block:


What is BEM?


● button — contains no elements ● text field label● flyout title● heading logo● menu item

What is BEM?


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


element:● button theme● text field editable state● flyout alignment● heading level● menu item bullet type

What is BEM?


element:● button theme● text field editable state● flyout alignment● heading level● menu item bullet type

– Multiple modifiers may co-existon a single block/element

BEM forms a semantic overlay over the existing DOM structure.

This overlay is called a BEM tree.

DOM tree → BEM tree

How does BEM map to DOM?

● Blocks/elems/mods are denotedwith CSS classes using a naming convention.

● DOM nodes can be shared:— block1 + block2 may occupy the same container;— element1 + block2 may co-exist onthe same node.

● DOM is encapsulated:— complex DOM structure may constitutea single element

BEM HOWTOfor your beloved projectwith benefits explained

HOWTO: HTML / CSS

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



<li class=”menu__item”> <a href=”/more”>Read More</a> </li>

<li class=”menu__item”> <a href=”/buy”>Buy Online</a> </li>

<li class=”menu__item”> <a href=”/buy”>Contact</a> </li>

</ul>


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



<li class=”menu__item”> <a href=”/more”>Read More</a> </li>



</ul>



<li class=”menu__item menu__item_promo”> <a href=”/more”>Read More</a> </li>



</ul>

so structure

much semantics

wow

much semantics

very codesuch 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 solvedPriority 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 solvedPriority 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;}

HOWTO:Block dependencies

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

HOWTO: JavaScript

JavaScript

Components → BlocksWork 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.

HOWTO: Design / UX

BEM is the universal languagefor 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

HOWTO: File structure

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.cssblock.cssblock.jsblock.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

Technology