BEM it!

by Max ShirshinFrontend Team Lead, Deltamethod

Consultant, Yandex

BEM it!BEM Methodology for small companies

with high expectations

Why bother?

Web development needs:

● Methodologies, not frameworks● Same entities across different

technologies● Scalability

BEM to the rescue

What is BEM?

“BEM claims that three basic entities (Blocks, Elements, and Modifiers)are enough to define the way you author HTML / CSS / JavaScript, structure codeand components, set up interactionand scale your project to buildan industry-leading service.”

What is BEM?● A methodology

“Theoretical underpinning” for methods and best practices



● Originally introduced by Yandex— www.yandex.ru (English: www.yandex.com)— 200+ Yandex services using full BEM stack (methodology + tools)— 19 million users daily audience



● Originally introduced by Yandex— www.yandex.ru (English: www.yandex.com)— 200+ Yandex services using full BEM stack (methodology + tools)— 19 million users daily audience

● Used by external projects— other services— tools / libraries

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 icon● text field label● flyout title● heading logo● menu item

What is BEM?


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


● button color● text field disabled state● flyout alignment● heading level● menu item bullet type

What is BEM?


● button color● text field disabled state● flyout alignment● heading level● menu item bullet type

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

BEM + DOM● Blocks are mapped to DOM

BEM + DOM● Blocks are mapped to DOM● Blocks/elems/mods are denoted

with CSS classes

BEM + DOM● Blocks are mapped to DOM● Blocks/elems/mods are denoted

with CSS classes● DOM nodes can be “shared”: you can mix

(block1 + block2) or (element1 + block2)on a same node

BEM markup forms a semantic overlay over the existing DOM structure.

This overlay is called a BEM tree.

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

.b-button

.b-text-field

.b-flyout

.b-heading

.b-menu


<ul class=”b-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

.b-button__icon

.b-text-field__label

.b-flyout__title

.b-heading__logo

.b-menu__item


<ul class=”b-menu”>

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

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

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

</ul>


MODIFIER

.b-button_color_blue

.b-text-field_disabled

.b-flyout_align_top

.b-heading_level_alpha

.b-menu__item_pos_first


<ul class=”b-menu b-menu_horizontal”>

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



</ul>


<ul class=”b-menu b-menu_horizontal”>

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



</ul>

Additional notes on CSS

● Page (Document) is also a block


● Page (Document) is also a block● Layouts are blocks (same rules apply)


● Page (Document) is also a block● Layouts are blocks (same rules apply)● No CSS outside of blocks


● Page (Document) is also a block● Layouts are blocks (same rules apply)● No CSS outside of blocks● No common CSS resets (block independency!)


● Page (Document) is also a block● Layouts are blocks (same rules apply)● No CSS outside of blocks● No common CSS resets (block independency!)● No “shared” styles (no need)


● Page (Document) is also a block● Layouts are blocks (same rules apply)● No CSS outside of blocks● No common CSS resets (block independency!)● No “shared” styles (no need)● DOM tree → BEM tree

Benefits!

Drop tag names and IDs

Benefits!

Drop tag names and IDs● Faster selectors● Re-use same semantic block on:

— <DIV class=”b-block”>

— <SPAN class=”b-block”>

— <TABLE class=”b-block”>

Benefits!

CSS specificity magic solved

Benefits!

CSS specificity magic solvedPriority of CSS rules:by specificity first, then by rule order

Benefits!

CSS specificity magic solvedPriority of CSS rules:by specificity first, then by rule ordertd.odd { background-color: gray }

td.even { background-color: white }

.highlighted { background-color: yellow }

<TD class="odd highlighted">



</TD>

Benefits!

CSS specificity magic solvedPriority of CSS rules:by specificity first, then by rule ordertd.odd { background-color: gray }

td.even { background-color: white }

td.highlighted { background-color: yellow }

<TD class="odd highlighted">



</TD>

Benefits!

Bye-bye CSS cascade?!

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:

/* hide labels for disabled text fields */.b-text-input_disabled .b-text-input__label{ display: none;}

HOWTO: JavaScript

JavaScript

Components → BlocksWork with BEM tree, not DOM tree

JavaScript

jQuery BEM plugin

http://xslc.org/jquery-bem/● Extends jQuery Sizzle with selectors for BEM

entities (mix them with “normal” selectors)● Add callbacks on modifiers set/change● Supports methods tied to blocks/elements

JavaScript

i-bem.js framework by Yandex + tutorial

https://github.com/toivonen/bem-js-tutorial

● First English draft docs (expect more!)● 100% BEM-based declarative API● Part of a larger bem-core library

JavaScriptTwitter Flight (used by Deltamethod)http://flightjs.github.io

● Self-contained components, 100% event-driven● Based on jQuery; AMD-friendly; BEM-friendly● Built-in syntax sugar for predefined selectors

(good for BEM tree)● [Shameless self-promo] Try Flight with Reggirt:

http://github.com/ingdir/reggirtjQuery plugin that emulates event capturing(opposite of event bubbling)

JavaScriptTwitter Flight (used by Deltamethod)http://flightjs.github.io

● Self-contained components, 100% event-driven● Based on jQuery; AMD-friendly; BEM-friendly● Built-in syntax sugar for predefined selectors

(good for BEM tree)● [Shameless self-promo] Try Flight with Reggirt:

http://github.com/ingdir/reggirtjQuery plugin that emulates event capturing(opposite of event bubbling)

Benefits!

HTML is no longer semantic.

JavaScript is.

HOWTO: Design / UX

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

UX + Frontend

● Design a style guide

UX + Frontend

● Design a style guide● Keep it up-to-date

UX + Frontend

● Design a style guide● Keep it up-to-date, always!

UX + Frontend

● Design a style guide● Keep it up-to-date, always!● Build new screens quickly

UX + Frontend

Build your block library.

The code itself is the styleguide.

Benefits!

● Prototyping mapped to code from day 1

Benefits!

● Prototyping mapped to code from day 1● Code mapped to prototypes from day 1

HOWTO: File structure

File and folder structure

Flat block structure with a folder for each block.

Simple structure for BEM beginners:

/b-block block.css block.js block.tpl ...whatever you need


Advanced structure to expose semantics

/block /css block.css block__elem1.css block__elem2.css block_mod.css /js block.js /template block.tpl block__elem1.tpl block__elem2.tpl


Advanced structure to expose semantics

/block /css block.css block__elem1.css block__elem2.css block_mod.css /js block.js /template block.tpl block__elem1.tpl block__elem2.tpl

Benefits!● Unified structure for automation● Redefinition levels: different libraries, same

structure

/common /b-block /css block.css /template block.tpl

/app1 /b-block /css block__elem1.css /js block.js /template block__elem1.tpl

+

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

[email protected] http://gplus.to/ingdir

@ingdir maxshirshin

Thank you!

Technology

BEM it!