Хочу использовать i-bem.js для shadowDOM компонент. Идея была такая: сбилдить js-файл со всеми нужными компонентами и подключить его внутри каждого shadowDOM блока. Но так не получается:

JavaScript всё равно исполняется в глобальном контексте и i-bem не видит компонент, спрятанных за shadowDOM. Я хотела обойти так: подгружать js-код текстом при инициализации shadowDOM и затем делать eval с подменой контекста. Но если изменить контекст с window на shadowRoot, всё ломается, потому что i-bem рассчитывает на какие-то методы глобального контекста.

Что можно всё-таки сделать, чтобы подружить i-bem и shadowDOM?

Здравствуйте. Создал новую тему, так как, прошлая уже не подходит для этой темы. Проблема использования ангулара и bem-component (select). Мне нужно складывать value селекта в ng-model , но создавая атрибут ng-model, сам скрипит bem, все равно будет складывать их в свое значение под атрибутом value. Как решить данный вопрос можно?

Пример Добавление БЭМ-сущностей для задач вёрстки из руководства по BEMHTML выдает ошибку:

Error: Only literal or function is allowed in template's body
   at Compiler.assert (/vagrant/project-stub/node_modules/enb-bemxjst/node_modules/bem-xjst/node_modules/xjst/lib/xjst/compiler/base.js:180:9)
   at Compiler.transformTemplates (/vagrant/project-stub/node_modules/enb-bemxjst/node_modules/bem-xjst/node_modules/xjst/lib/xjst/compiler/base.js:648:8)
   at Array.map (native)
   at Compiler.translate (/vagrant/project-stub/node_modules/enb-bemxjst/node_modules/bem-xjst/node_modules/xjst/lib/xjst/compiler/base.js:201:41)
   at Object.translate (/vagrant/project-stub/node_modules/enb-bemxjst/node_modules/bem-xjst/node_modules/xjst/lib/xjst/api.js:16:40)
   at Compiler.translate (/vagrant/project-stub/node_modules/enb-bemxjst/node_modules/bem-xjst/lib/bemhtml/compiler.js:121:35)
   at Compiler.generate (/vagrant/project-stub/node_modules/enb-bemxjst/node_modules/bem-xjst/lib/bemhtml/compiler.js:707:14)
   at Object.generate (/vagrant/project-stub/node_modules/enb-bemxjst/node_modules/bem-xjst/lib/bemhtml/api.js:16:40)
   at require.declare.process (/vagrant/project-stub/node_modules/enb-bemxjst/techs/bem-xjst.js:7:28)
   at /vagrant/project-stub/node_modules/enb-bemxjst/node_modules/sibling/lib/runner.js:22:48

Гугление подсказало обернуть матчинг флага в анонимную функцию:

block('box').match(function() { return !this.ctx._processed; })

Не помогло.

Обернул вызов applyCtx:

block('box').match(function() { return !this.ctx._processed; }).content()(function() {
    applyCtx({'ctx._processed':true}, {
        elem: 'left-top',
        content: {
            elem: 'right-top',
            content: {
                elem: 'right-bottom',
                content: {
                    elem: 'left-bottom',
                    content: applyNext()
                }
            }
        }
    });
})

Ошибка пропала, но html сгенерировался криво:

<div class="box">
    <div class="box">text</div>
    <div class="box__left-top">
        <div class="box__right-top">
            <div class="box__right-bottom">
                <div class="box__left-bottom"></div>
            </div>
        </div>
    </div>
</div>

Подскажите, как правильно делать такую банальную вещь?

Спецификации технологии bundle находятся в процессе разработки. Для получения детальной информации пишите на форум.

Не расскажите планов?

Всем здравствуйте. Я совсем недавно начал изучение БЭМ технологии. Столкнулся с такой ситуацией. Попробовал перенести созданый проект с localhost на реальный сервер. Перенос сделать простым копирование всех файлов. На сервере запустил Git Bash и командой npm start запустил сервер. Вместо localhost прописалось: http://0.0.0.0:8080. Далее при переходе на свой сайт, вместо загруженной страницы выдается дерево файлов и папок проекта. А в Git Bash видно, что проект не пересобирается когда к нему обращается. Подскажите пожалуйства, в чем проблема? Может перенос и дальнейший запуск на сервере по другому осуществляется? Где можно по этому вопросу информацию почитать?

Доброго времени суток. В БЭМ являюсь новичком. Пытаюсь сверстать свой проект, и столкнулся с проблемой: стоит задача вывести переключалку цветовых тем сайта (тёмная, светлая) например. Но что то никак не соображу, как мне с помощью js обойти все элементы и заменить один модификатор на другой. И в примерах не нашёл (( Подскажите пожалуйста, в какую сторону копать. Спасибо.

Здравствуйте, подскажите пожалуйста по следующией конструкции bemhtml. Элементу item, из условия необходимо добавить произвольный класс. Но не могу понять доступную конструкцию обрабатываемого элемента. Вызывается ошибка "TypeError: string is not a function" Пробовал item.cls()('my-class') и item.ctx.cls()('my-class') и this.. Но кажется что-то я совсем не то делаю.

this.ctx.items.forEach(function(item){
                var sub = [],
                num = 0;

  if(item.items != null){            
     item.cls()('my-class');
     item.items.forEach(function(subItem, i){
          sub.push({
             elem: 'sub-item',
             content: {
            elem: 'link',
            url: subItem.url,
            content: [subItem.text]
          }
       });
      });
  }
...
})

Дорогие разработчики Яндекса, дорогие форумчане. Я недавно знакомился с методологией БЭМ и мне очень понравилось. Сделал небольшую верстку придерживаясь БЭМ - нейминга. Пожалуйста, кому не сложно, хочу услышать Ваше мнение, какие ошибки, а также рекомендации. Спасибо за внимание, сслыки ниже. http://build-yourself.ru/shop/ https://github.com/sergeyamator/Prydbay

Добрый день :)

Влияет ли порядок объявления технологий в enb ? А точнее сборка происходит в порядке объявления или нет?

Всем привет!

Как настроить IDE для корректной работы с форматом *.bemhtml, как например в этом видео?

Устанавливал плагин BEM Support, но он не работает. Видимо потому, что поддерживает старый синтаксис.

Добрый день. Где можно отключить минификацию html при сборке?

Здравствуйте. Очень нравится оптимизированные файлы после cборки в bem-tools. Сейчас хочу переверстать сайт, построенный на фреймворке Yii при помощи БЭМ. Но появляется вопрос, как использовать склеенную borschik'ом разметку (c трудом читаемую на глаз) в разных layout-ах и элементах view. Думаю это актуально при любом паттерне mvc и разных фреймворках. Дайте пожалуйста рекомендации, как лучше и правильней. Может есть специальные ключи для разбивки исходного файла при сборке.

{
    block: 'header',
    content: [
        { elem: 'logo', content: { block: 'logo' } },
        { elem: 'search', content: { block: 'search' } },
        { elem: 'login', content: { block: 'login' } }
    ]
}

или

{
    block: 'header',
    content: [
        { block: 'logo',    mix: { block: 'header', elem: 'logo' } },
        { block: 'search',  mix: { block: 'header', elem: 'search' } },
        { block: 'login',   mix: { block: 'header', elem: 'login' } }
    ]
}

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

Создал блок page добавил в него CSS, но при запуски страницы стиль не подключается. Чего не хватает для работы стилей?

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

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

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

З1 января был влит PR от меня однако измений так и нет на сайте: i-bem.ru.md в bem-core vs этот же док на сайте в секции Технологии

Привет!

Сегодня в нашей компании проходил мой мастер-класс по БЭМ. Брали самые азы — CSS и файловую структуру. Задание делали прямо "на сцене", по очереди. Вот слайды, задание там внутри http://varya.me/bem-css-workshop/

В конце смогли сравнить изменения, которые мы сделали без всякого БЭМ https://github.com/varya/bem-css-workshop-source/pull/1/files и то же самое с БЭМ https://github.com/varya/bem-css-workshop-source/pull/2/files Получилось очень наглядно, и вроде бы это "продаёт" идею гораздо лучше презентаций и статей.

Кстати, для многих стало открытием, что SASS и LESS поддерживают БЭМ-селекторы, хотя этой фиче уже больше года.

Как вам мастер-класс? Кстати, можете слайды использовать для себя, конечно же :-)

Разве menu-item используется вне блока menu?

надо инициализировать в блоке block-editor Sir Trevor со всеми либами зависимостями по документации надо подключить underscore.js eventable.js sir-trevor.js и на станице прописать

<form> <textarea class="js-st-instance"></textarea> </form>

<script> new SirTrevor.Editor({ el: $('.js-st-instance') }); </script>

я сделал блок jslib с элементами jslib__underscore, jslib__eventable, jslib__sir-trevor в блоке где это надо использовать прописал

modules.define('block-editor', [ 'jquery', 'jslib__underscore', 'jslib__eventable', 'jslib__sir-trevor' ], function(provide, $, _, Eventable, SirTrevor) {
    new SirTrevor.Editor();
    console.log(Eventable);
    console.log(_);
    console.log(SirTrevor);
    console.log(123);
provide();

});

пытаюсь вывести в консоль, ничего нет, поправьте что делаю не так

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

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

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

Я тут нашел не рабочую ссылку на readme. Вот тут она https://ru.bem.info/libs/bem-components/v2.1.0/changelog/ Если я не туда написал то можете удалить мой пост. Просто внизу страницы не было ссылки для сообщения об ошибке на странице.

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

Добрый вечер , есть код такого плана, где у меня map бегает по массиву (objects), считает кол-во объектов в этом массиве и потом выводит то , что внутри функции с аргументом item. Соотвественно , чтобы вывести 20 таких элементов item(objects__item) на cтраницу , нужно 20 объектов внутри массива.Как можно вывести 20шт одинакового содержания item, при помощи цикла? Я просто не пойму куда его применить можно. Пытался обернуть return for-ом внутри map , но это не помогло. Это нужно для того, чтобы не копипастить в bemjson аж целых 20 объектов, они нужны чисто для заглушки. Или это лучше как то через bemhtml делать?

   {
     block: 'objects',
     content: [
               {
                     preview: '../../img/objects/1.jpg',
                     title: 'Антена штатная',
                     company: 'Эльбрус-запчасти',
                     url:'/',
                     address: 'Французская наб.,24',
                     date: '21:30',
                     prise: '2 120',
           }

     ].map(function(item) {
        return{
            elem: 'item',
           content: [ ...... ]
        }
    }
}

На примере select.

    { 
         block : 'select', mods : { mode : 'radio', theme : 'islands', size : 'm' }, 
         name : 'select1', 
         val : 2, 
         options : [ 
             {val : 1, text : 'Доклад' }, 
             { val : 2, text : 'Мастер-класс' },
             { val : 3, text : 'Круглый стол' } 
         ]
    }```
хочу переопределить значение с top на middle.
.select_theme_islands .select__button {
    vertical-align: top;
}
Да и в принципе...