Войти с помощью github

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

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

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

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

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

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

Второй вопрос из этой же серии. В статье на хабре ( 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, под виндой? Работает ли? Какие могут возникнуть подводные камни?

Подскажите как создать блок BEM (в идеале из BEMJSON) в runtime, например по событию нажатия на кнопку, и добавить его в к содержимому другого блока.

5 years ago

BEM + php

Подскажите как использовать php-скрипты при сборке страницы? Я только начал вникать в БЭМ и не въезжаю где писать серверную часть на php. В bemhtml описываю шаблон, в bemjson структуру блоков... где писать php-скрипты?

А кто-то использует subj?

Поделитесь как это использовать?

Решил я попробовать обернуть сторонний виджет в блок БЭМ, возьмем например Yandex Share

<script type="text/javascript" src="//yandex.st/share/share.js" 
    charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" 
    data-yashareQuickServices="vkontakte,facebook" data-yashareTheme="counter"></div>

Я создаю блок bem create -l desktop.blocks -b yashare с содержимым

# desktop.blocks/yashare/yashare.bemhtml
`block('yashare')(
    tag()('div'),
    bem()(false),
    cls()('yashare-auto-init'),
    attrs()({'data-yashareQuickServices': '...', 'data-yashareTheme': '...')
)
/* desktop.blocks/yashare/yashare.browser.js */
modules.define('yashare', ['loader_type_js'], function(provide, loader) {
    loader('//yandex.st/share/share.js', provide);
});

А теперь вопрос, как воспользоваться данным блоком, чтоб подключения share.js было единожды (это уже реализует loader), но только в случае наличия на странице блоков yashare?

Если в yashare.browser.js добавить modules.require(['yashare'], function() {}); то подключение скрипта будет вне зависимости от наличия на странице блоков.

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

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

Всем привет! Когда запускаю генератор, то на вопросе "Use design from bem-components? YES" вылетает такая ошибка http://floomby.ru/s2/hW686z Что это значит? Вроде пишет что нет какого-то модуля, вообщем не могу разобраться..

Я создаю несколько страниц командой bem create -l desktop.bundles -b about bem create -l desktop.bundles -b map

После выполнения bem make я получаю соответствующие css и js для каждой страницы, а как получить общий css и js для подключения на сайте?

И второй вопрос, на сколько я понял команда bem make не "минифицирует" js и css файлы?

P.S. за время написания данного текста, курсор раз 20 убегал в поле поиска, не удобно.

Что делаю не правильно?

modules.define('navigation', ['i-bem__dom'], function (provide, BEMDOM)
{
  provide(BEMDOM.decl({block: this.name}, {
    onSetMod: {
      'js': function ()
      {
        console.log("navigation активен")
      }
    }

  }, {
    live: function ()
    {
      this
        .liveBindTo('click', function ()
        {
          var wrapper = this.findBlockOutside({ blockName : 'wrapper'});
          if (this.hasMod("open")) {
            this.delMod("open");
            wrapper.delMod("compress");
          } else {
            this.setMod("open", "true");
            wrapper.setMod("compress", "true");
          }

        });

    }
  }));

});
modules.define('wrapper', ['i-bem__dom'], function (provide, BEMDOM)
{
  provide(BEMDOM.decl({block: this.name}, {
    onSetMod: {
      'js': function ()
      {
        console.log("wrapper активен")
      }
    }
  }, {
    live: false
  }));

});

this.findBlockOutside({blockName: 'wrapper'}) возвращает null

Кажется, я упустила что-то из документации по bemhtml. Хочу ответы на следующие простые вопросы:
1) как в bemhtml связать input-radio с label, когда radio не находится внутри label?
2) как определить в bemhtml input-radio и label, когда radio внутри label?
в обоих случаях radio одиночный.
Примеры видела, пост про radio (http://ru.bem.info/libs/bem-components/v2/desktop/radio/docs/) читала.

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

https://github.com/zxqfox/express-bem

И 3 плагина — .bemhtml.js, .bemtree.js, и собственно make через bem-tools.

Технически, наверное, .bemhtml.js может подключать и .bh.js, для этого нужно только подменить расширение, но протестировать не на чем.

Проект сыроват, хочется критики и идей. Если найдутся смельчаки и протестируют проект на enb — будет здорово. А если еще и соберут мидлварь для него — вообще замечательно.

Спасибо за внимание ;-)

block('content')
(
    tag()('article'),

    elemMatch()
    (
        tag()(this.ctx.elem)
    )
);

Никак не пойму, почему не отрабатывает этот шаблон, а конкретно не подхватывает tag()('article'), если убрать из шаблона elemMatch() то тэг проставляется

Возможно я это упустил из док. Ткните мне как правильно в browser.js делается поиск блоков рядом? Или как это делаете вы?

Сейчас я делаю что-то типа:

this._bla = this.findBlockOutside('category').findBlockInside('control-group');

В продолжение https://github.com/bem/bem-core/pull/622/files

@tadatuta: сборка бандла технологии инвалидируется по суффиксам, от которых она зависит.

@tadatuta: в данном случае есть «обычная» зависимость от js и browser.js — изменение блоков в этих технологиях инвалидирует сборку бандла. плюс по depsByTech есть зависимость от bemhtml. и изменение блоков в технологии bemhtml сейчас пересборку не вызывает, поэтому приходится передавать force явно.

@zxqfox: очень часто слова хак и depsByTech встречаются рядом.

@tadatuta: так и есть. полноценную реализацию, которую начали делать в рамках bem-tools@v1 так и не довели до конца :(

@veged: дело не столько в depsByTech сколько в сшивании двух технологий в один файл и инвалидации кешей

@zxqfox: Честно говоря, проблема здесь не в бэме или технологиях, а в его конкретной реализации/оптимизациях.

@zxqfox: Насколько я помню, там сейчас есть небезбажный монолит APW. Это он о протухшем кеше не знает?

@veged: APW это абстрактная очень штука, она сама по себе ни о чём таком не может ни знать ни не знать — но да, это уже оффтопик

Хочется понять, что надо сделать, чтобы этой проблемы не было.

На мой взгляд вариантов два:

  • Добить полноценную реализацию — для этого нужна её формализация
  • Перевести на enb и добить её там — для этого нужен адепт по enb, и опять же формализация

У кого-то еще есть желание что-то с этим сделать?

Если есть у кого, прошу ссылочку. Хочется видеть сборку простого проекта с bemtree

Наш постоянный фронтендер собрался в отпуск, а проект, кровь из носу, надо пилить. Необходимо разработать фронтенд для многошаговой регистрации с заполнением большого количества полей профиля. На вход будут предоставлен аккуратный psd-макет, консультации дизайнера и проджект-менеджера. На выходе мы ждем фронтенд, который будет сделан максимально приближенно к тому, что мы обычно делаем: БЭМ, LESS, jQuery, немного Knockout. Причем аккуратно, с любовью.

Столкнулся с этой ошибкой когда решил положить блоки и бандлы в папку src/ на проекте и настроить сборку так.

/
    .bem/
    src/
       desktop.blocks
       desktop.bundles

в make.js соответственно указал

getBundlesLevels: function() {
        return [
            'src/desktop.bundles'
        ];
    }

Сборка происходит нормально, но в такой схеме сервер падает на этом then

BEMTREE.apply(json)
        .then(function(bemjson) {
            res.send(BEMHTML.apply(bemjson));
        });

А если положить эти же папки, блоков и бандлов, в корень то все отрабатывает как надо.

Подскажике как поправить и настроить предложенную выше схему.

Весь кусок про сервер и шаблонизацию

    var bemtreeTemplate = FS.readFileSync( './src/desktop.bundles/index/_index.bemtree.js'),
        bemtmlTemplate = FS.readFileSync( './src/desktop.bundles/index/_index.bemhtml.js');


    var context = VM.createContext({
        Vow: vow,
        console: console,
        borschik: {
            link: function(i) {
                return i;
            }
        }
    });

    VM.runInContext(bemtreeTemplate, context);
    BEMTREE = context.BEMTREE;

    VM.runInContext(bemtmlTemplate, context);
    BEMHTML = context.BEMHTML;

    BEMTREE.apply(json)
        .then(function(bemjson) {
            res.send(BEMHTML.apply(bemjson));
        });

Где можно почитать?

Есть ли способ исключить блок из сборки? Например, есть блок A на уровне проекта и на уровне библиотеки. Хотелось бы, чтобы в сборку попала только реализация из проекта. Эксперименты с noDeps к желаемому результату не привели. Может быть, я не умею его готовить?

До сих пор не могу понять магию apply, applyNext, applyCtx хотя ни раз читал ман по ним

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

block('nav').elem('item')
(
    match(this.ctx.url)
    (
        function()
        {
            this.ctx.block = 'link';

            delete this.ctx.elem;

            this.ctx.mix   = [
                {
                    block: this.block,
                    elem: 'item'
                }
            ];

            applyCtx(this.ctx);
        }
    )
);

Получаю бесконечную рекурсию - [RangeError: Maximum call stack size exceeded]

Сейчас я поставил такой костыль:

block('nav').elem('item')
(
    match(this.ctx.url && !this.ctx._prepared)
    (
        function()
        {
            this.ctx.block     = 'link';
            this.ctx._prepared = true;

            delete this.ctx.elem;

            this.ctx.mix   = [
                {
                    block: this.block,
                    elem: 'item'
                }
            ];

            applyCtx(this.ctx);
        }
    )
);

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

До сих пор не могу понять магию apply, applyNext, applyCtx хотя ни раз читал ман по ним

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

block('nav').elem('item')
(
    match(this.ctx.url)
    (
        function()
        {
            this.ctx.block = 'link';

            delete this.ctx.elem;

            this.ctx.mix   = [
                {
                    block: this.block,
                    elem: 'item'
                }
            ];

            applyCtx(this.ctx);
        }
    )
);

Получаю бесконечную рекурсию - [RangeError: Maximum call stack size exceeded]

Сейчас я поставил такой костыль:

block('nav').elem('item')
(
    match(this.ctx.url && !this.ctx._prepared)
    (
        function()
        {
            this.ctx.block     = 'link';
            this.ctx._prepared = true;

            delete this.ctx.elem;

            this.ctx.mix   = [
                {
                    block: this.block,
                    elem: 'item'
                }
            ];

            applyCtx(this.ctx);
        }
    )
);

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

Покажите пожалуйста примеры такого использования