Ребятки, а кто как делает валидации на инпутах в i-bem.js? Никто не заморочился блоками для этого? Или все тащут jQuery либы? Или bem-mvc? Заранее спасибо за ответы:) Хочу мнения на сей счет:)

Привет. Как я понимаю BEViS это одна из реализаций идеи независимых блоков. В описания BEViS он часто сравнивается с БЭМ, и часто встречаются негативные отзывы о БЭМ (мол миксы это не естественно и т.д.). Какое выше мнение o методологии BEViS? Какое выше отношение к их негативным отзывам о БЭМ, считаете ли вы их аргументированными?

Есть такая структура:

desktop.blocks
    input
        __control
            input__control.bemhtml
            input__control.styl
        input.bemhtml
        input.styl
desktop.bundles
    index
        index.bemjson.js

При запуске сервера "./node_modules/.bin/bem server", генерируется файл index.bemdecl.js, но он не содержит элементы блока input, а добавляет только это:

...
    {
        "name": "input"
    }
...

Проект создавал с помощью bem-stub: bem-toos, bem-core.

make.js:

/* global MAKE:false */

// process.env.YENV = 'production';

var PATH = require('path');

require('bem-tools-autoprefixer').extendMake(MAKE);

MAKE.decl('Arch', {

    blocksLevelsRegexp: /^.+?\.blocks/,
    bundlesLevelsRegexp: /^.+?\.bundles$/

});

MAKE.decl('BundleNode', {

    getTechs: function () {
        return [
            'bemjson.js',
            'bemdecl.js',
            'deps.js',
            'stylus',
            'css',
            'bemhtml',
            'html'
        ];
    },

    getForkedTechs: function () {
        return this.__base().concat(['stylus']);
    },

    getLevelsMap: function () {
        return {
            desktop: [
                'libs/bem-core/common.blocks',
                'libs/bem-core/desktop.blocks',
                'libs/bem-grid/common.blocks',
                'common.blocks',
                'desktop.blocks'
            ]
        };
    },

    getLevels: function () {
        var resolve = PATH.resolve.bind(PATH, this.root),
            buildLevel = this.getLevelPath().split('.')[0],
            levels = this.getLevelsMap()[buildLevel] || [];

        return levels
            .map(function (path) { return resolve(path); })
            .concat(resolve(PATH.dirname(this.getNodePrefix()), 'blocks'));
    },

    'create-css-node': function (tech, bundleNode, magicNode) {
        var source = this.getBundlePath('stylus');
        if (this.ctx.arch.hasNode(source)) {
            return this.createAutoprefixerNode(tech, this.ctx.arch.getNode(source), bundleNode, magicNode);
        }
    }

});

MAKE.decl('AutoprefixerNode', {

    getPlatform: function () {
        return this.output.split('.')[0];
    },

    getBrowsers: function () {
        var platform = this.getPlatform();
        switch (platform) {
            case 'desktop':
                return [
                    'last 2 versions',
                    'ie 10',
                    'ff 24',
                    'opera 12.16'
                ];
        }

        return this.__base();
    }

});

У меня есть блоки

.square-box
.shadow
.flip-box
.product-card

Нужно сделать карточку продукта квадратной и переворачивающийся, вышел такой haml

.product-card <-- начало блока
  .square-box
    .square-box__content
      .flip-box
        .flip-box__wrapper
          .flip-box__front
            .shadow.shadow--1
              .product-card__title ... <-- И только здесь начались его элементы
              .product-card__image ...

          .flip-box__back
            .shadow.shadow--1 Back content

Получается, что product-card оборачивает пару блоков, которые оборачивают элементы product-card... вписывается ли это в методологию? На текущий момент есть идея вынести стороны карточки продукта в разные блоки product-front-side и product-back-side, но все равно интересно получить ответ на вопрос.

Речь больше про будущие возможные ядра систем сборки, и конкретно про bem-tools 2.0.

Случай 1. Когда кол-во плагинов и модулей на проекте разрастается до 30-50, которые будут друг друга реквайрить внутри, то загрузить их достаточно быстро, но инициализировать будет долго. Например, чтение большого проекта будет подвисать, когда как для некоторых команд, типа создания блока, это будет лишним, поскольку достаточно будет только информации об уровнях и технологиях по умолчанию.

Случай 2. Асинхронные реквайры позволят делать всякую магию с автодогрузкой модулей при необходимости и частичной сборкой.

Случай 3. Проверка обновлений в bg с выводом сразу, если возможно, либо со складыванием в кеш и последующим выводом.

И еще один тезис. Если вы скажете, что это никому не нужно — то вы заранее отбираете у потенциальных пользователей эту возможность, что делает ядро сильно менее универсальным. Завернуть что-то единожды при разработке плагина, во что-то типа modules.define или прописать ему зависимости и реализации, не такая уж крупная потеря, но потерять возможность делать асинхронщину много хуже.

Хочется, конечно, послушать и ваши доводы по этому поводу.

На сегодняшний день разработка bem-tools заморожена. Подробнее об этом в заметке о статусе bem-tools, причины приведшие к такому положению вещей значение имеют второстепенную, вопрос в том что делать и как развиваться дальше.

В теме Визуальный генератор страницы из имеющихся блоков вплыл вопрос о "правлении" ENB в БЭМ-экосистеме, @zxqfox лаконично и не субъективно описал свой взгляд:

Названия технологий и их апи настолько разные, что убивают многое. У них нет зависимостей других технологий, которые стоило бы запилить. Конфиги больших проектов выглядят как какашка (см. bem-components и проекты с хакатона). Технологии жестко завязаны файловую систему и имена технологий — оба не критично, но имхо это не правильно. И это все не субъективно. Для 80% пользователей это так ;-)

1. Хочется услышать другие мнения.
2. Хочется разложить все по полочкам, а именно разложить по полочкам составляющие bem-tools и составляющие ENB.
3. Хочется понять какие есть варианты достижения счастья и консистентности.

Привет. Заранее извиняюсь за текстовую перенасыщенность вопросов и за, порой, футуристические вопросы. А также заранее благодарю за время, уделенное на ответы, спасибо.

1) не знаю насколько это покажется удобным, но, думаю, по крайне мере это интересно. Представим, что мы разработали библиотеку блоков, реализовали для каждого блока все его технологи(js, css, bemhml и т.д.). Все, библиотека готова. Вспоминая своё детство, помню, как любил играть в конструктор лего, из кучи разных деталек создавать что-угодно, собирая все в одну конструкцию. Вопрос заключается в следующем, может у вас реализован или в планах следующий механизм: открываем страницу в браузере, справа в панельке у нас отображаются визуально все имеющиеся блоки и мы, перетягивая их мышкой на страницу, создаем наш сайт. Перетянув один из блоков на страницу, в октрывшемся окошке мы задаем все нужные параметры для блока. Точно также перетягиваем нужные элементы блока. Затем нажимаем сохранить страницу и у нас автоматом генерится bemjson дерево нашей страницы. Разумеется, все это можно делать и вручную в bemjson файле, но от визуального создания страницы, как игра в лего, чтоли получаешь какое-то удовольствие, как в детстве, играя в лего, ну и плюс bemjson генерировался бы автоматом и люди, которые не особо сильны во всяких json и т.д. смогли бы делать свои странички не погружаясь в дебри bemjson, i-bem и т.д.

2) хочется сделать следующее приложение: загрузилась страница в браузер. Далее после каких-либо пользовательских действий перезагружается какая-либо часть страницы, данные для которой подгружаются ajax-ом. В этих пришедших данных находятся новые блоки, которых не было изначально на странице. Скажите, есть ли у вас механизм, который бы позволил на клиенте отслеживать какие новые блоки нужно вставить в страницу и который бы запрашивал с сервера для этих блоков css, js и bemhtml шаблоны, возвращая все эти данные в одном бандле, например, в json формате, а на клиенте бы эти данные вставлялись бы на страницу и только после этого бы вставлялся html новых блоков на страницу? В этом докладке https://events.yandex.ru/lib/talks/1413/ на 39:26 парень спрашивает именно то, о чем я написал. В ответе прозвучало про технологию, которая у вас есть с участием динамического сервера, но говорится, что она не в опен сорсе. Скажите, за год что-нибудь изменилось в плане этой технологии динамической подгрузки всех технологий блока?

3) уже около месяца в свободное от работы время читаю/изучаю все технологии бэм, плюс пересмотрел не один десяток видео с различных ваших конференций и теперь, имея хорошее представление, наконец готов начать писать свой мини проект ради практики БЭМ, но увидев об анонсе bem-core 3, желание начинать что-то кодить на текущей версии подостыло. Скажите, пожалуйста, когда планируете выпустить версию 3?

4) уже ни раз в различных видео упоминалось о библиотеке bem-components и о том, что люди пишут свои библиотеки, которые можно использовать в своих проектах. Скажите, а где можно скачать/увидеть сторонние, написанные не вами библиотеки блоков? Все старания по поиску таковых в гугле с использованием ключевого запроса "БЭМ библиотеки блоков" ведут сугубо на bem.info и, в частности, на страницы с библиотеками bem-core и bem-components.

Привет! Собрался я тут изучить технологию БЭМ только не смог пройти этап установки. При выполнение команды sudo npm -g install bem выдает такую ошибку. Не понимаю с чем связано. Может версии не те. nodejs я установил стандартной командой sudo apt-get install nodejs.

Читаю задачу-пример из документации, вот ссылка на задачу https://ru.bem.info/technology/bemhtml/2.3.0/reference/#%D0%92%D1%8B%D0%B1%D0%BE%D1%80-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B0-%D0%B2-%D0%B7%D0%B0%D0%B2%D0%B8%D1%81%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D0%B8-%D0%BE%D1%82-%D1%80%D0%BE%D0%B4%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%BE%D0%B3%D0%BE-%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0 не могу никак понять следующие моменты: 1) в какой моде будет применен данный шаблон, при том, что мода в нем не указана block('listitem').match(!this.inListItem)(apply({inListItem:true}))?.. 2) предположим, что все же я чего-то недопонял и все-таки шаблон из моего 1-го пункта все-таки выполнился. Все, что делает метод apply(исходя из документации) - "Конструкция apply предназначена для явного вызова процедуры выбора и выполнения шаблона, предикат которого истинен в данном контексте. Конструкция позволяет вызывать шаблоны в модифицированном контексте.". Иными словами метод apply в задаче-примере всего лишь изменит свойства текущего контекста(сугубо на время выполнения apply, после выполнения apply свойство inListItem вернется в свое начальное значение до вызова apply) и возвратит результат выполнения подходящего шаблона. Каким боком(при том, что inListItem после завершения вызова apply откатился к своему первоначальному значению) в задаче-примере пытаются заюзать inListItem в block('para').match(this.inListItem).tag()('')? 3) правильно ли я понимаю, что, если в теле шаблона я попытаюсь записать что-либо в нестандартное свойство контекста, например, вот так block('b1').content()(function(){this.HELLO = 'world'}), то после этого свойство HELLO будет доступно в контексте любого последующего обрабатываемого узла bem дерева? Либо при обработке каждого нового узла бэм дерева контекст(объект по ссылке this) пересоздается заного и, в связи с чем, поле HELLO будет отсутствовать для всех последующих обрабатываемых узлов bem дерева?

Заранее благодарю.

А почему нет метки BH ? Надо сделать бы ...

Например я могу использовать как this.ctx.block, так и this.block для получения имя блока.

Еще не понятная история с data, например если передать в bemhtml свойство data:

{ block: 'some-block', data: 'some-data' }

, то оно будет находится как и в this.ctx.data так и в this.data

Но если передать свойство отличное от data:

{ block: 'some-block', anotherkey: 'some-data' }

, то оно будет находится только в свойстве this.ctx.anotherkey

Следующие конструкции не работают:

block('block').elem('elem').elemMod('mod-name', 'mod-value')

block('block').elem('elem').mod('mod-name', 'mod-value')

Пример из руководства по технологии по bemhtml (http://ru.bem.info/technology/bemhtml/2.3.0/bemhtml-js-syntax/) вообще вызывает ошибку

block('b-head-logo')(elem('text').elemMod('size', 'big'))

Работает только следующая конструкция:

block('block').elem('elem').match('mod-value' == this.ctx.mods['mod-name'])

Я так понимаю это бага?

Каким образом в атрибутах можно использовать html мнемоники, например «?

Хотел поместить кавычки в title картинки, а он каждый атрибут обрабатывает функцией this._.attrEscape, в результате чего я получаю вместо « - «

Это фича или баг?

Кончились дни, когда вам нужно делать проксирование или запускать несчастную ноду для сборки страничек. Теперь это можно делать прямо в пхпшечке!

Пакет bem/bh

Делается это посредством bh.php шаблонов (почти 100% клон bh.js). Вы скажите, но кому он нужен? Ведь в bem-core и bem-components нет шаблонов для блоков? Не отчаивайтесь — PR уже стоят! И в bem-components тоже.

Огромное спасибо @tadatuda за настройку project-stub, где он создал технологий и подключил нужные веточки bem-core и bem-components, да и вообще за идеи и поддержку — project-stub + php-bem-bh. Для запуска дополнительно нужно будет поставить сам пакет в vendor/php-bem-bh (исторически так вышло, что тестовый стаб работает с php-bem-bh, когда как через composer пакет ставится в vendor/bem/bh). Здесь можно собрать index.bh.php, который при запуске выдаст переменную $bh с готовый к использованию шаблонизатором. Оптимизаций по сборке блоков в один файл пока не делалось, но если вам очень хочется, то можно допилить технологии, чтобы сборка была разной в зависимости от откружения.

От комьюнити хочется больше идей, чтобы выработать какое-то универсальное решение. Кроме того, шаблоны только 2 дня назад увидели свет и багов там немеряно, особенно в bem-components, если найдете чего — чирканите пару строчек. Спасибо ;-)

Здравствуйте, друзья!

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

Нашлась только эта http://clubs.ya.ru/bem/4080/ тема в клубах, я задал там вопрос, но не уверен в том, что тот сервис все еще работает, поэтому дублирую тут:

запускаю БЭМ-сервер и хотелось бы им аякс-запросы проксировать на бекенд (надоело использовать хром с опцией disable-web-security и костыль в коде), подскажите пожалуйста, можно ли это как-то настроить.

Добрый день, весёлая минутка! Здравствуйте.

На новой версии проекта решили использовать БЭМ для работы с шаблонами страниц. Создали репозиторий на основе project-stub. Одновременно хотим вести несколько подпроектов в одном репозитории. Вроде бы, это возможно при использовании разных уровней переопределения, как мне показалось. Столкнулись со следующей проблемой:

• Создаём свой уровень переопределения для страниц:

$ bem create level site.bundles -l .bem/levels/bundles.js

• Получаем папку site.bundles очень похожую на "родную" desktop.bundles: в .bem/levels.js всё идентично "натуральному".
• Создаём блок main в site.bundles:

$ bem create -b main -l site.bundles -T bemjson.js

• В site.bundles/main наблюдаем main.bemjson.js .
• Запускаем сборку:

$ bem make

• Наблюдаем стэктрейс (/opt/markup - расположение нашего репозитория):

TypeError: First argument needs to be a number, array or string.
at new Buffer (buffer.js:188:15)
at Writer.self.write (/opt/markup/node_modules/bem/node_modules/q-io/writer.js:47:23)
at /opt/markup/node_modules/bem/node_modules/q-io/fs-common.js:84:34
at _fulfilled (/opt/markup/node_modules/bem/node_modules/q/q.js:798:54)
at self.promiseDispatch.done (/opt/markup/node_modules/bem/node_modules/q/q.js:827:30)
at Promise.promise.promiseDispatch (/opt/markup/node_modules/bem/node_modules/q/q.js:760:13)
at /opt/markup/node_modules/bem/node_modules/q/q.js:526:49
at flush (/opt/markup/node_modules/bem/node_modules/q/q.js:108:17)
at process._tickCallback (node.js:415:13)

Что-то явно упускаю в настройке, но пока не понимаю отчётливо, что именно. Возможно, новый уровень переопределения надо куда-то также задекларировать? Но куда?

Требуется совет гуру.

Привет! Начал изучать методологию на тестовом проекте. Для начала решил использовать только html/css в терминах БЭМ, чтобы немного освоиться. И сразу возникла проблема с выделением сущностей. Допустим есть такая разметка:

<body class="b-body">
    <canvas class="b-background"></canvas>
    <section class="b-inform-box b-inform-box_rounded">
        <div class="b-inform-box__header">
            <div class="b-background"></div>
        </div>
        <div class="b-inform-box__main"></div>
    </section>
</body>

Если словесно описать, вот что должно получиться:

• canvas.b-background - это размытая картинка, которая растянута на весь экран, расположена ниже всех элементов по z-index;
• b-inform-box - это просто блок размещенный строго по середине экрана;
• div.b-background - это та же картинка, что и рисуется на canvas, но не размытая и растянута на ширину/высоту родителя.;

Визуально это выглядит так: https://www.dropbox.com/s/u0gay77vg5u7hsh/bg.jpg?dl=0

Исходя из описания видно, что, в принципе, блок canvas.b-background и div.b-background это одно и тоже. По крайней мере css описание одно и тоже.:

.b-background {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Но при дальнейшем подключении JS, встает вопрос, т.к. способы установки изображений на эти блоки разные. На canvas я рисую размытое изображение, а на div я устанавливаю css свойство background-image. Т.е., грубо говоря, различие блоков только в JS методе draw().

Нужно как-то эти два блока разделить, например на: b-page-bg и b-inform-box-bg? Или использовать один b-background, но как тогда организовать различный для обоих блоков js код?

Многовато написал, но хотел подробнее все расписать. Надеюсь что все понятно, и вы мне поможете разобраться. Хочу освоить БЭМ ^^

Привет. Правильно я понимаю что на винде mode 'production' никак не позвать? Про YENV винда конечно не в курсе( Как вариант хотелось бы что-то вроде enb make --mode=production.

Собираюсь попробовать бэм на вкус и постепенно ознакамливаюсь с документацией по разным бэм технологиям. Ознакомился с документацией i-bem. И возник список вопросов. Надеюсь, что получу на них ответы и заранее благодарю каждого, кто поучаствует в этом. 1) При осуществление поиска элементов внутри блока, есть ли защита от следующего момента: предположим, что у нас есть блок .b-carousel(карусель со стрелочками для листания вперед и назад). У блока есть элемент .b-carousel__item. И представим ситуацию, что одна карусель вложена в другую, то есть вот такая картина:

<ul class="b-carousel"><li class="b-carousel__item"></li><ul class="b-carousel"><li class="b-carousel__item"></li></ul></ul>

В javascript-е этого компонента осуществляется поиск элемента b-carouselitem внутри блока. Но поскольку у нас одна карусель вложена в другую, то будут найдены как элементы блока, так и элементы вложенного блока. Есть ли защита, чтобы поиск шел вот так, если изъясняться в терминах css селекторов и jQuery: `$(block).find(':not(.b-carousel) .b-carouselitem, >.b-carousel__item');`? 2) Есть ли в бэм защита от повторной инициализации блока? То есть, например, блок уже проиницилизирован, затем где-то вызывается повторная инициализация и блок инициализируется заного и на элементы блока второй раз вешаются обработчики событий. 3) По-умолчанию инициализация блоков происходит по событию document ready. Впоследствие, если куда-то на страницу, например, аяксом подгрузился html, то мы можем вызвать bem.init(полагаю в качестве параметра методу init передается DOM узел, внутри которого будет производиться поиск бэм блоков). Скажите, может есть стадартный, общий для всех блоков метод, которому передаешь параметром DOM элемент куда вставить html и вторым параметром собственно сам html для вставки, при этом этот метод после вставки html-я сам будет вызывать bem.init на DOM узле, куда вставлялся html. Это бы автоматизировало процесс, не нужно было бы при каждой вставке html-я вызывать bem.init.

Привет. Хочется чтобы при сборке при помощи enb в production режиме все png и svg файлы, которые указаны бекграундами для блоков и лежат рядом с ними конвертились в base64. Самостоятельно победить так и не удалось( В промерах борщика только варианты, когда картинки лежат в /i/png, что несколько странно и противоречит методологии.

Проблема невероятно чудесная. Вот здесь https://github.com/verybigman/bem-grid/blob/8218ef38503fc224219788692e7ddcd965f6428e/common.blocks/row/row.deps.js подключаю как зависимость по технологии bemhtml блоки i-bem и row. Ожидается, что шаблон row попадет в бандл с browser.js. Но не все так просто. При запуске в браузере получаю ошибку: Uncaught Error: Module "row": can't resolve dependence "BEMHTML", тесты проходят безупречно. Почему в фантоме все ок, а в живом браузере нет? Народ, помогите, я спать не могу из-за этого. Сбросить кэш не предлагать. Подключать bemhtml.js тоже не true. Сборщик bem-tools.

Весь стек технологий БЭМ заточен под node js. А если сервер это не node js, какие есть практики использования БЭМ? Может есть практики скрещивания node js с остальным server side. Если у кого был такой опыт поделитесь пожалуйста.

Возможно ли создание в BEMHTML глобальной переменной доступной для всех шаблонов? т.е. например я хочу иметь объект к которому есть доступ из контекста любого шаблона.

Есть блок artboard:

modules.define(
    'artboard',
    ['i-bem__dom'],
    function (provide, BEMDOM) {

        provide(BEMDOM.decl(this.name, {

            onSetMod: {
                js: {
                    inited: function () {
                        console.log('Init artboard');
                    }
                }
            },

            _hello : function() {
                console.log('hello from artboard');
            }

        }));

    }
);

Хочу позвать его в menu-item_actions_list:

modules.define(
    'menu-item',
    ['artboard'],
    function (provide, Artboard, Item) {

        provide(Item.decl({ modName : 'action', modVal : 'list' }, {

            onSetMod: {
                js: {
                    inited: function () {
                        this.__base.apply(this, arguments);

                        console.log('Init list action');
                        console.log(Artboard);
                    }
                }
            }

        }));

    }
);

А в консоли при инициализации menu-item вижу вот что:

> Init list action 
> function () {
                return this.__constructor.apply(this, arguments);
            }

Блок в блок зовется вроде нормально. Помогите кто знает, плиз!