bem it! introduction to bem methodology
DESCRIPTION
This presentation was given internally for the frontend developers of Booking.comTRANSCRIPT
![Page 1: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/1.jpg)
by Varya Stepanova@varya_en http://varya.me
BEM it!Introduction to BEM Methodology
![Page 2: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/2.jpg)
Why bother?
![Page 3: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/4.jpg)
● ≈ 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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/5.jpg)
BEM to the rescue
![Page 6: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/6.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/7.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/8.jpg)
Some theory
![Page 9: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/9.jpg)
What is BEM?
BLOCK– Standalone part of an interface:
● button● text field● flyout● heading● menu
![Page 10: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/11.jpg)
What is BEM?
ELEMENT– An integral part of a block:
● button● text field● flyout● heading● menu
![Page 12: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/12.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/13.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/14.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/16.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/17.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/18.jpg)
DOM tree → BEM tree
![Page 19: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/19.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/20.jpg)
BEM HOWTOfor your beloved projectwith benefits explained
![Page 21: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/21.jpg)
HOWTO: HTML / CSS
![Page 22: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/22.jpg)
CSS naming conventions
“BEM uses CSS class names to denote blocks, elements and modifiers.”
![Page 23: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/23.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/24.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/25.jpg)
CSS naming conventions
ELEMENT
.button__icon
.text-field__label
.flyout__title
.heading__logo
.menu__item
![Page 26: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/26.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/27.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/28.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/29.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/30.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/31.jpg)
so structure
much semantics
wow
much semantics
very codesuch frontend
![Page 32: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/32.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/33.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/34.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/35.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/36.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/37.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/38.jpg)
HOWTO:Block dependencies
![Page 39: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/39.jpg)
LoginLoginpassword
Main
username
Download Help Contact
![Page 40: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/40.jpg)
LoginLoginpassword
Main
username
Download Help Contact
headerheader
text inputtext input text inputtext input buttonbutton
menumenu
![Page 41: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/41.jpg)
LoginLoginpassword
Main
username
Download Help Contact
_size_small _size_small _primary
![Page 42: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/42.jpg)
LoginLoginpassword
Main
username
Download Help Contact
.header .input { font-size: 0.85em }
.header .button { background: navy }
![Page 43: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/43.jpg)
LoginLoginpassword
Main
username
Download Help Contact
.header .input { font-size: 0.85em }
.header .button { background: navy } !
![Page 44: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/44.jpg)
HOWTO: JavaScript
![Page 45: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/45.jpg)
JavaScript
Components → BlocksWork with BEM tree, not DOM tree
![Page 46: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/46.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/47.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/48.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/49.jpg)
HTML is no longer semantic.
JavaScript is.
![Page 50: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/50.jpg)
HOWTO: Design / UX
![Page 51: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/51.jpg)
BEM is the universal languagefor developers and designers,the bridge across technology gaps.
![Page 52: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/52.jpg)
Build your block library.
The code itself is the styleguide.
![Page 53: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/53.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/54.jpg)
HOWTO: File structure
![Page 55: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/55.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/56.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/57.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/58.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/59.jpg)
http://bem.info
![Page 60: BEM it! Introduction to BEM methodology](https://reader033.vdocuments.site/reader033/viewer/2022051208/5478ea64b4af9fb9158b46fc/html5/thumbnails/60.jpg)
Thank you Booking!@varya_en
http://varya.me