Продолжаю переводить наш проект на bem-core с собственным сборщиком и шаблонизацией на twig.

Вчера убил кучу времени в попытках заставить инициализироваться блоки. Не хотели ни в какую. Сегодня решил поставить i-bemdom_init_auto.js самым-самым последним среди подключаемых js-файлов — и всё завелось. Но это несколько неудобно, потому что мы подключаем js в виде 3-4 бандл-файлов и не хочется делать ещё один для i-bemdom_init_auto.js.

Есть какие-то варианты решения проблемы?

Есть у меня несколько блоков которые ходят в api за данными, затем на клиенте дорисовывают modal на основе полученного jsonа. Шаблоны содержимого разные, а вот функции которые дергают api одинаковые (они одну и ту же ручку дергают, с разными параметрами). Руки чешутся вынести эти функции куда-нить, чтобы не дублировался код. Как это сделать правильно с точки зрения методологии? И главное, куда их оформить?

Вопрос №2. Те же блоки. bemjson по которому собирается modal у меня хранится прямо в js модуле блока. Это нормально?

Встретилась на Хабре весьма полезная статья про сложность инструкций. Существующая документация отличная, но когнитивное сопротивление у неё на самом деле очень высокое. Сейчас по терминологии Купера я уже "апологет" и нормально ориентируюсь в документации. Но по ощущениям множество "уцелевших" не могут воспользоваться замечательными инструментами, в первую очередь из-за сложности входа в мир БЭМ. Очень хочется цитировать вторую главу "Психбольницы в руках пациентов", а параграф про "Апологетов и уцелевших" хоть полностью сюда вставляй.

Очень удобно в bemhtml делается mix элемента на дочернем блоке:

block('block').elem('logo').def()(function(){
    return applyCtx(
      this.extend(this.ctx.content, {
        mix: { block: this.ctx.block, elem: this.ctx.elem, mods: this.ctx.mods }
      })
    );
  })

Подумалось, что неплохо бы видеть шорткат для такой конструкции в базовых шаблонах или шаблонах проекта. Кто-нидудь уже делал подобный шорткат для bemtree / bemhtml?

На сайте https://ru.bem.info нет прокрутки большого текста. Это вызывает дискомфорт при чтение документации с ноутбука.

Написал такое:

var title = 'my long title';
block('page').elem('title').content()(function(){ return title });
block('kg-appbar').elem('title').content()(function(){ return title });

Не сработало, т.к. переменная и шаблоны разъехались в разные области видимости после компиляции. Есть решение или мне не стоит такого хотеть?

Я хочу предоставлять компоненты написанные на БЭМ для проектов, которые больше нигде БЭМ не используют. При этом я хочу предоставить им возможность до-/пере- определять шаблоны компонентов. В bh это реализуется приблизительно следующим образом:

modules.require(['bh'], function(bh){
  bh.match(/* определение шаблона */)
});

Как такого же эффекта можно достичь с шаблонами bemtree / bemhtml?

Кажется, что нужен новый формат deps.js :) Для сборки любым сборщиком было бы удобно получить массив из сущностей с указанием уровня и технологии. Данный массив должен быть таким, чтобы его можно было передать с фильтром (технология, [уровни]) на вход в метод concat. Вероятно там же необходимо указывать путь до файла с реализацией в технологии, если таковой имеется.

Предположим приходит json с массивом объектов. Задача смапить его и распихивать по ячейкам таблицы. Как это сделать с BEMJSON и BEMHTML?

В каком файле делать мап? Какой алогитм действий? Допустим если мне совершенно не нужна бэм структура, я не буду стилизовать таблицу. Просто b-table, как блок, а внутри элементы тегами (thead, tbody, tr, th, td).

Всем привет! Ребята, почитал форум, но, хоть убей, не понял, как же получить в итоге конечное дерево css/js/img + index.html? Требуется именно такая структура конечного дерева. Может кто-то подсказать конфиг? И второй вопрос: есть статья о том, как к процессу верстки по бему подключать пхп-программистов и организовывать их работу правильно? Чтобы в тоге получить, например, index.php с версткой и php-кодом? P.S. есть новости о вашем ide?

Может сделаем уже? @andrewblond можешь рассказать в каком состоянии модульная сборка? Кажется, что собранные депсы в один файл гарантируют возможность сборки с помощью любого сборщика любой технологии. Если продолжать писать руками депсы, то все будет хорошо) Возможно надо будет доработать депсы, чтобы было указание уровня для каждого блока. У кого какие мысли?;)

Все чаще слышу и читаю про то, что в ближайшем будущем , web выйдет на новый уровень. Использование web-components станет неким стандартом , собственно , на что рассчитывают в W3C. И встает вопрос, что думают по этому поводу ребята из Яндекс ? По сути , он будет уметь и делать все то , что делает сейчас БЭМ , тот же React. Все будет работать только нативными средствами. Что дает не малый прирост в скорости. Как будет жить и существовать БЭМ , после того , как это все станет более имение реальностью?

Здравствуйте, сегодня мы провели вебинар — «Верстаем веб-страницу по БЭМ-методологии». Надеюсь вам было интересно и полезные знания влились в ваши головы.

Видеозапись будет доступна в течении двух недель.

Ссылки для изучения: — Методология. Определения — История создания БЭМ — Видео: История создания БЭМ. Кратко, сбивчиво и неполно — Side effects in CSS — Методология. Организация файловой системы

Ссылка на слайды на github.com. Ссылка на проект.

Конфиг vim — это форк vimi.

Всем БЭМ.

Подскажите пожалуйста в чем концептуальная разница по сабжу? И по каким причинам конструкция в bemhtml: block('content').mix()({block: 'grid'}) добавляет к блоку класс, но не формирует стили. А в bemjson: {block : 'content', mix: {block: 'grid'}, добавляет и класс и стили.

В #296 я рассказал, как я кастомизировал блок menu под себя при реализации своего меню. При попытке использовать его же для списка подсказок для поля типа 'autocomplete' снова столкнулся с проблемой. Дело в том, что при навигации с помощью курсорных стрелок выделенному пункту устанавливается модификатор hovered. Этот же модификатор используется и при наведении на пункт меню курсором мыши. При этом, чтобы добиться выделения пункта курсорными клавишами независимо от временного визуального эффекта при наведении придётся снова переопределять несколько методов, скопировав их практически полностью в проект (свою библиотеку) и изменив всего пару строчек в каждом. См. поле ввода URL/поиска в Хроме в качестве примера:

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

Хочу сказать спасибо @tadatuta за ревью кода моего компонента меню представленного на конкурс. Замечания были очень полезные.

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

Мой компонент построен на блоках menu, menu-item, button и прочих из библиотеки bem-components. Для реализации второго уровня в меню, я воспользовался элементом group блока menu задав ему абсолютное позиционирование и overflow-y: auto. Однако, код метода _scrollToItem не был рассчитан на такое рассположение пунктов меню и мне понадобилось переопределить его: я скопировал код метода из библиотеки, сделал автоматическое определение контейнера со скроллом и изменил функцию анимации. Так же мне не понравилось, что вызов метода _scrollToItem происходит при наведении мышью. Пришлось переопределять метод _onItemHover. Потом выяснилось, что клавиатурная навигация для переключения выбранного пункта меню устанавливает ему модификатор hovered (этому я посвящу отдельный пост). Методы _onKeyDown и _onItemClick тоже пришлось переопределять.

Всю эту красоту я оформил, как модификатор menu_fix_scroll, чтобы не ломать блок menu в других местах и разместил его как модификатор моего блока kg-menu_fix_scroll. Этот модификатор указан как зависимость самого блока kg-menu.

Вот тут я подошёл к вопросам:

• правильно ли я решил, что доопределения библиотечного блока, которые необходимы только моему блоку и нигде более правильно разместить внутри моего блока?
• критично ли, что kg-menu_fix_scroll.js фактически описывает menu_fix_scroll?
• есть ли другие более изящные пути решения такой проблемы?

Сейчас я делаю поле типа autocomplete в рамках компонента поиска. Есть мысль сделать его на базе dropdown, определив новый модификатор dropdown_switcher_input. Снова возникают вопросы означенные выше.

Вариант 1. В блок dropdown добавить модификатор _switcher_input. (Будет странно смотреться, как не совсем самостоятельная сущность. Скорее всего не получится выделить общие правила для отображения попапа, оставив только метод аналогичный onSwitcherClick) Использовать его в блоке autocomplete (или даже в модификаторе _type_autocomplete блока input). Затем всё это использовать это в моём блоке поиска.

Вариант 2. Определять модификатор dropdown_switcher_input внутри autocomplete / input_type_autocomplete.

Вариант 3. Не использовать код dropdown и реализовать autocomplete / input_type_autocomplete самостоятельно.

Вариант 4. Только что придумал вариант, похожий на правильный ответ. Наследовать autocomplete (input_type_autocomplete врядли получится?) от dropdown.

Он изображения перемещает или копирует?

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

Здравствуйте. Пример из руководства:

block('switch')(
...
     content()([
     {
        elem: 'input',
        name: this.ctx.name
     },
...

вызывает ошибку:

Error: Only literal or function is allowed in template's body content()([ ^

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

Есть такой код

    swipes: function (status) {
        if (status) {
            this.bindTo( this.elem('view'), 'mousedown', this._swipeStart );
            this.bindTo( this.elem('view'), 'mouseup', this._swipeEnd );
        }
    },

    _swipeStart: function (e) {
        console.log(e);
        this._tmpSwipeStart = e.pageX;
    },

    _swipeEnd: function (e) {
        console.log(e);
        if ((e.pageX - this._tmpSwipeStart) > 50) {
            this.previous();
        }
        if ((e.pageX - this._tmpSwipeStart) < -50) {
            this.next();
        }
    },

Событие на mouseup не срабатывает. Не могу понять в чём дело.

По идее - у нас есть зависимости. И мы указываем их (по принципу mustDeps). Зачем выделять shouldDeps?

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

Вот например:

.post-time
{
    font-size: 14px;

    display: inline-block;

    color: #8899a6;
}

А почему нельзя написать более компактней?

.post-time { font-size: 14px; display: inline-block; color: #8899a6; }

Просто интересно стало. Есть какой то профит от такого длинного написания кода ? Мне кажется читабельность от этого не повышается. Может я ошибаюсь.

Кто-либо мог бы рассказать как управлять кэшем в enb?

Кейс такой - запускаем enb server, после изменения блока b-block, и рефреша страницы в браузере, не видно обновлений. Т.к. less не пересобрался, а подтянулся из кэша.

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

Подскажите, как подкрутить перезагрузку страницы при редактировании блоков?

Если есть способ с enb, то с enb Если есть gulp, то с gulp.

@verybigman что-то похожее реализовывал. Но так, как я понял, используется api сборщика bem, а не enb.

Может кто уже делал для себя конфиги?

Люблю в проектах использовать UIKit. Где хранить сторонние JS/CSS и как их подключать в BEMJSON? Также для UIKit нужен заранее подключенный jQuery, он есть в bem-core, возможно ли инициализировать без дополнительного скачивания.

Что-то я не понял как запустить обработку bemtree, а точнее в каком месте...

Я хочу из bemjson перейти на bemtree - что для этого нужно (как и где вызывать шаблоны bemtree)?

bemtree в bemjson можно вызывать? Я так понимаю, что должно быть что-то типо этого

content: (function() { BEMTREE.apply('blockName'); } )()