Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
<span class="header__column header__column_position_left">
<div class="logo">
HUNTERBOAT
</div>
</span>
<div class="person">
<div class="person__photo-wrap">
<img class="person__photo" src="/images/com_fwgallery/files/975/team1.png" alt="Александр Поболь">
</div>
<div class="person__title">
Александр Поболь
</div>
<div class="person__description">
Генеральный директор. Техник высшей категории. Награждён почётными грамотами и дипломами, отмечен грамотой министра здравоохранения.
<br>
Опыт работы с 1984 г.
</div>
<div class="person__link-to-all">
<a class="b-link" href="http://nautilusdent.ru/pobol-aleksandr.html">
Все работы
</a>
</div>
</div>
<div class="user-thumb">
<div class="user-thumb__name"></div>
</div>
Потому что единственная и первоочередная задача БЭМа — это инкапсуляция классов.
DOM.decl('my-block', {
onSetMod : {
'js' : {
'inited': function() {
this.bindTo('click', function(e) {
var domElem = $(e.currentTarget); // DOM-элемент, на котором слушается событие
// в данном случае то же, что this.domElem
this.setMod('size', 'big');
});
}
}
}
});
directive('my-block', function(node){
$(node).on('click', function(e){
$(node).attr('size', 'big')
})
})
Мне вот прямо хочется взять и дать ссылку на мой cornerJS
через ~3 года 95% браузеров как минимум с полифиллом будут поддерживать технологию
полифиллприложите пожалуйста.
{
block: 'b-foo',
content: [
{
elem: 'bar'
},
{
elem: 'container',
content: 'Hello World'
}
]
}
%b-foo
$bar
$container
' Hello World
{
block: 'b-foo',
content: [
{
elem: 'bar'
},
{
elem: 'container',
content: (function() {
var contentVariants = ['Hello World', 'Hello Mars', 'Hello, Futurama'];
return contentVariants[Math.floor(Math.random() * contentVariants.length)];
}())
}
]
}
Вот только почему вы не обращаете внимания что я пишу именно про синтаксис, что он избыточен, неудобен, не нагляден
не типизирует входы/выходы и не даёт нам никаких статических гарантий.
Плохо ли использовать js функции в коде шаблонизатора? Безусловно плохо, вы превращаете декларитивный стиль, ради которого вся эта шумиха с БЭМом и затевалась, в обычные императивные js подпрограммы.
Я бы начал с синтаксиса, потом переписал бы декларацию стилей из css прямо в BEMJSON через миксины a la SASS/compass
Поясните пожалуйста, я не очень понял, если приведете пример, буду вдвойне благодарен.
{ title: "foo",
body: "bar" }
{ name: "foo",
content: "bar" }
BEMJSON про струтуру блока, за оформление отвечает старый добрый CSS блока, не нужно смешивать структуру и оформление — это как раз хорошее, что есть в HTML+CSS. Или я вас не так понял?
%user-small
style:
relative
size 256x64
inline-block
padding 0 0 0 64px
$icon
style:
bg-image 'user.png'
absolute-position 5px 5px 0 0
size 32x32
$name
style:
inline-block
font 14pt/32px
&content
{
block: 'b-user-small'
content: [
{
elem: 'icon'
},
{
elem: 'name'
content: this.ctx.content
}
]
}
.b-user-small
{
position: relative;
height: 64px;
width: 256px;
display: inline-block;
padding: 0 0 0 64px;
}
.b-user-small__icon
{
background: url('user.png');
position: absolute;
left: 5px;
top: 5px;
height: 32px;
width: 32px;
}
.b-user-small__name
{
display: inline-block;
font-size: 14pt;
line-height: 32px;
}
<div class="some-container" include="blocks/articles"/>
Основная проблема ярых противников БЭМа в том, что они сами нигде не декларируют, не документируют свои соглашения по коду, не расписывают на примерах, не делают тестовые страницы с отдельными функциональностями.
В чем проблема «проблемы БЭМ'а»?