mllnr@mllnr-osx2 ~/Desktop/vizor $ enb make specs 03:41:17.921 - build started 03:41:17.946 - [rebuild] [azaza/auth/auth.bemjson.js] file-provider 03:41:17.948 - [rebuild] [azaza/auth/auth.base.bemdecl.js] file-provider 03:41:17.953 - [rebuild] [azaza/auth/auth.levels] levels 03:41:17.955 - [rebuild] [azaza/auth/auth.base.files] files 03:41:17.955 - [rebuild] [azaza/auth/auth.base.dirs] files 03:41:17.957 - [rebuild] [azaza/auth/auth.bemjson.bemdecl.js] bemjson-to-bemdecl 03:41:17.958 - [rebuild] [azaza/auth/auth.spec-js.bemdecl.js] deps-by-tech-to-bemdecl 03:41:17.961 - [rebuild] [azaza/auth/auth.pure.spec.js] borschik-include-js 03:41:17.963 - [rebuild] [azaza/auth/auth.bemdecl.js] merge-deps 03:41:17.968 - [rebuild] [azaza/auth/auth.deps.js] deps-old 03:41:17.968 - [rebuild] [azaza/auth/auth.files] files 03:41:17.968 - [rebuild] [azaza/auth/auth.dirs] files 03:41:18.040 - [rebuild] [azaza/auth/auth.spec-js.bemhtml.bemdecl.js] deps-by-tech-to-bemdecl 03:41:18.040 - [rebuild] [azaza/auth/auth.js.bemhtml.bemdecl.js] deps-by-tech-to-bemdecl 03:41:18.042 - [rebuild] [azaza/auth/auth.css] css-stylus 03:41:18.043 - [rebuild] [azaza/auth/auth.source.browser.js] borschik-include-js 03:41:18.044 - [rebuild] [azaza/auth/auth.bemhtml.bemdecl.js] merge-bemdecl 03:41:18.046 - [rebuild] [azaza/auth/auth.bemhtml.deps.js] deps-old 03:41:18.046 - [rebuild] [azaza/auth/auth.bemhtml.files] files 03:41:18.046 - [rebuild] [azaza/auth/auth.bemhtml.dirs] files 03:41:18.056 - [rebuild] [azaza/auth/auth.browser.js] prepend-modules 03:41:18.394 - [rebuild] [azaza/auth/auth.bemhtml.js] bemhtml-old 03:41:18.396 - [rebuild] [azaza/auth/auth.html] html-from-bemjson 03:41:18.399 - [rebuild] [azaza/auth/auth.browser.bemhtml.js] bemhtml-old 03:41:18.400 - [rebuild] [azaza/auth/auth.pre.spec.js] file-merge 03:41:18.548 - [rebuild] [azaza/auth/auth.spec.js] borschik 03:41:27.107 - [spec] [azaza/auth/auth.html] Failed to start mocha: Init timeout Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file:///usr/local/lib/node_modules/enb-bem-specs/node_modules/mocha-phantomjs/lib/mocha-phantomjs.coffee. Domains, protocols and ports must match.

03:41:27.107 - build failed 03:41:27.107 - build failed Error: specs: 1 failing at /usr/local/lib/node_modules/enb-bem-specs/lib/runner.js:140:31 at Array.0 (/usr/local/lib/node_modules/enb-bem-specs/node_modules/vow/lib/vow.js:699:56) at Object.callFns as _onImmediate at processImmediate as _immediateCallback

Пол-ночи гугления не помогли( В интернетах пишут, что это баг phantomjs, но, вроде, уже пофикшеный, судя по issue в github'е. Может быть кто-нибудь сталкивался?

как добавить meta теги в шаблон page?

Почему часто дописывая новое свойство в препроцессор styl, у меня все ломается. Перезапуск сервера ничего не решает. Проблема иногда решается переименованием блока, и всегда решается установкой модификатора. Может есть какая-то команда для обновления стилей, а я ее пропустил, прослушивая лекции. Нехочится плодить модификаторы для общих свойств всего блока. P.S. Да и firebug это новое свойство тоже не видит.

Выпустили большой и жирный шестой дайджест новостей БЭМ с новой рубрикой — «Инкубатор БЭМ-проектов».

Так как в нашу организацию bem-incubator вступает все больше и больше разработчиков сообщества БЭМ, которые делают проекты с помощью технологии и хотят развивать и поддерживать их вместе, настало время открыть рубрику и делиться новостями и ссылками на полезные вещи.

Последние проекты Инкубатора:

• ng-bem-components от Алексея Гурьянова (@Guria) — это обертка, которая помогает использовать bem-components в проекте на Angular. Посмотреть на результат в деле можно здесь.
• enb-ng-techs от него же предоставляет технологии ng-annotate и ng-templates для сборки Angular-проектов на ENB.
• bem-flux от Романа Парадеева (@sameoldmadness) — это реализация FLUX-парадигмы для bem-core.
• html2bemjson от Владимира Гриненко (@tadatuta), как и следует из названия, позволяет превратить любой HTML-код в BEMJSON. Недавно вышла новая версия пакета.
• Антон Виноградов (@awinogradov) выпустил мажорный релиз bem-grid 2.0.0, в рамках которого сетка перешла на использование lost.
• bem-scrollspy от Евгения Баранова (@kompolom) — это реализациея scrollspy на i-bem.js.

Если у вас есть полезные инструменты или библиотеки на БЭМ, присоединяйтесь к нашему БЭМ-инкубатору, и мы обязательно расскажем о них в следующих выпусках!

Ну и поддерживайте наш дайджест в твиттере :)

Этот метод всегда возвращает закешированный результат, есть способы обойти?

Есть ли какие либо методы для работы с промисами в i-bem.js? Собственно у меня AJAX запрос получаем данные с сервера(для этого у блока метод getBlabla). Он вызывается при изменении контролов, так вот есть ли какая либо реализация промисов, что бы повеситься на событие исполнения метода getBlabla? У меня только идея работая с модификаторами, при успешном выполнении AJAX вешаем какой нибудь модификатор upload и на событие изменения модификатора выполняем нужный код, может есть более изящное решение?

Немного освоился с установкой и созданием блоков. Могу подключить блоки через bemjson из bem-components. Вывожу блоки, хотелось бы их как-то разместить по странице Какую css сетку для структуры лучше использовать?

Доброго времени!

Для создания проекта использовал «yo bem-stub». Выбранные основные технологии: bemtree, bemjson, bh. Выбранные уровни переопределения: desktop, touch-pad, touch-phone. Сборщик — ENB.

Как при описании блока «page», например, в «desktop.bundles/index/index.bemjson.js» не указывать параметр favicon, а использовать значение и ресурсы самого блока, переопределенного на уровне «common»?

Заранее спасибо за помощь!

Столкнулся с проблемой что borschik не перемещает файлы шрифтов с форматом .woff2 Это баг или фича?

Всем привет. Помогите разобраться. Вешаю модификатор на блок при скролле следующим способом:

modules.define('counter', ['i-bem__dom', 'jquery'], function (provide, BEMDOM, $) {
    provide(BEMDOM.decl(this.name, {
        onSetMod: {
        js: {
            inited: function () {

            this.bindToWin('scroll', function(e) {

            // устанавливаем модификатор

            }); 
                   }
              }
         }
    }))
});

Вопросы:

1. Как модифицировать и сделать так, чтобы установка модификатора происходила при прокрутке страницы на 500 пикселей, например.
2. При прокрутке страницы до определенного блока, например, block "b2"

Пробовал так:

var scroll = $(this).scrollTop();

if (scroll >= 500) {
// вешаем модификатор
};

Не получилось

Здравствуйте. Возник следующий вопрос. Смотрел вебинар https://events.yandex.ru/lib/talks/2890/. Вот исходники - https://github.com/bem-events/beminar-3/blob/master/gulpfile.js Как переписать таск, который отвечает за перенос картинок, чтобы они копировались даже если блок не используется на странице, т.е. без использования функции getFileNames?

gulp.task('images', function() { gulp.src('common.blocks/*/.{jpg,png,svg}') .pipe(gulp.dest(params.out + '/images/')); });

Вот так он в images переносит картинки вместе с папками, в которых они лежат. Заранее спасибо!

Хотелось бы использовать внеш. либу типа selectize на проекте. Добавил на проект с помощью bower. Основные файлы теперь в libs/selectize/dist/css/selectize.css и соотв. также js. Как теперь проще всего добавить его в сборку (помимо копи-пасты)?

Пока вижу только вариант создать симлинки вида common.blocks/selectize/selectize.css -> ../../libs/selectize/dist/css/selectize.css

В треде про использование БЭМ на небольших проектах Николай Громов пожаловался, что написание BEMJSON требует больше времени, чем написание HTML с помощью emmet.

И хотя время на набор кода не кажется чем-то существенным ни в процентном соотношении со временем на обдумывание или отладку, ни в абсолютных значениях, подумалось, что потратить несколько часов на написание аналога emmet для BEMJSON — это неплохой способ провести вечер ;)

Так появился пакет bemmet, который умеет разворачивать аббривиатуры вроде b1>__e1*2>b3_theme_islands+_state_active{hello} в BEMJSON:

{
    block: 'b1',
    content: [
        {
            block: 'b1',
            elem: 'e1',
            content: [
                {
                    block: 'b3',
                    mods: { theme: 'islands' },
                    content: {}
                },
                {
                    block: 'b1',
                    mods: { state: 'active' },
                    content: 'hello'
                }
            ]
        },
        {
            block: 'b1',
            elem: 'e1',
            content: [
                {
                    block: 'b3',
                    mods: { theme: 'islands' },
                    content: {}
                },
                {
                    block: 'b1',
                    mods: { state: 'active' },
                    content: 'hello'
                }
            ]
        }
    ]
}

Через опции можно конфигурировать кастомный нейминг — под капотом используется bem-naming. Метод stringify() поддерживает опции про индентацию и кавычки — используется stringify-object.

Попробовать bemmet в действии можно с помощью online-демки. Вы также можете сразу установить его в свой редактор с помощью плагинов для Sublime Text и Atom.

Буду благодарен, если кто-нибудь сделает плагины и для других редакторов.

Приятного использования!

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

Случайно выяснил, что борщик минимизирует css как-то не очень хорошо.

Работаю с enb-borshchik

Дело в том, что он не производит семантическое объединение классов. Которое просто необходимо для тех случаев когда хотим использовать base64 в css.

Что же это такое семантическое объединение?

Рассмотрим пример:

Есть файл a.css

.a {
    left: 20px;
    background: #red;
}

.b {
    left: 1px;
}

.k .a {
    left: 20px;
    background: #red;
}

.a {
    right: 20px;
    left: 1px;
    background: url(./resources/images/1280x720-tv-background__overlay_info.png);
}

.b {
    left: 2px;
}

.k .a {
    right: 20px;
    left: 1px;
    background: url(./resources/images/1280x720-tv-background__overlay_info.png);
}

После семантического объединения должны получить следующее:

.a, .k .a{
    right:20px;
    left:1px;
    background:url(resources/images/1280x720-tv-background__overlay_info.png)
}
.b { left:2px }

Делать это умеет библиотека: https://www.npmjs.com/package/clean-css

с включенной опцией --semantic-merging

Вопрос - как решить задачу семантической сборки css для enb?

Видел, что есть

Может уже решали данную проблему до меня?

Сложности с borschik'ом, примеры из доков не помогли(

Имеется такая структура:

blocks/
    └── icon/
        ├── icon.styl
        ├── icon.bemhtml
        └── fonts/
            ├── icons.woff
            ├── icons.svg
            └── icons.ttf
pages/
    └── index/
        └── index.bemjson.js

И после сборки хочется чтобы все шрифты были в папке fonts и все картинки в img

pages/
    └── index/
        ├── index.bemjson.js
        ├── img/
        └── fonts/
            ├── ...
            └── icons.ttf

Привет.

Есть такой вот блок:

{
            block: 'dropdown',
            mix: {
                block: 'services',
                elem: 'dropdown'
            },
            mods: {
                switcher: 'link'
            },
            switcher: {
                block: 'link',
                mods: {
                    pseudo: true
                },
                mix: {
                    block: 'services',
                    elem: 'icon',
                    content: '?'
                },
                content: '?'
            },
            popup: {
                block: 'popup',
                mods: {
                    theme: 'islands',
                    target: 'position',
                    autoclosable: true
                },
                mix: [
                    {
                        block: 'services',
                        elem: 'popup'
                    }
                ],
                directions: [
                    'bottom-right'
                ],
                mainOffset: -13,
                secondaryOffset: -54,
                content: [
                    {
                        elem: 'tail',
                        mix: {
                            block: 'services',
                            elem: 'tail'
                        }
                    },
                    {
                        block: 'services',
                        elem: 'p',
                        content: 'Lorem ipsum и так далее'
                    },
                ]
            }
        }

При клике на свитчер в браузер вываливается "Uncaught TypeError: Cannot read property 'setAnchor' of null". Версия bem-components 2.1.0. Что могло пойти не так?

UPD. Грешу на сборочный процесс, потому что подключенные напрямую с cdn яндекса сборки работают без ошибок. UPD. А в Firefox идет ошибка "this.findBlockInside(...) is null"

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

В моей ситуации необходимо обязательно темы делать отдельными css файлами.

Возникло пару вопросов, возможно, совершенно нубских, так что заранее извиняюсь) Итак.

Cетки

Как правильнее использовать сетки, в том числе с БЭМ-нотацией, к примеру bem-grid?

Задача: есть блок features, в него вложены блоки features__item, нужно сделать сетку. Как я понял, есть 3 варианта:

1.Вложить эти блоки в сетку:

{
     block : 'features',
     content : [
         {
             block : 'row',
             content: [
                 {
                     elem : 'col',
                     mods : { sw : 12},
                     content : [
                         {
                             block: 'features',
                             elem : 'item',
                             content : ''
                         }
                     ]
                 }
             ]
         }
     ]
 }

2.Примиксовать их

{
    block : 'features',
    mix : { block : 'row' },
    content : [
        {
            elem : 'item',
            mix : [ { block : 'row', elem : 'col', mods : { sw : 12} } ],
            content : ''
        }
    ]
}

3.Использовать миксины

.features
  row()

Вопрос: Какой вариант лучше?

Типографика

Какие единицы использовать (особенно для адаптива): rem, em, px?

Мне удобно делать, например, так: html-font_baze = 62.5% (ну или сразу 10px) и дальше делать шрифты в rem. Насколько это труъ в БЭМ?

Здравствуйте. Недавно начал изучать БЭМ. Отказ от наследования дается мне тяжело. Нужен совет как лучше обыграть некоторые ситуации. 1) Ситуация с табами. Имеются стили для меню табов по умолчанию.

.tab-nav {}
.tab-nav__list {}
.tab-nav__item {}
.tab-nav__link {}

По дизайну есть несколько видов табов. Как правильно по БЭМ стилизовать табы? Использовать модификаторы для каждого элемена?

.tab-nav--news {}
.tab-nav__list--news {}
.tab-nav__item--news {}
.tab-nav__link--news {}

Или можно обойтись каскадом?

.tab-nav--news {}
.tab-nav--news .tab-nav__list {}
.tab-nav--news .tab-nav__item {}
.tab-nav--news .tab-nav__link {}

Еще ситуация с активным элементов. Плагин ставит свой класс активного элемента. Допускается ли такая каскадная стилизация активного элемента?

.tab-nav__item.ui-tabs-active .tab-nav__link {}

2) Ситуация когда по наведению на один элемент меняются стили соседних/вложенных элементов. Допусти при наведении на ссылку нужно показывать скрытый блок(менять его цвет и т.д.) в соседнем элементе.

<div class="item">
    <a class="item__link link-action">link</a>
    <div class="item__body">
        <div class="item__info">hidden</div>
    </div>
</div>

.item__link:hover + .item__body .item__info {}

Допускается ли такая запись по БЭМ? Как записать правильней?

3) Наименование классов. По БЭМ имя класса пишется так блок__элемент--модификатор-элемента. Допускается ли такая запись блок--модификатор-блока__элемент?

Подскажите пожалуйста, нормальная ли практика создавать global блок с переменными и миксинами в stylus и просто привязывать в deps к page блоку?

Или глобальные переменные и миксины в БЭМ лучше не использовать?

Всем привет!

Хочу нести в массы БЭМ методологию и только bem-core в качестве front-end фреймворка (в основном из-за i-bem). Отсюда вопросы: 1) Есть ли готовые сборки bem-core? Если нет, думаю, собрать bem-core в один JS файлик и распространять как bower-пакетик, периодически синкая с bem-core. 2) Также хочу заменить ymodules на AMD, т.к. ни один пакетный менеджер не имеет поддержки ymodules. Думаю использовать webpack, у него тоже есть поддержка асинхронного инита. Может уже есть такое? 3) Есть ли примеры использования i-bem без enb и вот этого всего? Если нет — буду писать.)

http://ru.stackoverflow.com/questions/439143/Именование-файлов-с-классами-по-БЭМ

Так получилось, что блок изначально есть на странице, но внутри элемента с display: none. И если блок в этот момент проинициализируется, то он неправильно всё посчитает.

Я решил сделать так:

{
    beforeSetMod: {
            js: {
                inited: function() {
                    if (this.domElem.is(':hidden')) {
                            return false;
                    }
                }
            }
        },
}

а когда внешний элемент меняет свою видимость, то делаю

BEMDOM.init($elem);

Однако ничего не работает ;) Вложенный блок считает, что его уже пытались проинициализировать и не хочет инициализироваться повторно.

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

Сейчас подключаю клиентские шаблоны так:

{
  tech: 'js',
  sholdDeps: [
     {
        block: 'modal',
        tech: 'bemhtml'
     }
  ]
}

Хотелось бы не писать tech: bemhtml каждому блоку, а написать один раз. Это возможно?

Начал разбираться с enb, как лучше всего подключить библиотеки для stylus?