В методологии БЭМ главным краеугольным камнем является то что нету наследования. Я начал пробовать собирать БЭМ, с руковоства -> Собираем статическую страницу на БЭМ Сделав пункт - "Описание страницы в BEMJSON-файле" страничка собралась, запустилась по адресу - http://localhost:8080/desktop.bundles/hello/hello.html Здорово! =) Я открыл инспектор кода, и увидел 0_0 наследование - .input_theme_islands .input__box { position: relative; display: block; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } http://screencast.com/t/wI61OvqVln6F
До этого я использовал только саму методологию БЭМ . Т.е. описывал страничку в блоках. Блоки состояли из элементов, блок и элемент могли иметь свои модификаторы. Все стили блоков лежали в одном css файле. Я решил пойти дальше и начал читать раздел - " Методология ->организация файловой системы. " В этом разделе дочитав до пункта https://ru.bem.info/method/filesystem/#Элементы-и-модификаторы-в-отдельных-директориях я решил попробовать его на практике(хранить блоки элементы модификаторы в отдельных папках). Внизу есть ссылка на инструмент для сборки bem-tools, но мне не совсем ясно как его использовать. Т.е. у меня стоит задача.
- Вынести блоки, элементы модификаторы в отдельные папки.
- научится собирать это все хозяйство bem-tools
Спасибо за внимание.
Друзья, есть вопрос. Возможно ли команде bem server передать интерфейс/IP, на котором он должен подниматься?
Как при на событии одного блока, повлиять/повесить модификатор на блок в другой ветке документа? Ведь это должно быть возможным и кажется ответ где-то рядом.. Если у нас например:
modules.define('block1', ['i-bem__dom', 'jquery'], function(provide, BEMDOM, $) {
{
live: function() {
this.liveBindTo('block1-1', 'click', function( ) {
// как тут правильно обратиться к другому элементу вне блока?
// (block2).setMod('block2-1','current-block1-1',true);
// предполагал что-то вроде следующего, но скорей всего тут что-то совстем не так
this.findBlockOutside('block2').setMod('switched'); // Ошибка: this.findBlockOutside('block2') возвращает null, видать не дотягивается область видимости.
});
}
}
});
Появилась мысль, вешать модификаторы через общий документ (
) page.js. С первого раза почему .js в родительском файле совсем не заработал и ошибок не выдал, решил искать другой метод, не работает значит не надо :)Вычитал про наследование. Выполнил попытку следующего типа:
modules.define('bloack2', ['i-bem__dom'], function(provide, BEMDOM) {
provide(BEMDOM.decl(this.name, {}));
});
modules.define('block1', ['i-bem__dom'], function(provide, BEMDOM) {
provide(BEMDOM.decl(this.name, {
...
onSetMod : {
'switched' : function(){
this.__base.apply(this).setMod( 'visible', true); // Ошибка: TypeError: undefined has no properties
}
},
...
}));
});
Добился результата следующим методом, но знаю что он не рекомендуем:
onSetMod : {
'switched' : function(){
$('.block2').bem('block2-1').setMod( 'visible', true);
}
},
Помогите пожалуйста разобрать и сделать правильно.
Подскажите как настроить enb на сборку динамического сайта, так, чтобы bemdecl не генерировался при каждой сборке. Хочу руками прописать туда нужны блоки.
Добре!
Вопрос возник в работе.
Есть у меня бандлы, результат генерации которых нужен при сборке других бандлов.
Первые у меня запускаются по команде enb make -m first, вторые по enb make -m second.
Вопрос, как сделать так чтобы запускать билд с командой сервера?
enb make -m first -m second
Последовательность важна!
Собрал на bem статичную страницу, теперь нужно добавить динамику используя БД. Что читать? и хотел начать с простого - с блока select, нужно его заполнить данными из БД. Есть ли у блока backend часть?
Начал изучать expressjs хочу выкинуть jade и запихнуть bemtree + bh. Можете подсказать как это сделать? Смотрел видео и статью по sssr там более менее понятно, но мне хотелось бы не менять всю структуру серверной части под БЭМ, (иначе я в туториалах по express запутаюсь) а просто использовать его в качестве шаблонизатора.
// именованные типы бандлов (хз для чего)
describe('page', 'pages/*', function (node) {
addTech('blabla', {yolo swag params}); // как обычно
addTargets(['html', 'css', '?.min.css']);
// если ? не указан и нет точки — достраиваем до "?.css"
afterTargetReady('?.min.css', function (target) {
cp(target.path, releasePath + '/' + target.relativePath);
});
afterEach(function () {
// запускаем после завершения обработки всех таргетов
sed(node.targets['css'], 's/script/script yolo="swag"/g', '-i'); // условно
});
});
after(function () {
// finalizing build
// cd release; cap deploy?
});
Или даже так:
describe('page', {
path: 'pages/*',
yoloswag: 'yes'
}, function (node) {
// ...
});
При этом технологии можно отдавать списом сервисов по тиму architect (в package.json, например, или отдельном файле), в запускалке можно сделать так, чтобы она смотрела все bem-* пакеты, установленные в node_modules, и собирала сама оттуда технологии. Если какой-то пакет будет предоставлять расширения — он их может просто проксировать через себя.
При этом можно таким же параметром передать describe('all-bundles', { include: '*.bundles/*, exclude: '*.bundles/merged', к вопросу о merged бандле, и после этого в merged бандле указать, что он {include: '*.bundles/merged', dependsOn: 'all-bundles'}. Кажется, что и просто, и понятно. При этом в технологии эта информация о бандле (и его "конфигах") тоже попадет.
/cc @blond @tadatuta @vithar @veged
Подскажите, пожалуйста, не нашел про это ничего. В верстке, как именовать блоки, элементы и модификаторы - все понятно. А что говорит БЭМ на счет именования названий анимаций(keyframes анимаций)? Если не использовать никакой привязки названия анимации к блоку или элементу, в котором анимация должна использоваться, то будет существовать вероятность, что где-то ещё в проекте есть название анимации с таким же именем.
Ребят, подскажите как правильно убрать его вообще с проекта. Чтобы даже духу не было ) Без него только bem-components не будет работать?
<div class="people">
<div class="people_container">
<div class="people__avatar">No found</div>
<div class="people__name">Chel Bez</div>
</div>
</div>
{
block: 'people',
content: [
{ elem: 'avatar', content: 'No found'},
{ elem: 'name', content: 'Chel Bez'}
]
}
Возможно ли средствами BEMHTML сделать обертку div.people_container
Привет , ребята!Я немного разобрала бэм, но столкнулась с проблемой такой. 1)Я свои картинки в bemjson, подключаю из папки img. У меня получается в теге идет следующее
<img src="/img/1.jpg"> это уже на выходе.
И после сборки , мне приходиться убирать слэш в ручную , есть ли способ этого избегать, чтобы не лезть и не исправлять это? Тоже самое , касается и картинок подключаемые в css. Можно как-то после команды make , менять относительные пути , на правильные, чтобы он убирал этот слэш. Я всегда работала на gulp , не много не привычно из каждого bundls собирать html в ручную и кидать в папку build. Это все, спасибочки.
Помогите пожалуйста подключить блок, ув. @Guria, (https://github.com/Guria/bem-drawer-menu. ) Вроде бы все элементы инициализировал, но браузер отвечает "SyntaxError: missing ) after argument list", ссылаясь на нало функции:
modules.define('menu', ['jquery', 'keyboard__codes'], function(provide, $, keyCodes, Menu) {
provide(Menu.decl({ modName : 'fix', modVal : 'scroll' }
{
...
Что делаю нет так.. ? Судя по ошибке какого-то аргумента не хватает. Блоки в common.blocks добавил kg-menu и kg-glyph, В bemjson блок меню создал по примеру из описания.
Рома @sbmaxx запилил песочницу BEMHTML.
Привет. Написал утилитку, которая умеет создавать и переименовывать бем структуру. Вот, решил попиарить, надеюсь кому-то еще будет полезна. http://habrahabr.ru/post/255195/
https://yadi.sk/i/wTtm5vmgfpNkW
это я что-то неправильно сделал или bem/project-stub не поддерживает IE8?
https://ru.bem.info/technology/bemhtml/v2/rationale/#data-bind
не до конца понял, почему knockout так выделили..
и что значит тогда data-bind?
если live-data-bind описан как "отличается тем, что в шаблоне можно декларировать связь не со статическими, а изменяющимися данными", тогда наверно и angular стоит выделить также
Доброй ночи , друзья! Помогите разобраться с file-copy. Добавил в make.js вот это :
в
var techs {
fileCopy: require('enb/techs/file-copy') - добавил строчку
}
затем пишу
[techs.fileCopy, {
source: '?.html',
sourceNode: 'test' - я так понимаю, сюда указать в какую папку это полетит
target: '_?.html'
}]
запускаю enb make и получаю Cannot read property 'init' of undefined
В BH@4.0.0 добавили метод processBemJson возвращает стандартный BEMJSON.
Правильно хотеть делать специальные шаблоны *.bemtree.bh для блока, если блоку надо уметь делать денормализацию данных (формирование BEMJSON из сырых данных)?
Хочется разобраться теме bemtree/priv.js, понять каким образом применять и как правильно подойти к выбору реализации?
Ниже материалы и обсуждения по теме.
Материалы
- Справочное руководство по шаблонизатору BEMTREE
- Описание bemtree от @tadatuta
- BEMTREE — генерируй дерево — Сергей Максимов
Полезные ответы
@apsavin bemtree генерирует входные данные для bemhtml. данные от вашего сервера попадают в bemtree, на выходе получается bemjson bemjson попадает в bemhtml, на выходе получается html Есть альтернативные технологии, например, sbmaxx/bem-priv Переходите или на bemhtml + bemtree, или на bh + priv.js Реализация priv.js может быть очень разной, если не хотите пилить сами - выше ссылка на готовую. Сложнее переиспользовать блоки, если формат данных, который ним приходит, зашит прямо в шаблоны.
Похожие топики
Я так понял, что MSIE 8 еще поддерживается в bem-core.
Пустая страница. из блока page и 1 обычного блока без доп.технологий падает в IE
Собранный js можно посмотреть в gist
bem-components 2.1.0
bem-core 2.6
upd: Самое главное не написал.
Ошибка: Объект не поддерживает это свойство или метод строка 4589 символ 5
name !== 'i-bem__dom_init' && arguments.length > 2 && ~deps.indexOf('i-bem__dom') &&
modules.define('i-bem__dom_init', [name], function(provide, _, prev) {
provide(prev);
});
};
Доброго времени суток, не могу понять как собирать для каждой страницы: 1) файл который содержит: i-bem, модульную систему, сторонние библиотеки. 2) файл который содержит код для каждого блока.
3) В режиме production так же собирать два файла: 1 Это один экземпляр файла который содержит: i-bem, модульную систему, сторонние библиотеки. 2 Файл со всеми кусочками для каждого блока.
С пунктом 3, есть несколько вариантов, но может есть уже готовые примеры.
Возможно ли допилить BEMHTML так, чтобы он вместо функции по генерации html строки, выдал функцию по генерации виртуального DOM дерева? Если это возможно, то в какую сторону нужно копать?
Не пойму как подгружать локальные скрипты и css-файлы сторонних JS-плагинов и библиотек таких, как Fancybox.
Создал common.blocks/fancybox/fancybox.js:
modules.define('fancybox', ['jquery'], function(provide, $) {
});
А дальше что? Копипастить содержимое jquery.fancybox.js внутрь функции? Что провайдить? Как подключить jquery.fancybox.css?
Можно как-то вести поиск по форуму? по форме "Поиск" в углу можно как-то искать по ключевым словам или нику. Ни чего не находит, только по меткам. Но в чем тогда суть Поиска если можно отфильтровать темы сортировкой.
Как можно достичь работы нескольких инстансов i-bem на одной страницы? Пробовал отключать _auto_init, менять BEMDOM.scope и вызывать инициализацию только на этом элементе. Не вышло - происходила инициализация блоков в том числе за пределами scope.
А есть какие ни будь кейсы, в bem-tools для верстки одного проекта под разные устройтсва, разных форматов экрана? Не имея в виду атрибуты 'm', 's' в компонентах, а как оперативно делить один проект на разные стили, может автоматически подключать разные файлы стилей для разных устройств при сборки или еще что ни будь?
Делаю блок scrollspy. который должен следить, находится ли блок в видимой зоне страницы. Блок подписывается на скролл
this.bindToWin('scroll', throttle(this._onScroll, this.pause, this));
получается, куча блоков подписанных на scroll, что в итоге тормозит. Пробовал задать live обработчик, с помощью liveBindTo(BEMDOM.win, 'scroll', callback) но реакции на события нет. Как правильно подписаться на события вне блока?