По что мне такое наказание?

При сборке - js собирается в один файл.

Как общий js для всех страниц вынести в отдельную сборку? А то много дублирования происходит... И слишком раздутые файлы.

Опишу что я делаю: В каталоге проекта yii я создал подкаталог bem. Для копирования файлов сборки (js, css) я использую gulp. А вот html на php руками уже правлю.

bem-stub используется для прототипирования

Всем привет :)

Я вот не совсем понимаю назначение bemtree... Для меня он выглядит некой лишней прослойкой (возможно я его не до конца понимаю).

BEM дерево у нас ведь могут генерировать и BH и BEMHTML. Зачем использовать для этого ещё и bemtree? Или его можно не использовать?

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

this.__popup = this.findBlockInside('popup', 'popup');
this.__popup.on({ modName : 'visible', modVal : true }, function() {
  this.bindToDoc('keydown', this._onKeyDown, this);
}, this);

Есть способ сделать тоже самое лаконичнее и эстетичнее?

Здравствуйте, сейчас, когда я задаю ignoreElements('.my-class') на скриншоте Gemini закрашивается черным только первый найденный элемент, а как добавлять в игнор несколько элементов с одним селектором?

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

Привет, друзья! Вот и закончил я свой сайт, по технологии БЭМ. И мне не хватает последнего - это собрать проект. Я в корни не понимаю как это сделать, где можно почитать , как правильно это делать? Что собственно делал я? Ввел такую команду (node_modules/.bin/enb make) он чет насобирал там и выдал что финиш, но где исходные файлы , которые он якобы собрал, я не могу найти...Куда он их вообще складывает? Есть еще ряд вопросов , а именно:

1) Использовал я project-stub, где выбрал не bem-tools, а enb. Но , запуск сервера почему-то, по команде npm-start не происходит, а только по bem-server. Почему так?Или так и должно быть?

2) Правильно ли я делал , что складывал картинки непосредственно в папку с сущностями ? Например __item и там лежат картинки , сборщик потом сам мне закинет все картинки в папку img и пути поменяет в коде?

3) Теперь вопрос о сторонних папках. Я создал в корневой папке проекта , папку со шрифтами , и от туда их подключаю, верно ли так поступать?А если мне понадобится какой-нибудь jquery плагин , который я хочу выкачивать с бовера, мне надо будет создать папку bower_components в самом проекте, на одном уровне с папками common.blocks, libs и т.д ? P.S: Вопрос о сборке , особой важности.. Спасибо!

Вопрос к команде БЭМа.

Есть ли правила написания стиля js кода по БЭМу?

В частности интересует названия методов, хранения временных данных и т.д. В каких случаях ставятся подчёркивание _, в каких двойное подчёркивание __, а в каких без него.

Пока примерно так понял, что __ для элементов (и внутренних блоков) _ для методов а вот без подчёркиваний не понял когда лучше использовать

П.Н. Сам вообще не очень люблю подчёркивания, использую только для обозначения временных данных.

В документации описано достаточно про методы. Но как доходит до статических, то как-то вот так.

Можно более подробно узнать их назначении? Допустим я делаю поиск блока

this.__smaller = this.findBlockInside('smaller')

Как теперь обращаться и к каким методам? Если посмотреть информацию в консоли

console.log(this.__smaller)

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

__proto__

и к ним можно обращаться просто

this.__smaller.goodJump()

В связи с данной ситуацией у меня появились большие сомнения о том, что понял назначение статистических методов. Только что-то далёкое, но не осознанное.

Как-нибудь можно самому дооформить данный блок?А то я убираю модификатор islands и там треш получается. Не совсем понятно, как правильно его оформлять. Так как , лезу в код и вижу, что надо отдельно стилизовать кнопку по которой щелкаем, отдельно выпадающий список. А я например, хочу вместо желтого цвета, сделать синий , приходиться прописывать все тоже самое у себя на уровне проекта и там менять или так и надо?

Привет! Мне нужно будет провести мастер-класс по БЭМ на час. Не презентацию, а именно мастер-класс, когда люди сидят со своими компьютерами и вместе что-то делают. Важно сосредоточиться именно на CSS и немного на декомпозиции и сборке. JavaScript и шаблоны пока не нужны. Кто-нибудь делал подобное? Может быть в ШРИ такое было? Поделитесь, пожалуйста, черновиками, ссылками на репозитории или (ну, вдруг мне повезет) видео. Спасибо!

Вот хочется всего и чтобы фризил и собирал мне в нужную структуру.

вот есть у меня папка bundles/index/*.*

В ней собралось все что надо, и css и js.

Теперь хочу, чтобы из этой папки мне собралась структура вот такого типа:

build/ ../css ../../img ../../../logo-sadfasdfsdfsdf234234.png ../../index-asdsdasdsdsdsd213213.css ../js ../../index-asdasdsad.js ../index.html

Как это сделать посредством enb+borschik?

Или это уже надо делать через gulp?

Привет , ребят. Как мне вставить собственный атрибут. Например data-custom, как это правильно в bem-json оформить.

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

this.setMod( this.elem('right'), 'size', 'xxxxl' );

много раз приходится дублировать this... А иногда не сразу понятно на что он ссылается. При создании одного из блоков я подобрал для себя решение, может кому пригодится.

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

var block;

function elem(name) {
    return block.elem(name);
}

BEMDOM.decl(this.name, {
    onSetMod: {
        'js' : {
            'inited' : function() {
                block = this;
            }
        }
    },
}, {});

provide(BEMDOM);

});

После чего к блоку всегда можно обращаться через block а к элементу через elem('name').

например установка модификатора для элемента теперь будет выглядеть так:

block.setMod( elem('right'), 'size', 'xxxxl' );

из плюсов

• однозначность block
• более короткая запись для доступа к элементам elem('name')
• 4 строчки кода

П.Н. Данное решение актуально для bem-core@v2, в bem-core@v3 - решение будет лучше из коробки.

@tatudata ниже объяснил, почему так нельзя. В ответах есть другие предложения.

Что есть в ответах

Добавлена реализация короткой записи модификации элементов вида:

this.el('body')
       .setMod('size', 'xxx')
       .setMod('color', 'gray);

Столкнулся со следующей проблемой: в коммите https://github.com/bem/bem-tools/commit/dc3e59c6fddd7c928d062042f4da6838124711de был добавлен forceCache для разделённых потоков.

При этом происходит следующее: читается files.json, создаются сборки, обновляется files.json.

Проблема возникает в том случае, если изначально files.json по каким-либо причинам не актуален ( bem был запущен сначала в одной ветке, а потом в другой. А папка cache в .gitignore ), то, соответственно, и итоговые сборки получаются не верные.

Так вот можно ли как-нибудь этого избежать не избавляясь от разделённых потоков ( которые приводят к включению forceCache )? И в чём оптимизация, если в итоге files.json всё равно переиндексируется и обновляется ( но только позже, то есть если потом снова запустить bem, то так как files.json становится актуальным всё отрабатывает предсказуемо )?

Добрый день,

Возможно плохо искал и этот вопрос уже звучал, или он такой простой, что на него все знают ответ. Никак не могу разобраться, как, например, на лендинге, сделать переход внутри страницы? Т.е как добавить для блока элемент id для использования его в качестве якоря?

Добре коллеги!

Скажите пожалуйста, вот собираю я через enb некую технологию.

И в конечном итоге все чанки собираются в один файл.

Но мне нужно добавить в этот файл код который просто обязан быть в конце собранного фала.

Как это сделать?

Вот есть функция builder https://github.com/enb-bem/enb-xjst/blob/master/techs/bemhtml.js#L101

А как добавить нечто особенное в начало или конец собираемого фала?

При написании проекта с нуля на bem-stub - структура делается по bemjson.

А как править структуру в bem-forum?

Добрый день :) Или кому-то ещё утро ;)

Как использовать глобальные переменные less, sass, stylus и т.д. при написании кода?

У меня есть соображение, что нужно объявить блок с ними и потом его просто подключить в проекте где-то вначале, но есть сомнения.

Как это сделать правильней?

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

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

Давно хочу спросить: как, используя bem-core и bem-components собрать статичный html, который можно будет использовать на любой платформе. Т.е. я хочу, например, чтобы блоки page и ua были собраны из всех слоёв переопределения (touch, desktop).

Дело в том, что библиотеки не поддерживают работу этих слоёв одновременно, и более того - не собираются.

Как быть, что делать?

Ребят, делаю сайт , а у меня блок footer и меню одинаковые на всех страницах , вместе с контентом. Как - то можно вынести их в папку и из этой папки, подключать всем страницам , чтобы не копипастить в каждую страницу ?

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

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

БЭМ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Привет. Тут что то у меня не загрузились картинки http://awesomescreenshot.com/0294ij0mdd Версия браузера chrome Версия 42.0.2311.11 dev (64-bit) OS Lubuntu 14.10

И если он не работает по виндой. То тогда как же верстальщики верстают сайты из под линукса? Там же нет фотошопа ? Или как в яндексе устроено рабочее окружение верстальщика... Мне например мешает перейти на линукс только отсутствие фотошопа и ie для тестов.

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

Вот мой:

Как с помощью BH компилировать в JST:

{
    block: 'menu',
    content: [
        { elem: 'item', content: '1' },
        { elem: 'item', content: '2' }
    ]
}

bh.match('jst', function(ctx) {
    ctx.tag(null);
});

bh.match('menu', function(ctx) {
    ctx.tag('ul');
});

bh.match('menu__item', function(ctx) {
    ctx.tag('li');
});


bh.match('menu', function(ctx) {

    ctx.content([
        { 
            block: 'jst',
            content: '<% if (true) { %>'
        },
        ctx.content(),
        { 
            block: 'jst',
            content: '<% } %>'
        },
    ], true);

});

Результат:

<ul class="menu">
<% if (a) { %>
<li class="menu__item">
1
</li>
<li class="menu__item">
2
</li>
<% } %>
</ul>