Доброго времени суток. Где можно посмотреть UI Elements Naming Convention (соглашение как называть тот или иной контрол графического интерфейса), используемый в Яндексе?

Если использовать нотацию вида

BEMDOM.decl(this.name, {
    method: function() {}
}, {
    prop: value
});

то в панельке Structure в WebStorm мне не будут доступны методы и свойства блока. Есть какой-то способ это починить?

Я придумал только такой ход:

var instance = {
    method: function() {}
};
var constructor = {
    prop: value
}
BEMDOM.decl(this.name, instance, constructor);

Есть другие варианты?

Здравствуйте. Я прототипирую в Axure. Портал крупный и сложный. Внедряю в прототип бэм.

Сейчас возникла задача описать прототип многоуровневым вложенным списком. Примерно так: Раздел 1 -Шапка --лого --навигация -блок1 --эл1 --эл2

То есть, это тот же самый прототип, просто описан он словами. Начал майндмэпить в xmind. Столкнулся с банальной проблемой - если меняется блок, то приходится в ручную его править везде, где он есть. Решения два: где-нибудь на холсте описать блок (перечислив его элементы) и либо 1) от нужных элементов пустить стрелочки в те страницы, где они встречаются, 2) на страницах просто указывать название блока и перечислить только нужные элементы этого блока тупо их порядковыми номерами. Начал работать по второму решению. Перечислять элементы блока необходимо, потому что, допустим, один и тот же блок выглядит по разному при разных правах доступа. Например, у админа портала подгрузятся кнопки, позволяющие редактировать элементы. Про модификаторы вообще молчу - их несколько и у блока, и у элементов.

И опять столкнулся с банальной проблемой. Указав на страницах чисто блоки с номерами их элементов, мне все равно приходилось всё и везде править в ручную когда менялась нумерация или названия блоков.

Теперь, что мне нужно (обязательно первое условие, последующие были бы просто очень приятным дополнением): 1) возможность добавления мастер шаблона для блоков. То есть, прописал один раз блок, а потом расклонировал его по разделам карты ума - и клоны автоматически апдейтятся при изменении мастер-шаблона. 2) возможность быстро менять список нужных элементов в клонах. Хотя бы галками, или галками в выпадающем списке. 3) возможность сопоставить словесной карте ума графические эквиваленты, чтобы потом можно было нажать на кнопку "сгенерировать" и вуаля - мы имеем наглядный графический прототип портала.

Есть ли такие инструменты? Или придётся разрабатывать свой инструмент (думаю, с помощью простого html и работой с файлами, а не программой вроде xmind это вполне реально). Если да, то как лучше создать такой инструмент (или алгоритм действий), учитывая что я дизайнер и программировать не умею (разбираюсь только в html)

Спасибо!

Дима Белицкий, в своем докладе в Москве выносит все миксы блоков в bemhtml блока, хотелось бы узнать насколько это правильно, выходит надо выносить миксы и модификаторы? Вообщем вопрос в том, когда стоит выносить сущности, а когда нет в bemhtml.

Да, и отсортируте плз теги по алфавиту

Здравствуйте!

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

Структура такая:

b-control
    __title
        b-control__title.less

   __descr
       b-control__descr.less

b-control.less

При таком подходе получается, чтобы навесить при наведении на блок b-control hover для заголовока b-control__title я должен внутри файла b-control.less сделать следующую запись:

.b-control {
    &:hover {
       .b-control__title {
           color: @green;
       }
   }
}

Мне кажется не правильным прописывать внутри файла b-control.less стили для состояния элемента, который описан в другом файле. Как правильно с точки зрения БЭМ реализовать такой кейс? При условии что навешивать на сам заголовок hover я не могу, нужно чтоб при наведении на контейнер он изменялся.

Правильно ли будет вынести content (текст) блока в bemhtml шаблон.

Блок используется в нескольких местах с одинаковым содержимым (текстом), ведь прописывать один и тот же текст в разных местах плохое решение

Всем привет. Прислали вот такой скриншот. https://yadi.sk/i/5-NyX9-Abc3he Попап себя отлично ведет на разрешениях меньше 2000px. Когда больше почему то съезжает на 20px.

В js ничего странного.

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

provide(BEMDOM.decl(this.name, {
    onSetMod : {
        'js' : {
            'inited' : function() {
                var control = this.findBlockInside({ block : 'checkbox', modName : 'theme', modVal : 'menu'});
                var popup = this.findBlockInside({ block : 'popup', modName : 'theme', modVal : 'menu'});

                popup.setTarget(this);
                control.bindTo('click', function() {
                    popup.toggleMod('visible');
                });
            }
        }
    }
}));

});

В css похоеже тоже ничего не обычного. Сайт http://domjourvrn.ru .

Посмотрите может бага?

Вот такой вот у меня make файл, поставил, заинсталил все в libs npm/bower, но не взлетает js файл, пишет, что modules is not defined, так понимаем, что ym не подключается в начало, хотя объвление i-bem-dom. :( Как его подружить? Уже много способов вроде перепробовали, но ничего не получается.

module.exports = function(config) {
  config.node('pages/index', function(nodeConfig) {
    nodeConfig.addTechs([
      [ require('enb/techs/levels'), { levels: getLevels(config) } ],
      [ require("enb/techs/file-provider"), { target: "?.bemjson.js" } ],
      require("enb/techs/bemdecl-from-bemjson"),
      // [ require('enb/techs/file-provider'), { target: '?.bemdecl.js' } ],
      require('enb-bh/techs/bh-server'),
      require('enb-bh/techs/bh-client'),
      require('enb/techs/deps'),
      require('enb/techs/files'),
      require('enb/techs/css-stylus'),
      require('enb-bh/techs/html-from-bemjson'),
      [ require('enb-diverse-js/techs/browser-js'), { target: '?.pre.js' }],
      [ require('enb-modules/techs/prepend-modules'), { target: '?.js', source: '?.pre.js' }],
      // require('enb/techs/js'),
      // [ require('enb/techs/file-copy'), { sourceTarget: '?.js', destTarget: '_?.js' } ],
      [ require('enb/techs/file-copy'), { sourceTarget: '?.css', destTarget: '_?.css' } ]
    ]);


  nodeConfig.addTargets(['?.html', '?.bemdecl.js', '?.deps.js', '_?.js', '_?.css', ]);


  });
};


function getLevels(config) {
  return [
    {path: 'libs/bem-core/common.blocks', check: false},
    {path: 'libs/bem-core/desktop.blocks', check: false},
    {path: 'libs/bem-components/common.blocks', check: false},
    {path: 'libs/bem-components/desktop.blocks', check: false},
    {path: 'libs/bem-components/design/common.blocks', check: false},
    {path: 'libs/bem-components/design/desktop.blocks', check: false},
    {path: 'common.blocks', check: true},
    {path: 'desktop.blocks', check: true}
  ].map(function(levelPath) { return config.resolvePath(levelPath); });
}

Здравствуйте. По этой ссылке http://jsbin.com/xulado/7/edit размещено два экземпляра виджета табов. Примеры выдернуты из рабочего проекта. Цель — сделать виджеты, которые не поломают верстку и JS. К стилю контейнеров применены селекторы тем. Интересует насколько приемлемо с точки зрения методологии БЭМ применять такой способ изменения внешнего вида блоков. Может будет лучше дописывать к каждому элементу модификатор?

Могли бы показать какой-нибудь проект с таким кодом? Я вижу, что есть некий midleware в enb и есть возможность сделать builder, но хотелось бы посмотреть как это сделать "правильно", есть у кого примеры, которыми он может поделиться?

У меня есть некий блок с Голосованием (.vote). В нем есть две кнопки "За" и "Против" (button.voteaction). Так же у меня есть блок Кнопка (.btn). Кнопки "За"/"Против" должны быть блоками Кнопка (button.voteaction.btn) - т.е. микс получился. При клике на кнопки "За" или "Против" я хочу, что бы они выделялась цветом, например зеленым. Для этого у блока Кнопка есть модификатор green (.btn_theme_green) Т.е. при клике на voteaction с помощью JS я добавляю ей модификатор voteaction_active, но при это я должен добавить и класс btn_theme_green. Использовать в JS классы btn и btn_theme_green не хочется ибо кнопки могут быть заменены на другие (например, .btn34).

Скажите как правильно огранизовать взаимодействие этих двух блоков в JS?

Есть БЭМ блок, у которого прописаны свои поведения. Изначально его на странице нет. но в deps он прописан поэтому все исходники подгружаются. Так вот. Надо чтобы по событию нажатия кнопки, в DOM добавлялся этот блок. Таких блоков может быть добавлено много. Необходимо чтобы он при всем при том еще и работал. Каким образом это сделать?

Привет. Наткнулся на такую проблему. Когда делаю попап

 {
                block : 'popup',
                mods : { autoclosable : true },
               ...
}

Внутри которого есть блок select который в свою очередь использует блок popup, то по клику (выбору их селекта) попап родитель скрывается.

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

Кто-нибудь пробовал запускать преобразование большого количества таргетов? bh/html-from-bemjson-i18n намертво застревает, можно 20 минут смотреть, как оно потихоньку съедает память, но ни одного файла так и не появится. Проявляется при превышении определённого количества таргетов, windows 7. До этого при помощи bemtree успешно билдится такое же количество bemjson-файлов.

А пока пришлось наваять такую кашу в enb-make, чтобы билдить порциями https://gist.github.com/xdghcnt/501a7e9b293fd270405c

Эти выходные с BEMup'ом в Питере были просто чудесны! Не говоря про погоду, которая просто была сказочной, программа митапа была насыщенной, а многие приехали в Питер аж из Москвы посмотреть и пообщаться с нами. Спасибо, мы тронуты!! А еще нас много просили показать мастер-класс не самим, а сделать так, чтобы пришедшие участники могли писать код. А это ой как не просто! Почти 2 месяца подготовки заданий и написания тестов, сто раз проигранные в мозгу планы, трансляция, видео, зал, как все это соединить воедино, плюс тестирование на --котиках-- коллегах, и вот он долгожданный день! Это был урок, проверка, и круто, что все получилось! Даже коллеги не из службы БЭМ подходили и говорили: «Круто! Я сделал что-то сам на bem-core!» И да, нам есть, что теперь оттачивать дальше, к ноябрю А вы это, не расслабляйтесь! https://tech.yandex.ru/events/bemup/ :) Видео как всегда через 2 недели в разделе «Выступления», фото уже тут https://www.facebook.com/media/set/?set=a.825215090831947.1073741904.122612334425563&type=1, вопросы к нам можно писать в форум и помечать 2-мя метками — продукт и asktheteam

https://github.com/factorymn/bem-factory/tree/master/common.blocks/fancybox

Обернул fancybox в модульную систему. Мне кажется что не верно в данном случае провайдить jquery. Что там должно быть?

Как и в случае с https://github.com/bem/bem-forum-content-ru/issues/49 плагин работает из скоупа jquery

Есть какое-то стандартное решение?

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

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

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

Очевидно, что шапка сайта - блок. Она есть на всех страницах. А внутри шапки еще довольно-таки самостоятельные блоки: логотип, выпадающий список с языками, меню навигации, поп-ап с формой логин/пароль/войти, поп-ап с регистрацией. Или же эти объекты нужно считать элементами блока "шапка"?

То есть, у меня проблемы с логикой методологии, помогите разобраться.

Второй вопрос из этой же серии. В статье на хабре ( http://habrahabr.ru/company/yandex/blog/234905/ ) сказано:

Примеры элементов: навигационное меню (блок), содержащее пункты меню (элементы), таблица (блок), внутри которой строки, ячейки и заголовки (элементы).

В таблице - ячейки. Ячейка - элемент. Допустим, внутри ячейки мы имеем какой-то интерфейс, допустим - форму ввода каких-то данных, грубо говоря - пару полей и кнопка вроде "сохранить". Вот этот интерфейс внутри ячейки считать блоком? Блоком со своими элементами? То есть, может ли элемент внутри себя иметь блок? Как их в таком случае лучше называть? Допустим, таблица - блок с названием b-table. Следовательно, имя ячейки - b-table__cell. А как тогда назвать нашу формочку внутри ячейки, учитывая что она тоже блок? b-table-cell-form? b-cell-form? b-form?

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

Читать, что-то на форумах, в каких-то статьях и не понятном разделе "Руководства" - очень интересно, но кроме каши не дает ничего.

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

Нет примеров кратких но самодостаточных, большинство тем возникали на форуме.

Нигде не сказано, что новым трендом в данной технологии является выделения mVc в отдельный bundle design. Изобилие bem и enb в разных статьях, в документации должно быть что-то одно.

Ситуация вводящая в ступор:

• создаем страницу bem create -l desktop.bundles -b index на выходе получаем один файл index.bemjson.js;
• компилируем bem make, на выходе еще получаем 10 файлов.

WTF? Что за файлы, за что отвечают, являются ли они build файлами и не подлежат ручному редактированию? Почему финишные файлы называются по разному, например index.html _index.css _index.js? Нельзя ли результат компиляции, что не подразумевает ручного редактирование перенести в подпапку distr например?

Очень нужна документация, по каждой технологии, устаревшие технологии документировать не первостепенно. Показывать примеры и с подгрузкой данных через API, и динамическое изменение DOM.

Из того, что не критично, но хотелось бы получить:

1. право переопределять константы BEM_CLASS и BEM_PARAMS_ATTR, ну не нравится мне i-bem и data-bem, хочу получить js и data-js;
2. не нравится именование модулей i-bem__dom, i-bem как-то не вписывается в Code Style.

Из документаций которые покрывают 99% вопросов мне нравится https://docs.djangoproject.com/en/dev/ http://symfony.com/doc/current/index.html http://git-scm.com/doc - это те документации, которые рассказывает и о различных приемах, и о назначении, и полноценные use case.

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

Привет. Занимаюсь тем, что пытаюсь внедрить БЭМ стэк на уже готовый к первому релизу проект. Т.к. полностью и сразу мне его на БЭМ переводить никто не дает, то я решил поступить следующим образом, определить бандл components, в components.bemdecl.js объявить зависимости от всех блоков, которые у меня сейчас есть, и понемногу начинать разбивать код сайта на блоки там где я могу это безболезненно сделать. В принципе такой подход работает. Но меня напрягает необходимость после добавления нового блока в мой уровень, прописывать его в deps файла components.bemdecl.js, по-любому кто-то будет забывать это делать. Можно как-то сделать, чтобы у меня собирались все блоки со всеми элементами уровня по умолчанию, без необходимости править components.bemdecl.js?

Привет! Подскажите есть в природе enb или bem-tools технологии для работы с графикой(jpg/png/svg). Например блок с фоновой картинкой(картинка лежит гдето в папке блока)

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

Неправославный вопрос: кто-то пробовал разрабатывать, используя бем и Enb, под виндой? Работает ли? Какие могут возникнуть подводные камни?