bem it! for brandwatch
DESCRIPTION
BEM Methodology basics explained. A presentation made for Brandwatch company in Berlin.TRANSCRIPT
![Page 1: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/1.jpg)
by Max ShirshinFrontend Team Lead, Deltamethod
Consultant, Yandex
BEM it!Introduction to BEM Methodology
![Page 2: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/2.jpg)
Why bother?
![Page 3: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/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! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/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! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/5.jpg)
BEM to the rescue
![Page 6: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/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 codeand components, set up interactionand scale your project to buildan industry-leading service.
![Page 7: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/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! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/8.jpg)
Some theory
![Page 9: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/9.jpg)
What is BEM?
BLOCK– Standalone part of an interface:
● button● text field● flyout● heading● menu
![Page 10: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/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! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/11.jpg)
What is BEM?
ELEMENT– An integral part of a block:
● button● text field● flyout● heading● menu
![Page 12: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/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! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/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! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/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! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/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! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/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! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/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! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/18.jpg)
DOM tree BEM tree→
![Page 19: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/19.jpg)
How does BEM map to DOM?● Blocks/elems/mods are denoted
with 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! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/20.jpg)
BEM HOWTOfor your beloved projectwith benefits explained
![Page 21: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/21.jpg)
HOWTO: HTML / CSS
![Page 22: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/22.jpg)
CSS naming conventions
“BEM uses CSS class names to denote blocks, elements and modifiers.”
![Page 23: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/23.jpg)
CSS naming conventions
BLOCK
.b-button
.b-text-field
.b-flyout
.b-heading
.b-menu
![Page 24: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/24.jpg)
CSS naming conventions
<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>
![Page 25: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/25.jpg)
CSS naming conventions
ELEMENT
.b-button__icon
.b-text-field__label
.b-flyout__title
.b-heading__logo
.b-menu__item
![Page 26: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/26.jpg)
CSS naming conventions
<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>
![Page 27: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/27.jpg)
CSS naming conventions
MODIFIER
.b-button_theme_dark
.b-text-field_editable
.b-flyout_align_top
.b-heading_level_alpha
.b-menu__item_promo
![Page 28: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/28.jpg)
CSS naming conventions
<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>
![Page 29: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/29.jpg)
CSS naming conventions
<ul class=”b-menu”>
<li class=”b-menu__item b-menu__item_promo”> <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>
![Page 30: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/30.jpg)
so structure
much semantics
wow
much semantics
very codesuch frontend
![Page 31: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/31.jpg)
BEM CSS: best practices
1. Map the whole document to BEM blocks
2. No CSS outside of blocks
3. Independent blocks → no CSS resets
![Page 32: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/32.jpg)
Benefits!
Drop tag names and IDs● Faster selectors● Re-use same semantics on any tag:
— <DIV class=”b-block”>
— <SPAN class=”b-block”>
— <TABLE class=”b-block”>
![Page 33: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/33.jpg)
Benefits!
CSS specificity magic solvedPriority of CSS rules:by specificity first, then by rule ordertd.data { background-color: gray }
td.summary { background-color: white }
.total-summary { background-color: yellow }
<TD class="summary total-summary">
<!-- Still gray, baby :-( -->
</TD>
![Page 34: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/34.jpg)
Benefits!
CSS specificity magic solvedPriority of CSS rules:by specificity first, then by rule ordertd.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 35: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/35.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 36: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/36.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 */.b-menu_theme_dark .b-menu__item{ color: white; background-color: darkgray;}
![Page 37: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/37.jpg)
HOWTO:Block dependencies
![Page 38: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/38.jpg)
LoginLoginpassword
Main
username
Download Help Contact
![Page 39: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/39.jpg)
LoginLoginpassword
Main
username
Download Help Contact
headerheader
text inputtext input text inputtext input buttonbutton
menumenu
![Page 40: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/40.jpg)
LoginLoginpassword
Main
username
Download Help Contact
_size_small _size_small _primary
![Page 41: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/41.jpg)
LoginLoginpassword
Main
username
Download Help Contact
.b-header .b-input { font-size: 0.85em }
.b-header .b-button { background: navy }
![Page 42: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/42.jpg)
LoginLoginpassword
Main
username
Download Help Contact
.b-header .b-input { font-size: 0.85em }
.b-header .b-button { background: navy } !
![Page 43: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/43.jpg)
HOWTO: JavaScript
![Page 44: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/44.jpg)
JavaScript
Components → BlocksWork with BEM tree, not DOM tree
![Page 45: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/45.jpg)
JavaScript
jQuery BEM helpers
https://github.com/ingdir/jquery-bemhelpers
● Helper methods to work with BEM modifiers● Callbacks on modifiers set/change
![Page 46: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/46.jpg)
JavaScript
jQuery BEM helpers
// find a block with jQuery selectorsvar $block = component.find('div');// assign a callback to a modifier change$block.onSetMod('b-block', { status: { loaded: myCallback } });/* ... */$block.setMod('b-block', 'status', 'loaded');// 1. adds a CSS class b-block_status_loaded// 2. runs myCallback()
![Page 47: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/47.jpg)
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
![Page 48: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/48.jpg)
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
![Page 49: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/49.jpg)
HTML is no longer semantic.
JavaScript is.
![Page 50: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/50.jpg)
HOWTO: Design / UX
![Page 51: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/51.jpg)
BEM is the universal languagefor developers and designers,the bridge across technology gaps.
![Page 52: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/52.jpg)
Build your block library.
The code itself is the styleguide.
![Page 53: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/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! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/54.jpg)
HOWTO: File structure
![Page 55: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/55.jpg)
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
![Page 56: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/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! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/57.jpg)
Redefinition Levels/common
/block /__elem1 block__elem1.css block__elem1.tpl /_mod block_mod.cssblock.cssblock.jsblock.tpl
/my-page
/block /__elem1 block__elem1.css /_mod2 block_mod2.css
![Page 58: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/58.jpg)
Redefinition Levels/common
/block /__elem1 block__elem1.css block__elem1.tpl /_mod block_mod.cssblock.cssblock.jsblock.tpl
/my-page
/block /__elem1 block__elem1.css /_mod2 block_mod2.css+
![Page 59: BEM It! for Brandwatch](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559427d41a28abf5408b45c6/html5/thumbnails/59.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