К примеру, если пишу mix : [{block : 'buttons', elem : 'smallButton', mods : {red: true}}] то подмешиваются 2 класса buttons__smallButton и buttons__smallButton_red А нужно чтобы подмешивался только buttons__smallButton_red. Как это сделать?

Создал слайдер (блок slider) с поддержкой входных параметров (this.params) и слайд-шоу. При установке двух и более экземпляров на страницу, происходит (по-видимому) смешивание их параметров, или их переопределение. Перелистывание слайдов всегда производится с учетом ширины (width) и скорости перелистывания (duration) последнего экземпляра. То же касается величины задержки (delay) при слайд-шоу.

Помогите, пожалуйста, разобраться, в чем таится ошибка.

Ссылки:

• Страница примера
• Страница папки проекта в репозитории

Как прописать element.style {} к блоку?

Всем привет. Подскажите, пожалуйста, как переопределить стили блока select через модификатор или киньте пример, в документации ничего не нашел, кроме общего описания, что это возможно https://ru.bem.info/method/key-concepts/#Переопределение-блока .

мне нужно переопределить два свойства: Первое:

.menu-item_theme_islands.menu-item_checked {
/* background: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%…h d%3D%22M13.5.5l-8 12L1.7 8l-1 1.6L5.6    15l9.1-13.4z%22%2F%3E%3C%2Fsvg%3E") 0 50% no-repeat; */
}

заменить на

 .menu-item_theme_islands.menu-item_checked {
   background-color: #fc0;
}

Второе:

.menu_size_m .menu__group-title~.menu-item_theme_islands, .menu_size_m[class*=menu_mode] .menu-item_theme_islands {
padding: 0 30px;
}

заменить на

.menu_size_m .menu__group-title~.menu-item_theme_islands, .menu_size_m[class*=menu_mode] .menu-item_theme_islands {
padding: 0;
}

В итоге, вместо http://i.imgur.com/HYTWPsN.jpg должно получиться так: http://i.imgur.com/hxGDcse.jpg

Что я сделал:

1. Добавил модификатор к блоку select ( without : 'tick' )

   mods : { mode : 'radio-check', theme : 'islands', size : 'm', without : 'tick' },

2. В папке common.blocks/select/_without создал файл select_without_tick.deps.js ({

         mustDeps : { block: 'menu-item', mods: { without: 'tick' } }
   

   })

3. В папке common.blocks/menu-item/_without создал файл menu-item_without_tick.styl

   .menu-item_without_tick {
       padding: 0;
   

   &.menu-item_checked {

           background: none;
   background-color: #fc0;
   }
   }
   

Где у меня ошибка?

Вопрос по bem-mvc. Можно ли сделать подписку на событие внутри модели. Хочу при фиксации модели вызывать еще один метод. И вдогонку еще вопрос. Почему в bem-mvc нельзя переопределять базовые методы модели, например fix()?

Всем привет! Какой файл нужно править, чтобы при выботе в блоке select какого-то значения, в кнопку попадало не значение text блока select, а icon? Второе, нужно избавиться от __tick, и просто выделять цветом.

Допустим есть функция someFunc которая принимает строку, и возврщает модифицированную строку, как мне ее внеднрить в свои шаблоны? Если можно отдельным блоком, то как лучше это сделать? Или же если дбавлять метод к контексту (this.someFunc) то где лучше его объявить?

Есть модуль который провайдит скрипт (по аналогии с jQuery), Скрипт режется на некоторых клиентах (adblock). В итоге модуль не провайдится. А так как он прописан в зависимостях модуля унаследованного от i-bem__dom то блоки с DOM представлением тоже не инициализируются. Можно ли как-то учесть, что модуль может не зарезолвится, не мешая работе других блоков?

Введение

На прошлых вебинарах с Димой Белицким мы сверстали простую страницу следуя БЭМ-методологии: написали HTML и CSS, немного декларативного JavaScript, а также настроили сборку с помощью gulp.

В этом вебинаре мы получим BEMJSON имеющихся страниц, напишем простые BEMHTML-шаблоны и посмотрим на некоторые интересные возможности BEMHTML.

Итак, немного про декларативные шаблоны.

Все привыкли к декларативной природе CSS, поэтому удобно провести аналогию.

Допустим, у нас есть список:

<ul class="menu">
  <li class="menu__item">
    Привет
  <li>
  <li class="menu__item">
    BEM!
  <li>
</ul>

Чтобы задать определенный внешний вид всем элементам списка можно написать CSS:

.menu__item {
    background: red;
}

А если же хочется изменить связку ul + li, например, на nav + a? Что если это можно было бы сделать по аналогии с CSS, написав соответствующий «селектор» и просто задать другое значение свойству tag?

Так это выглядит в BEMHTML:

block('menu')(
  tag()('nav')
)

block('menu').elem('item')(
  tag()('a')
)

Чтобы иметь возможность таким образом пребразовывать HTML необходима особая декларация страницы.

BEMJSON

BEMJSON — это описание структуры страницы в терминах БЭМ на JavaScript с зарезервированными полями. Указанный ранее список в BEMJSON описывается так:

({
  block: 'menu',
  tag: 'ul',
  content: [
    {
      elem: 'item',
      tag: 'li',
      content: 'Привет'
    },
    {
      elem: 'item',
      tag: 'li',
      content: 'BEM!'
    }
  ]
})

BEMJSON компилирутся в HTML.

Избавиться от копипасты tag: 'li' поможет BEMHTML-шаблон.

block('menu')(
  tag()('ul')
)

block('menu').elem('item')(
  tag()('li')
)

BEMHTML-шаблон накладывается на BEMJSON по аналогии с тем, как CSS накладывается на DOM-дерево. На выходе — получаем HTML.

BEMJSON для наших страниц

Код — 01858d

Если есть HTML, написанный по БЭМ, то BEMJSON можно получить автоматически с помощью пакета html2bemjson

npm install html2bemjson

Сборка

Код — eef725

Далее нужно дотюнить сборку:

• gulp научился собирать зависимости по BEMJSON, а не HTML
• добавился таск для компиляции HTML по BEMJSON с использованием BEMHTML-шаблонов

  Вычисления во время компиляции в BEMJSON

Код — 51ec21

BEMJSON представляет собой plain JavaScript, поэтому позволяет любые вычисления во время компиляции — то, чего не достает HTML.

Например,

({
  block: 'menu',
  // построим BEMJSON списка динамически из массива текстов элементов
  content: [
    'Привет',
    'BEM!'
  ].map(function(text) {
    return {
      elem: 'item',
      content: text
    };
  })
})

({
  block: 'menu',
  // определим массив текстов динамически,
  // который будет разным при каждой генерации итогового HTML
  content: (function() {
    return Math.random() > 0.5 ? ['Привет'] : ['Привет', 'BEM!'];
  }()).map(function(text) {
    return {
      elem: 'item',
      content: text
    };
  })
})

Напишем простые BEMHTML-шаблоны

Код — 17d9a6

Упростим полученный автоматической конвертацией BEMJSON:

• вынесем всю HTML-обвязку страницы в блок page
• упростим представление меню в BEMJSON, сгенерировав BEMJSON самого списка элементов в шаблоне
• напишем простой шаблон для ссылки

  Специальные возможности BEMHTML

Код — bad312

Шаблонизатор BEMHTML имеет некоторые интересные возможности:

Переопределение в зависимости от входных данных

Например, блок link должен быть представлен в HTML span-ом, а не ссылкой, если в BEMJSON не было поля url.

Переопределение на уровне переопределения

Например, менюшка на странице с Поттером должна быть в HTML представлена тегом ol, а на всех других страницах — ul. Для этого достаточно определить блок меню на уровне potter.blocks. После сборки всех шаблонов в один файл получим:

// common.blocks
block('menu')(...)

// potter.blocks
block('menu')(...)

По аналогии с CSS, последнее «правило» перебивает предыдущее.

Допустим, я хочу чтобы шаблоны компилились по технологии require('enb-bemxjst/techs/bemhtml'), а bemjson в html по технологии require('enb-bh/techs/bemjson-to-html'). То есть шаблоны я прогоняю через BEMHTML, а bemjson через BH. Как это сделать, чтобы не было ошибок при сборке?

Как это прописать в bemjson?

<!--[if lte IE 8]>

<![endif]-->

Как я понимаю за компиляцию bemjson в html отвечает эта команда https://github.com/bem/project-stub/blob/bem-core/.enb/make.js#L62 А в технологии bemjson-to-html такой опции нет и все компилится в одну строку

Пользуюсь сборщиком enb, в enb-make определил две сборки, production и development, вот так:

config.mode("production", function () {...

в зависимости от режима определяю уровень переопределения env:

config.mode("production", function () {
    config.node("bundles/proj", function (nodeConfig) {
        nodeConfig.addTechs([
            [ require("enb-bem-techs/techs/levels"), {levels: getLevels([{"path": "blocks/env/production", "check": false}])} ],...

Функция getLevels:

function getLevels(levels) {
    levels = levels || [];
    return levels.concat[
        {"path": "libs/bem-core/common.blocks", "check": false},
        {"path": "lib.modules", "check": false},
        {"path": "blocks/translation.blocks", "check": false},
        {"path": "blocks/common.blocks", "check": true},
    ].map(function (l) { return config.resolvePath(l); });
}

Для development естественно путь указан к папке development

В проекте все так лежит: blocks/env/production/env.js и blocks/env/development/env.js, Содержимое файлов: modules.define('env', [], provide => { provide('development') }); (или production, в зависимости от файла).

В компоненте, для которого есть разница между development и production режимами подключаю env, и уже от него пляшу

При сборке YENV=production enb-make -n сборщик все-равно подключает /development/env.js, мало того, удаление всей папки env/development приводит к тому что в продакшн моде все-равно подключается development файл. С другой стороны, после того как файл env/development/env.js оказывается недоступным во время development сборки (enb make -n) сборщик ругается на отсутствие файла/папки. В чем проблема, и как еще можно из компонента получить доступ к переменной YENV?

А кто-нибудь знает, как отключить лишний js код во внешнем файле? Вроде таких технологий (browser.js) не использую.

{
    elem: 'link',
    mix: { block: 'link' }
}

Знаю только один способ, который в моем случае не подходит, это просто поменять местами

{
    block: 'link',
    mix: { block: this.block, elem: 'link'}
}

есть файл .browser.js в папке с элементом

modules.define('buttons__button', ['i-bem__dom'], function(provide, BEMDOM) {
provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                this.bindTo('click', function() { alert('hello'); });
            }
        }
    }
}));

})

js у элемента стоит в true, но событие не работает, что неправильно?

Вот тут ожидается ошибка в случае если нет файла https://github.com/enb-make/enb/blob/master/techs/file-provider.js#L46

А что, если добавить проверку на параметр content и если оный имеется, то создать файл ну как-то так:

build: function () {
        var promise;
        var target;
        var targetPath;
        var _this = this;
        promise = Vow.promise();
        target = this.node.unmaskTargetName(this._target);
        targetPath = this.node.resolvePath(target);
        fs.exists(targetPath, function (exists) {
            if (exists) {
                _this.node.resolveTarget(target);
            } else {
                if (_this._content === undefined) {
                    _this.node.rejectTarget(target, new Error('File not found: ' + targetPath));
                } else {
                    fs.writeFile(targetPath, _this._content, _this._options || {}, function (error) {
                        if (error) {
                            _this.node.rejectTarget(target, error);
                            return;
                        }
                        _this.node.resolveTarget(target);
                    });
                }
            }
            return promise.fulfill();
        });
        return promise;
    },

Чего скажете? Полезно будет али нет?

При установке модулей Ноды выдает ошибку с питоном ( http://prntscr.com/9qfkyt ). понятно что дело уже пахнет жареным, но я все равно попробовал собрать проект node_modules/.bin/bem server при переходе на страницу http://localhost:8080/desktop.pages/index/index.html получаю http://prntscr.com/9qfm9g . может кто сталкивался с проблемами запуска данной библиотеки под Windows? (лог ноды - https://yadi.sk/i/RGhkB8whn3LDz) Project-stub нормально запускается и показывает демонстрационную страницу Версии софта $ node -v v0.12.2 $ npm -v 2.7.4

Ребятки, бывает возникают вопросы, на которые ответ пару сек внимания от профессионала и сразу помогает, а бывает искать по сайту или задать вопрос на форуме, занимает продолжительное время. Я сделал скайп-чат по БЭМу, присоединяйтесь по ссылке: https://join.skype.com/dAeR8XdFMuMj или напишите мне в скайп, я добавлю: rus2def

Дополнительные плюсы для сообщества:

• Быстрая помощь новичкам
• Новички легче преодолевают сложности входа
• Больше людей не сдастся в освоении БЭМ-стека
• Я сделал историю чата доступной для всех, будет просто искать ответы на частые вопросы по истории.

Задача такая: есть макеты на запросы (site/index, video/index, video/new, video/edit и тд) Как грамотно оргинизовать их шаблоны. Используется весь стэк (BEMHTML, BEMTREE)

Если на каждого заводить по бандлу, то как тогда орагнизовать root.bemtree? site/index video/index video/new

Или же лучше заводить по модификатору на page page_view_site-index page_view_video-index page_view_video-new В этом случае тогда будет один бандл и один большой css и js файл

Какой здесь best practice?