Vladimir Grinenko, Yandex
Vladimir Grinenko,
28 May 2016, Frontend United
blocks/
button/
button.css
button.js
blocks/
button/
button.css
button.js
button.spec.js
blocks/
button/
button.css
button.js
button.spec.js
button.md
<body class="page">
<header class="header">
<a class="logo" href="/"></a>
</header>
<div class="main"></div>
<aside class="sidebar"></aside>
<footer class="footer">
<div class="copyright"></div>
</footer>
</body>
page
header
logo
main
sidebar
footer
copyright
{
block: 'page',
title: 'Hello, BEM',
content: [
{
block: 'header',
content: { block: 'logo' }
},
{ block: 'main' },
{ block: 'sidebar' },
{
block: 'footer',
content: { block: 'copyright' }
}
]
}
<nav class="nav">
<a class="link nav__item" href="/">Main</a>
<a class="link nav__item" href="/about/">About</a>
</nav>
{
block: 'nav',
content: [
{
block: 'link',
url: '/',
mix: { block: 'nav', elem: 'item' },
content: 'Main'
},
{
block: 'link',
url: '/about/',
mix: { block: 'nav', elem: 'item' },
content: 'About'
}
]
}
<button class="button">I'm a button</button>
<button class="button">
<font color="red">I'm a button</font>
</button>
<button class="button">I'm a button</button>
.button {
color: red;
}
<button class="button">I'm a button</button>
<div>
<button class="button">I'm another button</button>
</div>
.button {
color: red;
}
{
block: 'button',
content: 'I am button'
}
block('button')(
tag()('button')
);
[
{
block: 'button',
content: 'I am button'
},
{
content: {
block: 'button',
content: 'I am another button'
}
}
]
block('button')(
tag()('button')
);
blocks/
button/
button.css
button.js
button.spec.js
button.md
blocks/
button/
button.css
button.js
button.spec.js
button.md
button.bemhtml.js
library/button/button.css
library/button/button.css
project/button/button.css
library/button/button.css
.button {
width: 200px;
color: green;
}
project/button/button.css
library/button/button.css
.button {
width: 200px;
--color: green;--
}
project/button/button.css
.button {
color: red;
}
library/button/button.css
.button {
width: 200px;
--color: green;--
}
project/button/button.css
.button {
color: red;
}
@import library/blocks/button/button.css;
@import project/blocks/button/button.css;
library/
button/
button.bemhtml.js
project/
button/
button.bemhtml.js
library/
button/
button.bemhtml.js
block('button')(
tag()('button'),
attrs()({ 'area-role': 'button' })
);
project/
button/
button.bemhtml.js
block('button')(
tag()('input')
);
.button {
border-radius: 5px;
}
.button--disabled {
opacity: .5;
}
<button class="button"></button>
.button {
border-radius: 5px;
}
.button--disabled {
opacity: .5;
}
<button class="button button_disabled"></button>
BEMDOM.decl('button', {
});
BEMDOM.decl('button', {
onSetMod: {
}
});
BEMDOM.decl('button', {
onSetMod: {
disabled: {
}
}
});
BEMDOM.decl('button', {
onSetMod: {
disabled: {
true: { this._onDisabled(); }
}
},
_onDisabled: function() {}
});
BEMDOM.decl('button', {
onSetMod: {
disabled: {
true: { this._onDisabled(); },
'': { this._onEnabled(); }
}
},
_onDisabled: function() {},
_onEnabled: function() {}
});