Войти с помощью github

gulp-pugbem

NPM GitHub

Установка

npm install gulp-pugbem --save-dev

Подключение

var gulp = require('gulp');
var pug = require('gulp-pug');
var pugbem = require('gulp-pugbem');

gulp.task('pages', function () {
    return gulp.src('app/**/*.pug')
        .pipe(pug({
            plugins: [pugbem]
        }))
        .pipe(gulp.dest('dist'));
});

Использование

Блок

блок в pug-коде начинается с точки [перед которой может стоять название тега] блоки можно вкладывать друг в друга, как показано во втором примере

.header
form.search-form

.header
    nav.menu

result:

<div class="header"></div>
<form class="search-form"></form>

<div class="header">
    <nav class="menu"></nav>

Элемент

элемент в pug-коде начинается с точки и знака подчеркивания [перед которыми может стоять название тега] в примере ниже, блок search-form включает два элемента input и button

form.search-form
    input._input
    button._button Search

result:

<form class="search-form">
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

Модификатор

модификатор в pug-коде начинается с точки и дефиса [перед которыми должен идти блок или элемент] в примере ниже, модификатор назначен блоку search-form и элементу button

Булевый

form.search-form.-focused
    button._button.-disabled Search

result:

<form class="search-form search-form--focused">
    <button class="search-form__button search-form__button--disabled">Search</button>
</form>

Ключ-значение

form.search-form.-theme_islands
    button._button.-size_m Search

result:

<form class="search-form search-form--theme_islands">
    <button class="search-form__button search-form__button--size_m">Search</button>
</form>

Микс

микс в pug-коде состоит из блока и следующего за ним одноименного элемента без названия тега [перед элементом не может идти ничего, кроме одноименного блока]

миксы не могут использоваться сами по себе, они являются строительной частью другого блока в примере ниже, блок header включает микс search-form

.header
    form.search-form._search-form

result:

<div class="header">
    <form class="search-form header__search-form"></form>
</div>

Пример

header.header
    nav.menu
        a(href="#")._logo Company
        .list
            a._item.-active(href="#") Home
            a._item(href="#") News
            a._item(href="#") Gallery
            a._item(href="#") Partners
            a._item(href="#") About
            a._item(href="#") Contacts
    h1._title Hello, World!
    .myslider._myslider
        ._slide Content
        ._slide.-active Content
        ._slide Content
    p._text Good weather

result:

<header class="header">
    <nav class="menu">
        <a class="menu__logo" href="#">Company</a>
        <div class="list">
            <a class="list__item list__item--active" href="#">Home</a>
            <a class="list__item" href="#">News</a>
            <a class="list__item" href="#">Gallery</a>
            <a class="list__item" href="#">Partners</a>
            <a class="list__item" href="#">About</a>
            <a class="list__item" href="#">Contacts</a>
        </div>
    </nav>
    <h1 class="header__title">Hello, World!</h1>
    <div class="myslider header__myslider">
        <div class="myslider__slide">Content</div>
        <div class="myslider__slide myslider__slide--active">Content</div>
        <div class="myslider__slide">Content</div>
    </div>
    <p class="header__text">Good weather</p>
</header>

Параметры

var pugbem = require('gulp-pugbem');

// разделитель элементов
pugbem.e = 'string';

// разделитель модификаторов
pugbem.m = 'string';

Пример

pugbem.e = '**';
form.search-form
    input._input

result:

<form class="search-form">
    <input class="search-form**input">
</form>

pugbem.m = '++';
form.search-form.-focused

result:

<form class="search-form search-form++focused"></form>

Это может пригодиться, например, когда для разделения модификаторов предпочтение отдается классическому определению.

Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_)

Тогда необходимо задать свойству m соответствующее значение:

pugbem.m = '_';
form.search-form.-focused

result:

<form class="search-form search-form_focused"></form>

License

MIT License

Copyright (c) 2017 Legostaev Vadim (legostaev.vadim@mail.ru)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Для начинающих хочу порекомендовать отличный ресурс http://webdiz.com.ua/uroki/css

Привет!

Самое время заглянуть в раздел Методология на bem.info!
Мы обновили часть старых документов и опубликовали новые:

To be continued...

Читаю документацию по шаблонизатору, застопорился на первом примере.


Пример. Подпредикат блока link:

block('link')

Входные данные:

[
    // на этот блок предикат вернет `true` и шаблон будет применён
    { block: 'link' },

    // на все следующие сущности предикат вернет `false` и шаблон не будет применён
    { block: 'para' },
    'link',
    { block: 'link', elem: 'text' }
]

Конкретного описания к подпридекату block не добавлено, но выше говорится:

Для каждого узла входного дерева шаблонизатор проверяет условия, указанные в шаблонах. Эти условия называются подпредикатами и составляют предикат шаблона. Условия могут быть простыми — проверка имени блока/элемента или более сложными и составными — проверка значений произвольных полей в текущем узле BEMJSON.

Исходя из этого и комментариев в примере я понял, что в выводе должен быть только блок link, но этого не происходит ни в одной из версий шаблонизатора, предложенных в песочнице.

Вопрос: где я ошибся?

Опубликовали два новых документа по методологии

Быстрый старт: https://ru.bem.info/methodology/quick-start/

БЭМ для CSS: https://ru.bem.info/methodology/css/

Приятного чтения :)

Доброго времени суток!

Есть несколько вопрос, на которые, к сожалению, я не нашел ответа. Как известно, в знаменитом project-stub создана папка bundles только для desktop, так вот:

1) Как сгенерировать bundles для touch-pad, например? 2) Слышал в одном из докладов, что у вас есть детектор для определения платформы, можете кинуть пару примеров его использования?

Еще один вопрос, заодно: 3) Опять же в одном из докладов слышал про "тулзу", которой скармливаешь bemjson, а она на его основе генерирует папки блоков и элементов. Как она называется?

Спасибо.

Uncaught SyntaxError: Unexpected end of input

Не помню, чтобы хотя бы один проект установился у меня без проблем. Работаю на Linux Mint 16. Есть ли какое-то руководство по решению проблем связанных с установкой?

Вот список некоторых проблем с которыми я сталкиваюсь:

  1. Клонирование через http не проходит использую только git clone https...
  2. Установка проходит обычно с sudo ... а без него какая-нибудь директория оказывается недоступной.
  3. В процессе вываливается ошибка типа Error: Cannot find module.
  4. Текущая версия nodejs конфликтует.

На всех видео семинарах, что я смотрел ваши сотрудники ставят проекты с пол пинка. Мне же приходится "рожать" каждую установку. Хотя у меня установлены все менеджеры пакетов типа npm и bower и прочие пакеты, которые я установил глобально. Все равно установка спотыкается.

I: Подскажите пожалуйста, указанный здесь https://ru.bem.info/technology/bemhtml/v2/rationale/#Примеры-3 код шаблона (шаблона ли?), в каком файле он должен содержаться? Вроде как это относится к файлам *.bemhtml, но при сборке выдаётся Unexpected identifier. Да и до этого, в других примерах ( https://ru.bem.info/technology/bemhtml/v2/intro/#template ) синтаксис шаблона другой. Воспроизвести этот пример с указанным кодом так и не удалось. II: Из того, на что наткнулся, пока разбирался с вашей методологией: 1) Если какой-либо из ИМЯБЛОКА.js файлов написан с ошибкой ( с ошибкой синтаксиса, пробовал, например вставить туда приведённый выше код примера), то для всех блоков перестаёт работать инициализация, т.е. блоку не добавляется класс ИМЯБЛОКА_js_inited. Это нормальная логика? При этом, запущенный командой npm start, сервер никакой ошибки не выдаёт. 2) https://ru.bem.info/tutorials/start-with-project-stub/#bemhtml-шаблоны код примера блока BEMHTML шаблона для блока goods прямо очень сильно расходится с тем, что написано в разделе.

При переходе по ссылке без указания языка не происходит пролистывание страницы до положения якоря. Например: https://bem.info/libs/bem-core/v2.7.0/desktop/i-bem/jsdoc/#jsdoc-init-1

Есть блок block-one, события которого слушаются в block-two через this.findBlockOn('block-one', 'block-one-elem).on('change', this._blockOneChanged, this). В bem-core изменился способ обращения к инстансу блока block-one в обработчике события.

Было:

_blockOneChanged: function(e) {
    var blockOneInstance = e.block;

    this._checkButtonsState(blockOneInstance);
},

Стало:

_blockOneChanged: function(e) {
    var blockOneInstance = e.target;

    this._checkButtonsState(blockOneInstance);
},

В руководстве по миграции есть только указание на «Доступ до DOM-элемента в обработчике события»

// cc @innabelaya

В i-bem из bem-bl можно было передать в качестве параметра name jQuery селектор. Сейчас по jsDoc можно передать только строку. Но, если всё-таки передать jQuery-селектор, например $tab = this.findElem('tab:eq(0)');, то всё будет работать.

Но если попытаться дёрнуть this.setMod($tab, 'state', 'current');, то мы получим неожиданный результат — <div class="tabs__tab tabs__tab:eq(0)_state_current">.

Как минимум, стоит добавить в документацию, что использовать jQuery селектор в качестве параметра name теперь нельзя.

Возможно, стоит сделать так, чтобы и this.findElem('tab:eq(0)'); не находил первый элемент tabs__tab.

Написал небольшое дополнение к официальной документации project-stub. Опубликовал на Яндекс.Диск: https://yadi.sk/i/Sj3R7SCriAXyM

При миграции на bem-core больше нельзя указать контекст для поиска элемента строкой. Нужно обязательно передать jQuery-объект. Ну да, лучше так вообще не делать ;)

https://github.com/bem/bem-bl/blob/support/2.x/blocks-common/i-bem/__dom/i-bem__dom.js#L791 vs https://github.com/bem/bem-core/blob/v2/common.blocks/i-bem/__dom/i-bem__dom.js#L725

Было:

var nestedElem = this.findElem('parent-elem', 'nested-elem');

Стало:

var nestedElem = this.findElem(this.findElem('parent-elem'), 'nested-elem'),
    oneMoreElem = this.findElem(this.elem('another-elem'), 'nested-elem');

В процессе миграции на bem-core обнаружил, что метод liveBindTo больше не принимает объект с ключом elemName, а ожидает строго elem. В руководстве по миграции об этом не указано, к сожалению.

Вот здесь https://ru.bem.info/technology/i-bem/v2/i-bem-js/#%D0%9E%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0-%D0%B2-%D0%B4%D0%B5%D0%BA%D0%BB%D0%B0%D1%80%D0%B0%D1%86%D0%B8%D0%B8

Вместо modules.define('button', ['i-bem'], function(provide, Button) {

Должно быть modules.define('button', function(provide, Button) {

Не нашел репозиторий bem.info, чтобы поправить самому. Почему нету на него ссылки нигде на сайте? Или какой-нибудь штуки типа "нашли ошибку?".

Всем привет!

Очень интересную ситуацию наблюдаю при сборке примеров для документации на разных платформах (Windows, Linux/OS X) с использованием пакетов enb-bem-examples и enb-magic-factory. На Windows сборка проходит без ошибок на остальных возникает следующая ошибка:

  ~/src/drom-bem-makeup   master ●  enb make examples -n
16:14:26.665 - build started
16:14:27.446 - [failed] [blocks.examples/common-desktop/common-desktop.bemjson.js] file-provider
16:14:27.448 - [failed] [blocks.examples/common-mobile/common-mobile.bemjson.js] file-provider
16:14:27.448 - [rebuild] [blocks.examples/b-button/ee3ZC6dyTetTRFqbHHZqKvywwXM/ee3ZC6dyTetTRFqbHHZqKvywwXM.bemjson.js] file-provider
16:14:27.448 - [rebuild] [blocks.examples/b-button/wrlcu38vmkNaP3tb9gvwZXBiszI/wrlcu38vmkNaP3tb9gvwZXBiszI.bemjson.js] file-provider
16:14:27.448 - [rebuild] [blocks.examples/b-button/PNXYUr__M6VSB4YxqCmkdMhk2l0/PNXYUr__M6VSB4YxqCmkdMhk2l0.bemjson.js] file-provider
16:14:27.449 - [rebuild] [blocks.examples/b-button/Ekw9TzRLS_fyQiOkC-Zi804eDzo/Ekw9TzRLS_fyQiOkC-Zi804eDzo.bemjson.js] file-provider
16:14:27.449 - [rebuild] [blocks.examples/b-button/9y8JjzeQPxlsleieuSrVga8xv4U/9y8JjzeQPxlsleieuSrVga8xv4U.bemjson.js] file-provider
16:14:27.449 - [rebuild] [blocks.examples/b-button/WgU-OFa8iJsKWLBtnoxXtfgoLCc/WgU-OFa8iJsKWLBtnoxXtfgoLCc.bemjson.js] file-provider
16:14:27.449 - [rebuild] [blocks.examples/b-link/D1rJB4_MGVvbnFlNUN1xUlQvtpQ/D1rJB4_MGVvbnFlNUN1xUlQvtpQ.bemjson.js] file-provider
16:14:27.449 - [rebuild] [blocks.examples/b-link/6O-IryxuQJM1YwYJYT_hHvf20NQ/6O-IryxuQJM1YwYJYT_hHvf20NQ.bemjson.js] file-provider
16:14:27.449 - [rebuild] [blocks.examples/b-button/kreyF1JOyT4hpa2NBRIP_KwvWkY/kreyF1JOyT4hpa2NBRIP_KwvWkY.bemjson.js] file-provider
16:14:27.449 - [rebuild] [blocks.examples/b-link/7PpftPzRoUzxzKCcgS8Xn51w1o/7PpftPzRoUzxzKCcgS8Xn51w1o.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/b-link/28tLGFFUSZMApDlzg9Hi-09cNzg/28tLGFFUSZMApDlzg9Hi-09cNzg.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/b-link/XCMcnEyp-kgOzxTPExe9Xyu6xUI/XCMcnEyp-kgOzxTPExe9Xyu6xUI.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/b-link/uIFN2UGU4DNbCgT2JACquwcCSUo/uIFN2UGU4DNbCgT2JACquwcCSUo.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/b-link/UgeVMmhNha9pAtahV7VjriQCt9I/UgeVMmhNha9pAtahV7VjriQCt9I.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/b-link/xhSZr6XvNYk0AwDEfeLBCjtMs1g/xhSZr6XvNYk0AwDEfeLBCjtMs1g.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/b-button/g7f-wx_WjkFq_MRA_Fzs9eRLCnQ/g7f-wx_WjkFq_MRA_Fzs9eRLCnQ.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/m-button-ico/cUvu2JGXCO5KN8cmKNt11ZL40nI/cUvu2JGXCO5KN8cmKNt11ZL40nI.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/b-link/xIo7WqepN6yOXUzXkxpVCwoPtLw/xIo7WqepN6yOXUzXkxpVCwoPtLw.bemjson.js] file-provider
16:14:27.450 - [rebuild] [blocks.examples/b-link/QD3PyE2oaSabCQ_mcdAbZliSAME/QD3PyE2oaSabCQ_mcdAbZliSAME.bemjson.js] file-provider
16:14:27.586 - [rebuild] [blocks.examples/common-desktop/common-desktop.levels] levels
16:14:27.586 - [rebuild] [blocks.examples/common-mobile/common-mobile.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-button/ee3ZC6dyTetTRFqbHHZqKvywwXM/ee3ZC6dyTetTRFqbHHZqKvywwXM.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-button/wrlcu38vmkNaP3tb9gvwZXBiszI/wrlcu38vmkNaP3tb9gvwZXBiszI.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-button/PNXYUr__M6VSB4YxqCmkdMhk2l0/PNXYUr__M6VSB4YxqCmkdMhk2l0.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-button/Ekw9TzRLS_fyQiOkC-Zi804eDzo/Ekw9TzRLS_fyQiOkC-Zi804eDzo.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-button/9y8JjzeQPxlsleieuSrVga8xv4U/9y8JjzeQPxlsleieuSrVga8xv4U.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-button/WgU-OFa8iJsKWLBtnoxXtfgoLCc/WgU-OFa8iJsKWLBtnoxXtfgoLCc.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-link/D1rJB4_MGVvbnFlNUN1xUlQvtpQ/D1rJB4_MGVvbnFlNUN1xUlQvtpQ.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-link/6O-IryxuQJM1YwYJYT_hHvf20NQ/6O-IryxuQJM1YwYJYT_hHvf20NQ.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-button/kreyF1JOyT4hpa2NBRIP_KwvWkY/kreyF1JOyT4hpa2NBRIP_KwvWkY.levels] levels
16:14:27.587 - [rebuild] [blocks.examples/b-link/7PpftPzRoUzxzKCcgS8Xn51w1o/7PpftPzRoUzxzKCcgS8Xn51w1o.levels] levels
16:14:27.588 - [rebuild] [blocks.examples/b-link/28tLGFFUSZMApDlzg9Hi-09cNzg/28tLGFFUSZMApDlzg9Hi-09cNzg.levels] levels
16:14:27.588 - [rebuild] [blocks.examples/b-link/XCMcnEyp-kgOzxTPExe9Xyu6xUI/XCMcnEyp-kgOzxTPExe9Xyu6xUI.levels] levels
16:14:27.588 - [rebuild] [blocks.examples/b-link/uIFN2UGU4DNbCgT2JACquwcCSUo/uIFN2UGU4DNbCgT2JACquwcCSUo.levels] levels
16:14:27.588 - [rebuild] [blocks.examples/b-link/UgeVMmhNha9pAtahV7VjriQCt9I/UgeVMmhNha9pAtahV7VjriQCt9I.levels] levels
16:14:27.588 - [rebuild] [blocks.examples/b-link/xhSZr6XvNYk0AwDEfeLBCjtMs1g/xhSZr6XvNYk0AwDEfeLBCjtMs1g.levels] levels
16:14:27.588 - [rebuild] [blocks.examples/b-button/g7f-wx_WjkFq_MRA_Fzs9eRLCnQ/g7f-wx_WjkFq_MRA_Fzs9eRLCnQ.levels] levels
16:14:27.588 - [rebuild] [blocks.examples/m-button-ico/cUvu2JGXCO5KN8cmKNt11ZL40nI/cUvu2JGXCO5KN8cmKNt11ZL40nI.levels] levels
16:14:27.589 - [rebuild] [blocks.examples/b-link/xIo7WqepN6yOXUzXkxpVCwoPtLw/xIo7WqepN6yOXUzXkxpVCwoPtLw.levels] levels
16:14:27.589 - [rebuild] [blocks.examples/b-link/QD3PyE2oaSabCQ_mcdAbZliSAME/QD3PyE2oaSabCQ_mcdAbZliSAME.levels] levels
16:14:27.590 - build failed
16:14:27.597 - build failed
Error: File not found: /Users/rudoy/src/drom-bem-makeup/blocks.examples/common-desktop/common-desktop.bemjson.js
    at /usr/local/lib/node_modules/enb-bem-examples/node_modules/enb/techs/file-provider.js:47:49
    at FSReqWrap.cb [as oncomplete] (fs.js:212:19)

Кусок кода отвечающий за сборку примеров и их бандлов:

var factory = config.module('enb-magic-factory'),
        helper = factory.getHelper('examples');

    helper.prebuild(function(magicConfig){
        magicConfig.registerNode('blocks.examples/common-desktop');
        magicConfig.registerNode('blocks.examples/common-mobile');
    });

    helper.configure(function(config, nodes, targets){
        var nodes = nodes;
        config.nodes(nodes, function(nodeConfig){
            if(nodeConfig.getPath() === appConfig.examplesDir + '/common-desktop' || nodeConfig.getPath() === appConfig.examplesDir + '/common-mobile'){
                var depsDesktop = [],
                    depsMobile = [];

                nodeConfig.addTechs([
                    [ require('enb-bem-techs/techs/levels'), {levels: getExamplesLevels(config)} ],
                    [ enbBemTechs.files ],
                    [ techs.js ]
                ]);

                nodes.forEach(function (node) {
                    if (!/\/.*common.*/.test(node)) {
                        var pathNorm = path.normalize(node),
                            splitedPath = pathNorm.split(path.sep);

                        if(/m\-.\w*/.test(node)){
                            depsMobile.push(splitedPath[splitedPath.length - 1] + '.deps.js');
                            nodeConfig.addTechs([
                                //copy deps files to common-mobile dir
                                [ enbBemTechs.provideDeps, { node: pathNorm,  target: splitedPath[splitedPath.length - 1] + '.deps.js' } ],
                            ]);
                        }else{
                            depsDesktop.push(splitedPath[splitedPath.length - 1] + '.deps.js');
                            nodeConfig.addTechs([
                                //copy deps files to common-desktop dir
                                [ enbBemTechs.provideDeps, { node: pathNorm,  target: splitedPath[splitedPath.length - 1] + '.deps.js' } ],
                            ]);
                        }

                    }
                });

                //merge bundle
                if(nodeConfig.getPath() === appConfig.examplesDir + '/common-mobile'){
                    nodeConfig.addTechs([
                        [ enbBemTechs.mergeDeps, { sources:  depsMobile }]
                    ])
                }
                if(nodeConfig.getPath() === appConfig.examplesDir + '/common-desktop'){
                    nodeConfig.addTechs([
                        [ enbBemTechs.mergeDeps, { sources:  depsDesktop }]
                    ])
                }

                nodeConfig.addTechs([
                    //bemhtml
                    [ techs.bemhtml, { sourceSuffixes: [ 'bemhtml', 'bemhtml.js' ] } ],
                    //css
                    [ techs.cssStylus, {target: '?.noprefix.css'}],
                    [ techs.cssAutoprefixer, {
                        sourceTarget: "?.noprefix.css",
                        destTarget: '?.css',
                        browserSupport: ["> 2%", "last 2 versions", "Firefox ESR", "Opera 12.1", "Android >= 4", "iOS >= 5"]
                   }]
                ]);

                nodeConfig.addTargets(['?.js', '?.css', '?.bemhtml.js']);

            }else {
                nodeConfig.addTechs([
                    [require('enb-bem-techs/techs/levels'), {levels: getExamplesLevels(config)}],
                    [enbBemTechs.bemjsonToBemdecl],
                    [enbBemTechs.depsOld],
                    [enbBemTechs.files],
                    //CSS
                    [techs.cssStylus, {target: '?.noprefix.css'}],
                    [techs.cssAutoprefixer, {
                        sourceTarget: "?.noprefix.css",
                        destTarget: '?.css',
                        browserSupport: ["> 2%", "last 2 versions", "Firefox ESR", "Opera 12.1", "Android >= 4", "iOS >= 5"]
                    }],
                    //BEMHTML
                    [techs.bemtree, {sourceSuffixes: ['bemhtml', 'bemhtml.js']}],
                    //BEMHTML
                    [techs.bemhtml, {sourceSuffixes: ['bemhtml', 'bemhtml.js']}],
                    //HTML
                    [techs.htmlBeautify],
                    [techs.htmlFromJSON],
                    //client JS
                    [techs.browserJs],
                    [techs.fileMerge, {target: '?.pre.js', sources: ['?.bemhtml.js', '?.browser.js']}],
                    [techs.prependYm, {source: '?.pre.js'}]
                ]);

                nodeConfig.addTargets(['?.js', '?.css', '?.html', '?.browser.js', '?.beauty.html', '?.bemtree.js']);
            }
        });
    });

Ошибка возникает на этапе сборки бандлов(common-desktop и common-mobile) . При сборке которых нет необходимости провайдить .bemjson.js.

Не много дебага с помощьюnode.getTechs().

if(nodeConfig.getPath() === appConfig.examplesDir + '/common-desktop' || nodeConfig.getPath() === appConfig.examplesDir + '/common-mobile'){
           console.log(nodeConfig.getTechs());
           ......
}

На Windows результат будет пустой на OS X/Linux [ { _options: { target: '?.bemjson.js' } } ]

Хотелось бы разобраться, почему сборка ведет себя по разному на разных платформах?

https://ru.bem.info/libs/bem-core/v2.6.0/desktop/i-bem/#init-live

Если необходимо инициализировать экземпляры блока по наступлению DOM- или БЭМ-событий, в теле функции следует выполнить подписку на делегированные события. Возможна инициализация по:

  • DOM-событию на DOM-узле блока и вложенных элементах;
  • БЭМ-событию на вложенных блоках.

Хотелось бы увидеть в документации пример ленивой инициализации по BEM событию.

Есть пожелание расписать по подробнее про передачу js-параметров блоки и то, как с ними работать например, про то, что в setMode/js/inited их можно получить из this.params

а то, сейчас новичку вообще не очевидно, как с ними работать сам понял только на 5+ день изучения, просмотрев чужие блоки

https://ru.bem.info/technology/bemtree/v2/bemtree/#Решение-16

Думаю должно быть: return applyCtx({ block: 'b-wrapper', content: ctx })

https://ru.bem.info/libs/bem-core/v2.6.0/desktop/i-bem/#Простое-наследование

Для доступа к методам родителя служит специальное поле контекста this.__base

По факту this.__base() делает инициализацию baseBlock. А методы базового блока стали методами текущего объявленного.

https://ru.bem.info/tutorials/quick-start-static/#11-Описание-страницы-в-bemjson-файле

'3. Чтобы создать поле ввода и кнопку, возьмите готовые реализации блоков input и button из библиотеки bem-components и добавьте их в элемент greeting.

Возможно имелось ввиду добавить input и button из библиотеки bem-components в блок hello?! Потому что по структуре явно видно, что мы добавляем эти блоки туда, и они являются элементами блока hello находясь на одном уровне с input и button. Так ли это?!)) Либо я чего-то не понял. Спасибо))

Поделитесь информацией о stylus в доке bem.info нашел единственную не рабочую ссылку на странице https://ru.bem.info/tutorials/start-with-project-stub/?

Встретилась на Хабре весьма полезная статья про сложность инструкций. Существующая документация отличная, но когнитивное сопротивление у неё на самом деле очень высокое. Сейчас по терминологии Купера я уже "апологет" и нормально ориентируюсь в документации. Но по ощущениям множество "уцелевших" не могут воспользоваться замечательными инструментами, в первую очередь из-за сложности входа в мир БЭМ. Очень хочется цитировать вторую главу "Психбольницы в руках пациентов", а параграф про "Апологетов и уцелевших" хоть полностью сюда вставляй.

Здравствуйте! Изучение БЭМ требует времени, поэтому хорошо бы сразу получить ответ на вопросы: в чем новизна, в чем преемственность,.. В частности:

  1. при переходе на методологию БЭМ можно забыть о Bootstrap ? Тут все это есть, мне нужно только изучить?
  2. при переходе на методологию БЭМ можно забыть о LESS ? Тут все это есть, мне нужно только изучить?
  3. по этой методологии можно делать работы и для CMS (WP, Joomla)? С уважением

Столкнулся с такой вещью, что документации много, но подача её очень разрознена... Это очень путает и отталкивает. Сделал небольшой план/эскиз того, что хотелось бы видеть будучи новичком. Сделал правда на коленке, не все моменты продуманы. Основная идея - никакого погружения, до момента осознания! Всё должно быть по минимуму и поэтапно. Обновления плана буду скидывать сюда.

А сейчас эту версию назовём 0.1

БЭМ

Этап 0. Методология

  • История, основная идея

    Этап 1. Заготовка

  • Установка nodejs
  • Установка project-stub

    Этап 2. Создание простого проекта

  • Описание bemjson и зачем он нужен
  • Коротко о bemhtml, bh (Что назначение одно и тоже, но подходы разные)
  • Вёрстка простой страницы (просто вёрстка, без логики!)

    Этап 3. Добавление логики (i-bem)

  • Коротко об i-bem
  • Декларации блоков
  • Связи между блоками

    Этап 4. Пора в продакшен

  • Создание статистической версии
  • Использование на back-end'е
    • nodejs
    • php
    • ruby
    • и т.д.

      Этап 5. Внесение изменений в готовый проект

  • Что нужно, для того, чтобы сделать правки в продакшене

    Головокружительное погружение в БЭМ

  • миксы
  • библиотеки
  • уровни переопределения
  • технологии
  • борщик
  • ну в общем вся документация по-полочкам

Есть такая страничка, заявляющая, что она раскрывает смысл терминов Блок, Элемент, Модификатор. https://ru.bem.info/method/definitions/ Но, во-первых, нет конкретного определения, и, во-вторых, ничего не говорится про технологии, реализации, и другие важные при разработке сборки части.

Надо бы определиться с терминологией и определениями, чтобы можно было двигаться дальше. Подсобите, пожалуйста.

  • БЭМ — акроним Блок-Элемент-Модификатор;
  • Блок — ключевая самодостаточная сущность, описываемая набором реализаций (обычно, набор файлов и папок в папке блока);
  • Элемент — вспомогательная сущность, составная часть блока, описываемая аналогично блоку, которая имеет ровно один родительский блок, и не может использовать вне его контекста;
  • БЭМ-сущность — это определение содержания страницы или сущность в БЭМ-предметной области: блок ИЛИ элемент со всеми его состояниями (модификаторами);
  • БЭМ-предметная область — предметная область, описывающая все возможные варианты БЭМ-сущностей, их свойств, и отношений между ними;
  • Методология БЭМ — это набор паттернов и способ описывать действительность при помощи кода и размышлять о БЭМ-сущностях вне зависимости от того, на каком языке программирования реализуется проект;
  • Модификатор — состояние БЭМ-сущности, описываемое реализациями аналогично БЭМ-сущностям, может иметь строго одно строковое или булевое значение, не может как использоваться отдельно от БЭМ-сущности, так и считаться отедльной БЭМ-сущностью, поскольку является его состоянием (часть целого не может быть целым, если целое состоит не только из этой части);
  • Уровень — набор реализаций БЭМ-сущностей (обычно, набор папок с блоками и их внутренней структурой с элементами и модификаторами);
  • Библиотека — набор уровней;
  • Реализация (в технологии) — функциональная часть БЭМ-сущности, описанная в рамках конкретной технологии файлом или папкой с набором файлов;
  • Технология (tech, technology) — набор процессов для преобразования исходных файлов в целевой продукт (материалов в изделие, результат работы процессов, см. wiki: Технология);
  • БЭМ-технология — технология, применимая к БЭМ-сущностям;
  • Технология сборки — процесс преобразования реализаций блоков, используемый инструментами для сборки (обычно, модуль или набор , stateful?);
  • Технологии борщика — технология, реализуемая js-файлами, используемая инструментом borschik;
  • Цель (сборка) — результат работы технологии сборки;
  • Зависимость — способ включения в сборку сущности или её состояний других сущностей или состояний;
  • Зависимость по БЭМ-технологии — зависимость, используемая в случае сборки определенной БЭМ-технология (верно?);
  • Бандл (сборка) — это набор реализаций сущностей, описанный некоторой специальной реализацией (точкой входа для сборщика с набором сущностей, обычно, в виде реализации технологии bemdecl.js или bemjson.js), и некоторое кол-во собранных целей на выходе, а также способный включать в себя дополнительные уровни;
  • Merged-бандл — частный случай бандла, включающий в себя сборку всех используемых наборов сущностей и их состояний со всех бандлов;
  • Dist-бандл — частный случай бандла, включающий в себя сборку всех доступных БЭМ-сущностей, обычно используется для сборки библиотек;
  • JS-бандл — целевой файл бандла с реализацией JS;
  • CSS-бандл — целевой файл бандла с реализацией CSS (?, противоречит JS-бандлу, где в сборку включаются еще и шаблоны, и стили);
  • JS-бандл (путаница, может mixed-бандл?) — цель специальной технологии, результат которой содержит в себе CSS, JS и шаблоны, поставляемая в виде одного файла технологии JS.

Off-topic. А еще вот такое хочу:

  // возвращаем первое удачно разрешенное
  target('bemdecl', oneOf(
    // либо грузим файл `{level.path}/{bundle.name}/{bundle.name}.bemdecl.js`
    fs.provide('bemdecl.js'),
    // либо пытаемся загрузить bemjson.js и собрать динамически из bemjson.js
    bemjsonToBemdecl(fs.provide('bemjson.js'))
  ));

Потерял ссылку на GITHUB-страничку, где было полное и поступенное описание всего стека технологий. В т.ч. там было про то, как вводить свои технологии, расширяя имеющиеся, и т.д. Перерыл историю браузера, но ничего не могу найти. Если подскажете, буду рад, т.к. имеющаяся документация оставляет некие кусочки в голове, не давая сразу целой картины мира. Спасибо.

Добрый вечер. Хочу попробовать внедрение методологии БЭМ в документировании принципов сборки приложения на основе общих высокоуровневых блоков (заголовок приложения, навигация, система уведомлений, справочники, компоненты и т.д.).

Что ожидаю получить:

  • актуальная документация которую легко поддерживать
  • общая терминология для всех участников процесса создания продуктов
  • UX-проектировщик упорядочивает свои решения и формирует библиотеку общих решений
  • UX-проектировщик занят актуальными проблемами вместо перерисовки устаревающих макетов
  • менеджеры проектов пользуются документацией и применяют описанные решения
  • менеджеры проектов дают обратную связь и участвуют в развитии общей документации
  • менеджеры проектов совместно с UX-проектировщиком доопределяют документацию согласно требованиям своего проекта
  • программисты пользуются документацией
  • программисты понимают где собрана вся документация по определённому блоку
  • программисты понимают, что пытался донести UX-проектировщик
  • менеджеры проектов и программисты имеют доступ к примерам как стоит и не стоит использовать блоки
  • продукты компании выполнены в общем стиле и с единым подходом к навигации, структуре контента и т.д.

Что потребуется:

  • Терминология, принципы именования и размещения на файловой системе - заимствуются у БЭМ
  • Выбор технологий для описаний, макетов, примеров
  • Инструменты и технологии сборки
  • Технология публикации артефактов и документации (сайт)
  • Упоротость и удача
  • Преодоление множества "подводных граблей" на пути к мечте

Данный пост можно рассматривать:

  • попытку определить и упорядочить цели и задачи
  • сбособ получить критику, замечания и напутствия от сообщества