BEM for Ecentia

Vladimir Grinenko
July 8

Vladimir

4 years at Yandex
Head of BEM Development Division at Yandex
HTML/CSS/JS/BEM 24/7
tadatuta@yandex-team.ru
@tadatuta
github.com/tadatuta

Agenda

BEM you know
BEM we created
How to start?

BEM you know

Where pain comes from

Support someone else's code

Your own in a month
#foot div div *

Where pain comes from

Support someone's else code
Refactoring
Reuse

Copy/paste doesn't work
Hard to tell what to copy
Useless code
Update is a nightmare

Where pain comes from

Support someone's else code
Refactoring
Reuse
A lot of different frameworks & libs
No dependency management

CSS has no scoping

a { /* Affects all the links */
color: red;
}
ul li a { /* Affects all the links in lists */
color: green;
}

Specificity conflicts

div#test span { color: green }
span { color: red }
div span { color: blue }

How to overwrite

<div class="sidebar">Left floated sidebar</div>

.sidebar { /* Does it redefine `div.sidebar`?! */
float: right;
}

body .sidebar { /* Overwrites 'div.sidebar {}' */
float: left;
}

How to overwrite

.navbar-inverse .navbar-nav>li>a { color: #999; }

#home-menu-container #home-menu li a { color: red; }

body #home-menu ul li a { color: blue !important; }

Non-deterministic matches

#content div div {
float: left;
}

Removing unused code

100 pages in projects

.person div a {
color: pink;
}

Is it safe to remove this code?

BEM Methodology

Block
Elem
Modifier

Block

Block, elements

Block, elements, modifiers

cat_type_red

cat_state_wet

Naming convention

Block__Element_Modifier

Block__Element_Mod_ModValue

Some of BEM principles

Map document to BEM blocks — no tag or id selectors
No CSS outside of blocks
Independent blocks → no global reset
Avoid cascade

Why no ids?

#menu {
list-style: none;
}

Why no selectors on tags?

#content div div {
color: red;
}

Why avoiding cascade in CSS? o_O

.menu .item {
/* styles for element */
}

Why avoiding cascade in CSS? o_O

How?

Why no CSS outside of a block?

.menu__item.current { /* combined selector */
background-color: red;
}

Hard to override

.menu__item.current {
background: white;
}

.menu_dark .menu__item {
background: black; /* Still white, baby */
}

What we've got so far

Independent blocks to reuse
Confidence they won't ruin something
Possibility to easily override styles
Self-documented code

BEM we created

Library time!

library/
	block1.css
project/
	blocks/
		block1.css
	project.css
		@import(../library/block1.css);
		@import(blocks/block1.css);

File system

prj/
    blocks/
        header/
            header.css
            header.js
            header.tmpl
            header.svg
            header.md

File system

project/
    blocks/
        header/
            _theme/
				header_theme_simple.css
				header_theme_full.css
            __logo/
                header__logo.css

BEM tree

<ul class="menu">
    <li class="menu__item">item</li>
    <li class="menu__item menu__item_state_current">item2</li>
</ul>


{
    block: 'menu',
    content: [
        {
            elem: 'item',
            content: 'item1'
        },
        {
            elem: 'item',
            elemMods: { state: 'current' },
            content: 'item2'
        }
    ]
}

BEM tree

Development in terms of blocks, elements, modifiers
Building just what was used
Absolute freedom for libs devs

Old school

<div width=120 height=200></div>

Old school

<div width=120 height=200></div>
<div width=120 height=200></div>
<div width=120 height=200></div>

Old school

<div width=120 height=200>
	<div width=40 height=40>
		<div width=34 height=34></div>
	</div>
</div>
<div width=120 height=200></div>

Declarative CSS

.block
{
    width: 120px;
    height: 200px;
}

Declarative CSS

.block
{
    width: 120px;
    height: 200px;
}

.block
{
    height: 220px;
    background: red;
}

Old school

<div class="block" onclick="doSomething()"></div>

Semi-declarative JS

$('.block').doSomething();

Semi-declarative JS

<div class="block"></div>
<div class="another-block"></div>


$('.block').doSomething();
$('.another-block').switchClass('another-block', 'block');

Truly declarative JS made BEM way

BEM.decl('block', {
	onSetMod: {
	    modifier1: {
	        value1: function() {
	            this.onM1V1();
	        },
	        '': function() {
	            this.onRemoveM1();
	        }
	    }
	}
});

Truly declarative JS made BEM way

BEM.decl('block', {
	onSetMod: {
	    modifier1: {
	        value1: function() {
	            this.onM1V1();
	        },
	        '': function() {
	            this.onRemoveM1();
	        }
	    }
	}
});

Truly declarative JS made BEM way

BEM.decl('block', {
	onSetMod: {
	    modifier1: {
	        value1: function() {
	            this.onM1V1();
        ...
});

BEM.decl('block', {
	onSetMod: {
	    modifier1: {
	        value1: function() {
	            this.doSomethingElse();
	    ...
});

Templates

var ctx = { temperature: 42 };

<div class="weather">
    <div class="weather__inner">
        {{temperature}}
    </div>
</div>


<div class="weather">
    <div class="weather__inner">
        42
    </div>
</div>

BEM templates

var ctx = { temperature: 42 };
var view = { block: 'weather' };

block('weather')(
    tag()('ul'),
    content()({
        elem: 'inner',
        content: ctx.temperature
    }),
    elem('inner')(
        tag()('li')
    )
);

BEM templates

<ul class="weather">
    <li class="weather__inner">
        42
    </li>
</ul>

Web components

Web components

<audio controls src="campjs.mp3"></audio>

Semantic abstraction messed with non-semantic tags
All techs together
Hidden inside with Shadow DOM which lacks browser support

BEM blocks

{ block: 'audio', hasControls: true, src: 'campjs.mp3' }

Semantic abstraction with BEMTREE
All techs together in same folder
Hidden by convention which is supported in any browser
Bundled inside one file for each tech to avoid extra requests

One BEM to rule 'em all

How will your development process
look like?

Abstraction on DOM — think in terms of blocks
Blocks are also mapped on a file system
Everything is declarative
Libraries with ready-made blocks

How to start?

With methodology

Easy
Long live architecture scaling
Sense of how to refactor your CSS
Read everything at bem.info/method

With the platform

that has

JS framework
Template engine
Libraries
Tools
Taste via git clone https://github.com/bem/project-stub.git

bem.info

bem.info/forum

BEM for Ecentia

Vladimir GrinenkoJuly 8

Vladimir

Agenda

BEM you know

Where pain comes from

Where pain comes from

Where pain comes from

CSS has no scoping

Specificity conflicts

How to overwrite

How to overwrite

Non-deterministic matches

Removing unused code

BEM Methodology

Block

Block, elements

Block, elements, modifiers

cat_type_red

cat_state_wet

Naming convention

Some of BEM principles

Why no ids?

Why no selectors on tags?

Why avoiding cascade in CSS? o_O

Why avoiding cascade in CSS? o_O

How?

Why no CSS outside of a block?

Hard to override

What we've got so far

BEM we created

Library time!

File system

File system

BEM tree

BEM tree

Old school

Old school

Old school

Declarative CSS

Declarative CSS

Old school

Semi-declarative JS

Semi-declarative JS

Truly declarative JS made BEM way

Truly declarative JS made BEM way

Truly declarative JS made BEM way

Templates

BEM templates

BEM templates

Web components

Web components

BEM blocks

One BEM to rule 'em all

How will your development processlook like?

How to start?

With methodology

With the platform

bem.info

bem.info/forum

BEM

Block__Element_Modifier

Links about BEM

Links

Thanks to Varya Stepanova

Vladimir Grinenko
July 8

How will your development process
look like?