bem it! introduction to bem
Post on 28-Nov-2014
379 Views
Preview:
DESCRIPTION
TRANSCRIPT
by Varya Stepanovaat SC5 Tuesday Streaming, 21.10.2014
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 frameworkSemantic 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:
● 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– An integral part of a block:
● button — contains no elements ● text field label● flyout title● heading logo● menu item
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
What is BEM?
MODIFIER– Defines property or state on a block or element:
● button● text field● flyout● heading● menu item
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
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
BEM forms a semantic overlay overthe 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 samecontainer;— 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 todenote blocks, elements andmodifiers.”
CSS naming conventions
BLOCK
.button
.text-field
.flyout
.heading
.menu
or with prefix
.b-button
.b-text-field
.b-flyout
.b-heading
.b-menu
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>
CSS naming conventions
ELEMENT
.button__icon
.text-field__label
.flyout__title
.heading__logo
.menu__item
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>
CSS naming conventions
MODIFIER
.button_theme_dark
.text-field_editable
.flyout_align_top
.heading_level_alpha
.menu__item_promo
CSS naming conventions
MODIFIER
.button--theme--dark
.text-field--editable
.flyout--align--top
.heading--level--alpha
.menu__item--promo
as you wish
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>
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>
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!
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!
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>
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>
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
Download Help Contact
headerheader
text inputtext input text inputtext input buttonbutton
menumenu
LoginLoginpassword
Main
username
Download Help Contact
_size_small _size_small _primary
LoginLoginpassword
Main
username
Download Help Contact
.header .input { font-size: 0.85em }
.header .button { background: navy }
LoginLoginpassword
Main
username
Download Help Contact
.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 technologygaps.
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
Build process and deployment
Any familiar tool can be a builder
Gulp:
Example:https://github.com/getbem/getbem.com
BEM gives answers to:
1. Where is code for this interface object?
● CSS● JS● Templates● Documentation
2.Can I remove this piece of code?
3.How do I name this new item?
Thank you SC5!@varya_en
http://varya.me
top related