Друзья, возник вот такой вопрос. Как при возникновении события добраться до стилей блока, на котором это событие возникло, и изменить какой-нибудь отдельный параметр.

Задача - хочу сделать DIV с горизонтальной прокруткой по скроллингу мыши. Для галереи картинок. Я сделал блок с overflow: hidden. В него вложил длинный блок из картинок. Теперь хочу по событию scroll менять параметр left для блока с картинками. Подписка на события вроде понятна, но в описании библиотеки jquery в bem-core события scroll нет. Чую, что в BEM есть нюансы в реализации такой функциональности.

В общем, подскажите пожалуйста, в какую сторону копать )

Подскажите, можно ли тестировать ajax запросы в рамках spec.js. Как я понимаю, нужно дополнительно настроить сервер, который будет отвечать на запросы. Хотелось бы узнать как лучше его организовать

Есть ли возможность подключить ymaps модуль после иницализации блока? Дело в том, что какой конкретно модуль нужен блок решает после инициализации.

Как правильно с точки зрения синтаксиса Sass записать стили для элементов что модифицируются каскадом от модификатора блока? Я не нашёл варианта лучше чем:

.b-block {
  $rootParent: &;
  // …

  &.-modificator {
    // block with modificator styles…

    #{$rootParent}__element {
      // element styles…
    }
  }
}

Это компилируется в:

.block {}
.block.-modificator {}
.block.-modificator .block__element {}

Расскажите, пожалуйста, как можно использовать loader_type_bundle

Использую плагин jQuery, который необходимо подключить в head. Я еще не очень хорошо владею конфигурацией сборщиков, прошу дать направление, куда копать.

А я могу, каким-то образом получить bemjson, который соотвествует финальной верстке BEMHTML ?

т.е. например из

{
  block: 'widgets',
  content: [
    {
      elem: 'weather',
      content: 4
    }
  ]
}

вот это

{
  block: 'widgets',
  tag:"div",
  attrs: {
     class: "widgets i-bem",
     "data-bem": '{ "weather": { "id": 4321 } }'
  },
  content: [
    {
      elem: 'weather',  
      tag:"span",
      attrs: {
        class:"widgets__weather"
      },
      content: 4
    }
  ]
}

ENB сборка ограничивает нас своими правилами в отношении нод.

Допустим, у меня есть матрица свойств для сборки, от которой будут зависить какие слои переопределения необходимо подключить к сборке. Пример матрицы:

1. Заказчик - слои с именем заказчика имеют блоки для логики заточенной под заказчика, а так же и ряд тем
2. Устройство - не каждое устройство должно тянуть к себе код от другого.
3. Разрешение - не все приложения делаются резиновыми, по большей части в нашей работе приложение собирается под конкретное разрашение.
4. Тема - это свойство очевидно многим, у нас тема определяется как набором css так и возможными изменениями поведения в js

Теперь рассмотрим ситуацию.

Как нужно сформировать бандл, чтобы учесть все эти параметры?

enb make -m dev ./bundles/client/samsung/1280x720/orange - учли все.

должны получить структуру:

bundles/client/
bundles/client/samsung
bundles/client/samsung/1280x720/
bundles/client/samsung/1280x720/orange
bundles/client/samsung/1280x720/orange/orange.css
bundles/client/samsung/1280x720/orange/orange.js
bundles/client/samsung/1280x720/1280x720.css
bundles/client/samsung/1280x720/1280x720.js
bundles/client/samsung/samsung.css
bundles/client/samsung/samsung.js
bundles/client/samsung/samsung.html
bundles/client/client.html

Но посмотрите на структуру вариаций!

И сколько мне нужно задать bemdecl.js файлов?

Когда очевидно было бы получить все зависимости только из одного.

Ах было бы прекрасно, коли была бы возможность сделать так:

enb make -m dev ./bundles/client/samsung?resolution=1280x720&theme=orange&some=1&some=2

Тогда появляется настройка сборки в очень тонких материях, и rколичество ветвлений сократилось бы на много!

bundles/client/
bundles/client/samsung
bundles/client/samsung/samsung-1280x720-orange.css
bundles/client/samsung/samsung-1280x720-orange.js
bundles/client/samsung/samsung.css
bundles/client/samsung/samsung.js
bundles/client/samsung/samsung.html
bundles/client/client.html

Конечно, в сборке ноды можно получить и параметры:

config.nodes('bundles/**/**', function (nodeConfig) {
    console.log(nodeConfig.query);
});

/// { 'resolution': '1280x720',  'theme': 'orange', some: [1,2] }

Не мне же одному уже приходит эта мысль? Наверняка уже кто-то задумывался об этом? Ведь , это так упрощает жизнь!

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

admin.pages
desktop.pages
mobile.pages

каждый бандл соответствует определенной странице. Хочется добавить промежуточное звено - уровни bundles. Чтобы хранить повторяющиеся части страниц. например. header который на всех страницах одинаковый. И, соответственно, в *.pages из нескольких бандлов собирать bemjson полной страницы. Хотелось бы узнать, стоит ли хотеть так сделать, или даже крупные блоки должны оставаться блоками?

Господа, ещё давно возник такой вопрос. Как я понял оно не происходит, и единственный путь - это прокидывание события через всю цепочку блоков. Если ошибаюсь - прошу руку помощи.

Кто-нибудь пробовал сделать сборку для ymodules под webpack?

Не устанавливается генератор generator-bem-stub, выводит

$ npm install -g generator-bem-stub npm WARN deprecated CSSselect@0.4.1: the module is now available as 'css-select' npm WARN deprecated CSSwhat@0.4.7: the module is now available as 'css-what' C:\Users\user\AppData\Roaming\npm ├── generator-bem-stub@0.11.0 └── UNMET PEER DEPENDENCY yo@>=1.0.0

npm WARN EPEERINVALID generator-bem-stub@0.11.0 requires a peer of yo@>=1.0.0 but none was installed.

Хотя Yo установлен глобально и без ошибок.

В хроме при включенном asynс в dev-tools интерфейс замерзает при резолвинге модулей. Какие могут быть варианты решения проблемы кроме отключения галочки async?

Bem-core@2.7.0, ymodules@0.1.2

Сделал новое открытие, борщик не умеет распознавать пути в JSON. И другие параметры начинает воспринимать как часть пути.

Получается борщик бесполезнее чем ожидалось.

Может быть я ошибаюсь, и там надо что-то подкрутить?

block('kg-appbar')(
    js()(true),
    tag()('header'),
    elem('title').tag()('h1'),
    elem('panel')(
        tag()('nav'),
        def()(function(){
            return applyCtx({
                elem: 'placeholder',
                content: this.ctx
            });
        })
    )
);

с 2.6.0 работало. после обновления:

RangeError: Maximum call stack size exceeded
    at applyc (bundle.js:443)
    at __$b37 (bundle.js:3822)
    at __$g0 (bundle.js:4875)
    at applyc (bundle.js:460)
    at __$b89 (bundle.js:4225)
    at applyc (bundle.js:573)
    at __$b19 (bundle.js:3333)
    at __$g0 (bundle.js:4688)
    at applyc (bundle.js:460)
    at __$b89 (bundle.js:4225)

Нашел как в i-bem подключать jquery плагины, да и вообще весь браузерный код, и прокидывать зависимости https://github.com/bem/bem-forum-content-ru/issues/426

Но так и не разобрался, каким образом подключать код, у которого нет браузерной обёртки, например: https://github.com/dfilatov/bem-react

Руками запускать browserify, ложить получившийся js-бандл в блок, и подключать его по первому способу борщиком?

Разбираюсь с программным интерфейсом Gemini (https://ru.bem.info/tools/testing/gemini/api/). На базе тестов, написанных для запуска из консоли, всё работает — спасибо! Даже нет бага с записью "пустого" index.html на диск, который был из-за gulp-shell.

Теперь я хочу сделать так, чтобы тесты физически не располагались на диске. Можно их создавать динамически в том же месте в коде, в котором я запускаю genimi.test()?

Юзкейс мой такой: есть много однотипных проектов, которые я хотела бы тестировать. Им всем считай подходит один тест. Я хотела сделать проще для разработчиков этих проектов: предложить им gulp-плагин, внутри которого уже всё про Gemini зашито. Структура у проектов одинаковая, так что теоретически это возможно. И им не надо будет размещать непонятные для них файлы нигде.

Но мне не понятно, могу ли я сделать что-то вроде gemini.test(arrayOfSuits). И поскольку АПИ в разработке, я решила, что нелишне спросить.

/cc @arikon @SevInf

Добрый день.

Я недавно начал изучать БЭМ, и один вопрос не дает мне покоя.

В FAQ написано, что:

1. Если фрагмент кода может использоваться повторно и не зависит от реализации других компонентов страницы, необходимо создавать блок.
2. Если фрагмент кода не может использоваться самостоятельно, без родительской сущности (блока), в большинстве случаев создается элемент.

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

http://plnkr.co/edit/rCWCk3yGJJzAWpHqzpHa?p=preview

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

http://plnkr.co/edit/nxh0ObqXDSRKg3N4zAKc?p=preview

Есть ли более развернутые и подробные рекомендации по поводу того, что считать блоком, а что - элементом, и что значит "независимость" в БЭМ?

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

Как грамотно сменить в этом случае отображение сразу у большого количества блоков?

Хочу задать глупый вопрос. Думаю новичкам можно.

Если есть строго текстовая страница (заголовки, абзацы итд), что будет блоками, элементами? Правильно понимаю, что все h и p это блоки?

Не нашла в actions возможности подождать возникновения события. Нужно уметь ждать window.onload

Также кажется я это уже репортила (не помню)? Но в issues нет задач про event ни открытых ни закрытых.

/cc @arikon @SevInf

Всем привет! У меня вот какой вопрос. Часто бывает что у блок появляется динамический модификатор, по типу _state_active. Как по BEM правильно добавлять изменения в дочерних блоках? Вот 2 вариант, возможно оба не верных по BEM: 1) Файл main.less

.main {
  &_state_active {
    .menu {
      background: blue;
    }
  }
}

2) Файл menu.less

.menu {
  .main_state_active & {
    background: blue;
  }
}

Ребят, у меня такая ситуация. Начинаю использовать bem-components и bemjson для прототипирования. Мне нужно заменить базовый желтый цвет (в этом есть необходимость именно для наших прототипов).

Какой самый "ювелирный" способ переопределять базовые цвета темы. Я правильно понимаю, что цвета у каждого компонента жестко прописаны, а не вынесены в переменные.? Нет возможности поменять значение где-то в одном месте, а нужно руками пробегаться по компонентам. Либо подключать свой файл стилей, где все переопределить.

Всем привет! Подскажите, пожалуйста. Есть код bemjson.js, который выводит две группы div'вов с соответсвтующим содержимым. В моем случае это группы

Library: 
    audio
    video
    software
Store:
    video

Сам код bemjson

{
block: 'media',
content: [
    {
    content: 'Library:',
    audio: 'audio',
    video: 'video',
    software: 'software'
    },
    {
    content: 'Store:',
    video: 'video'      
    }

    ].map(function(item) {
        return {
        block: 'library-item',
        mods: { image: 'yes' },
        content: {
            block : 'group',
            mix: { block: 'library-item', elem: 'group' },
            content : [
                {
                    elem: 'desc',
                    mix: { block: 'library-item', elem: 'desc' },
                    content: item.content
                },
                {
                    block: 'list',
                    mix: { block: 'library-item', elem: 'list' },
                    content: item.books

                },
                {
                    block: 'list',
                    mix: { block: 'library-item', elem: 'list' },
                    content: item.audio

                },
                {
                    block: 'list',
                    mix: { block: 'library-item', elem: 'list' },
                    content: item.video                                         
                },
                {
                    block: 'list',
                    mix: { block: 'library-item', elem: 'list' },
                    content: item.software

                }

            ]
        }

    };
    })
},

Из кода видно, что в группе library три элемента, а в группе Store - один. Вопрос: как мне не выводить или скрыть те элементы в группах, которые незаполнены, потому что сейчас данный код формирует пустые дивы. Это не дает возможности применять какие-то стили.

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 прямо очень сильно расходится с тем, что написано в разделе.

Здравствуйте, пытаюсь прикрутить тесты к своим блокам.

При запуске тестов: node_modules/.bin/enb make specs

Получаю такой результат:

Failed to start mocha: Init timeout Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL.... Domains, protocols and ports must match.

Не подскажите как это можно решить ?

Я не встречал обсуждения по этому вопросу, поэтому открою новую тему.

Кажется, что для достижения цели собирать в бандл только нужные сущности, было бы неплохо разнести декларации зависимостей по конкретным технологиям. Уже сейчас это возможно для клиентского JS при использовании технологии enb-modules/deps-with-modules, но совсем круто было бы иметь возможность делать так и в серверном JS (сейчас это обычно "привы"), и в BEMHTML/BH, и в CSS.

Есть технология deps-by-tech, но лучше было бы декларировать зависимости там, где это нужно непосредственно - в коде технологий и еще лучше там, где это возможно, получать зависимости явно через DI. Мне кажется, YModules в клиентском JS - очень удачный пример.

Я уже на 2х человеках попробовала вот эту ветку https://github.com/varya/varya.github.com/tree/features/gemini У них установлен только PhantomJS, и скриншоты нормально снимаются и тесты проходят (там только Chrome тесты) ChromeDriver или Selenium они не устанавливали, оба на Mac. Получается ChromeDriver не нужен?

Как подключить enb к express, что б при изменении node.js файлов проект автоматом пересобирался?