bem it! introduction to bem methodology

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

Upload: varvara-stepanova

Post on 28-Nov-2014

689 views

Category:

Technology


5 download

DESCRIPTION

This presentation was given internally for the frontend developers of Booking.com

TRANSCRIPT

Page 1: BEM it! Introduction to BEM methodology

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

BEM it!Introduction to BEM Methodology

Page 2: BEM it! Introduction to BEM methodology

Why bother?

Page 3: BEM it! Introduction to BEM methodology

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.

Page 4: BEM it! Introduction to BEM methodology

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

Page 5: BEM it! Introduction to BEM methodology

BEM to the rescue

Page 6: BEM it! Introduction to BEM methodology

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.

Page 7: BEM it! Introduction to BEM methodology

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

Page 8: BEM it! Introduction to BEM methodology

Some theory

Page 9: BEM it! Introduction to BEM methodology

What is BEM?

BLOCK– Standalone part of an interface:

● button● text field● flyout● heading● menu

Page 10: BEM it! Introduction to BEM methodology

What is BEM?

BLOCK– Standalone part of an interface:

● button● text field● flyout● heading● menu

– Re-usable in different contexts– Self-sufficient

Page 11: BEM it! Introduction to BEM methodology

What is BEM?

ELEMENT– An integral part of a block:

● button● text field● flyout● heading● menu

Page 12: BEM it! Introduction to BEM methodology

What is BEM?

ELEMENT– An integral part of a block:

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

Page 13: BEM it! Introduction to BEM methodology

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

Page 14: BEM it! Introduction to BEM methodology

What is BEM?

MODIFIER– Defines property or state on a block or

element:● button● text field● flyout● heading● menu item

Page 15: BEM it! Introduction to BEM methodology

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

Page 16: BEM it! Introduction to BEM methodology

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-existon a single block/element

Page 17: BEM it! Introduction to BEM methodology

BEM forms a semantic overlay over the existing DOM structure.

This overlay is called a BEM tree.

Page 18: BEM it! Introduction to BEM methodology

DOM tree → BEM tree

Page 19: BEM it! Introduction to BEM methodology

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

Page 20: BEM it! Introduction to BEM methodology

BEM HOWTOfor your beloved projectwith benefits explained

Page 21: BEM it! Introduction to BEM methodology

HOWTO: HTML / CSS

Page 22: BEM it! Introduction to BEM methodology

CSS naming conventions

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

Page 23: BEM it! Introduction to BEM methodology

CSS naming conventions

BLOCK

.button

.text-field

.flyout

.heading

.menu

or with prefix

.b-button

.b-text-field

.b-flyout

.b-heading

.b-menu

Page 24: BEM it! Introduction to BEM methodology

CSS naming conventions

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

Page 25: BEM it! Introduction to BEM methodology

CSS naming conventions

ELEMENT

.button__icon

.text-field__label

.flyout__title

.heading__logo

.menu__item

Page 26: BEM it! Introduction to BEM methodology

CSS naming conventions

<ul class=”menu”>

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

Page 27: BEM it! Introduction to BEM methodology

CSS naming conventions

MODIFIER

.button_theme_dark

.text-field_editable

.flyout_align_top

.heading_level_alpha

.menu__item_promo

Page 28: BEM it! Introduction to BEM methodology

CSS naming conventions

MODIFIER

.button--theme--dark

.text-field--editable

.flyout--align--top

.heading--level--alpha

.menu__item--promo

as you wish

Page 29: BEM it! Introduction to BEM methodology

CSS naming conventions

<ul class=”menu”>

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

Page 30: BEM it! Introduction to BEM methodology

CSS naming conventions

<ul class=”menu”>

<li class=”menu__item menu__item_promo”> <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>

Page 31: BEM it! Introduction to BEM methodology

so structure

much semantics

wow

much semantics

very codesuch frontend

Page 32: BEM it! Introduction to BEM methodology

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

Page 33: BEM it! Introduction to BEM methodology

Benefits!

Drop tag names and IDs● Faster selectors● Re-use same semantics on any tag:

— <DIV class=”block”>

— <SPAN class=”block”>

— <TABLE class=”block”>

Page 34: BEM it! Introduction to BEM methodology

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

<!-- Still gray, baby :-( -->

</TD>

Page 35: BEM it! Introduction to BEM methodology

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

<!-- This works, I'm yellow now -->

</TD>

Page 36: BEM it! Introduction to BEM methodology

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?

Page 37: BEM it! Introduction to BEM methodology

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

Page 38: BEM it! Introduction to BEM methodology

HOWTO:Block dependencies

Page 39: BEM it! Introduction to BEM methodology

LoginLoginpassword

Main

username

Download Help Contact

Page 40: BEM it! Introduction to BEM methodology

LoginLoginpassword

Main

username

Download Help Contact

headerheader

text inputtext input text inputtext input buttonbutton

menumenu

Page 41: BEM it! Introduction to BEM methodology

LoginLoginpassword

Main

username

Download Help Contact

_size_small _size_small _primary

Page 42: BEM it! Introduction to BEM methodology

LoginLoginpassword

Main

username

Download Help Contact

.header .input { font-size: 0.85em }

.header .button { background: navy }

Page 43: BEM it! Introduction to BEM methodology

LoginLoginpassword

Main

username

Download Help Contact

.header .input { font-size: 0.85em }

.header .button { background: navy } !

Page 44: BEM it! Introduction to BEM methodology

HOWTO: JavaScript

Page 45: BEM it! Introduction to BEM methodology

JavaScript

Components → BlocksWork with BEM tree, not DOM tree

Page 46: BEM it! Introduction to BEM methodology

JavaScript deals with BEM

blockObj

blockObj.setMod('active');

// <div class=”block block_active”>blockObj.delMod('active);

// <div class=”block”>

Page 47: BEM it! Introduction to BEM methodology

JavaScript deals with BEM

BlockObj.do({

'active': function() {

// do smth when active

},

'disabled': function() {

// do something when disabled

}

});

Page 48: BEM it! Introduction to BEM methodology

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

Page 49: BEM it! Introduction to BEM methodology

HTML is no longer semantic.

JavaScript is.

Page 50: BEM it! Introduction to BEM methodology

HOWTO: Design / UX

Page 51: BEM it! Introduction to BEM methodology

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

Page 52: BEM it! Introduction to BEM methodology

Build your block library.

The code itself is the styleguide.

Page 53: BEM it! Introduction to BEM methodology

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

Page 54: BEM it! Introduction to BEM methodology

HOWTO: File structure

Page 55: BEM it! Introduction to BEM methodology

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

Page 56: BEM it! Introduction to BEM methodology

File and folder structure

Advanced structure to expose semantics

/block /__elem1 block__elem1.css block__elem1.tpl /_mod block_mod.cssblock.cssblock.jsblock.tpl

Page 57: BEM it! Introduction to BEM methodology

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 */

Page 58: BEM it! Introduction to BEM methodology

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

Page 59: BEM it! Introduction to BEM methodology

http://bem.info

Page 60: BEM it! Introduction to BEM methodology

Thank you Booking!@varya_en

http://varya.me