Подскажите каким инструментом можно преобразовать bemtree в css? Использую VSCode bem-express

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

Вообщем проблема: Необходимо при выборе элемента в 'Select-e' изменить иконку в блоке 'language-icon' Решил сделать модификатор 'icon' к блоку 'language-icon' в css они прописаны так:

.language-icon_icon_ru{ background-image: url('icons/flags_ru.png'); }

.language-icon_icon_en{ background-image: url('icons/flags_us.png'); }

Вот описание блока: language

.bemtree.js

block('language')({
    content: () => [
        {
            block: 'language-icon',
            mods:{ size: "24", icon: 'ru'},
            js: true,
        },
        {
            block: 'select',

            mods: {
                mode: 'radio',
                theme: 'skay',
                size: 'm'
            },
            mix: [
                {
                    block: 'block_name',
                    elem: 'control-lang',
                    js: true,
                },
            ],
            width:'available',
            name: 'select1',
            val: 1,
            options: [
                {
                    val: 1,
                    text: 'Русский',
                    icon: {
                        block: 'icon',
                        url: 'icons/flags_ru.png'
                    }
                },
                {
                    val: 2,
                    text: 'English',
                    icon: {
                        block: 'icon',
                        url: 'icons/flags_us.png'
                    }
                }
            ]
        } 
    ]
});

.bemhtml.js
block('language')(
    js()(true),
    addJs()(true),
    tag()('div')
);

.deps.js
({
    mustDeps: ['i-bem-dom'],
    shouldDeps: ['icon', 'select', 
    {
        block: 'select',
        mods: {
            mode: 'radio',
            theme: 'skay',
            size: 'm'
        }
    }]
})

.js
modules.define('language', ['i-bem-dom', 'events', 'BEMHTML', 'select'],
function(provide, bemDom, events, BEMHTML, Select, $) {

    function change(e){
        // ответ приходит при смене языка. 1 или 2. отлично!
        console.log("lang: " + e.target.getVal());

        /*
        Что тут нужно написать, чтобы изменить модификатор 'icon' у блока 'language-icon' ?

        */
    }

    provide(bemDom.declBlock(this.name, {
        onSetMod : {
            'js' : {
                'inited': function() {
                    this._events(Select).on('change', change);
                }
            }
        },
    }));
});

При сборке bemhtml блоков хочется подключить свой helper для более удобной работы.

Подключаю по мануалу Подключение сторонних библиотек.

Для сборки проекта использую bem/project-stub.

В make.js

module.exports = function(config) {
    const isProd = process.env.YENV === 'production';

    config.nodes('*.bundles/*', function(nodeConfig) {
        nodeConfig.addTechs([
            // essential
            [enbBemTechs.levels, { levels: levels }],
            [techs.fileProvider, { target: '?.bemjson.js' }],
            [enbBemTechs.bemjsonToBemdecl],
            [enbBemTechs.deps],
            [enbBemTechs.files],

            // css
            [techs.postcss, {
                target: '?.css',
                oneOfSourceSuffixes: ['post.css', 'css'],
                plugins: techs.postcssPlugins
            }],

            // bemtree
            // [techs.bemtree, { sourceSuffixes: ['bemtree', 'bemtree.js'] }],

            // bemhtml
            [techs.bemhtml, {
                sourceSuffixes: ['bemhtml', 'bemhtml.js'],
                forceBaseTemplates: true,
                engineOptions : {
                    elemJsInstances : true,
                    requires : {
                        'helper': {
                            ym: 'helper',
                        }
                    }
                }
            }],

            // html
            [techs.bemjsonToHtml],

            // client bemhtml
            [enbBemTechs.depsByTechToBemdecl, {
                target: '?.bemhtml.bemdecl.js',
                sourceTech: 'js',
                destTech: 'bemhtml'
            }],
            [enbBemTechs.deps, {
                target: '?.bemhtml.deps.js',
                bemdeclFile: '?.bemhtml.bemdecl.js'
            }],
            [enbBemTechs.files, {
                depsFile: '?.bemhtml.deps.js',
                filesTarget: '?.bemhtml.files',
                dirsTarget: '?.bemhtml.dirs'
            }],
            [techs.bemhtml, {
                target: '?.browser.bemhtml.js',
                filesTarget: '?.bemhtml.files',
                sourceSuffixes: ['bemhtml', 'bemhtml.js'],
                engineOptions : {
                    elemJsInstances : true,
                    requires : {
                        'helper': {
                            ym: 'helper',
                        }
                    }
                }

            }],

            // js
            [techs.browserJs, { includeYM: true }],
            [techs.fileMerge, {
                target: '?.js',
                sources: ['?.browser.js', '?.browser.bemhtml.js']
            }],

            // borschik
            [techs.borschik, { source: '?.js', target: '?.min.js', minify: isProd }],
            [techs.borschik, { source: '?.css', target: '?.min.css', minify: isProd }]
        ]);

        nodeConfig.addTargets([/* '?.bemtree.js', */ '?.html', '?.min.css', '?.min.js']);
    });
};

В common.blocks/helper/helper.js

/**
 * @module helper
 */
modules.define('helper', ['i-bem'], function(provide, bem) {
    /**
     * @exports
     * @class helper
     * @bem
     */
    provide(bem.declBlock(this.name, /** @lends helper.prototype */{

        help: function () {
            return 'is req helper work';
        }

    }));
});

В common.blocks/page/page.deps.js

[
    {
        shouldDeps: [
            { block : 'helper' },
        ]
    },
    {
        tech: 'js',
        shouldDeps: [
            { block : 'helper', tech: 'bemhtml' },
        ]
    },
    {
        tech: 'bemhtml',
        shouldDeps: [
            { block : 'helper', tech: 'js' },
        ]
    }
]

В common.blocks/usehelper/usehelper.bemhtml.js

block('usehelper')(
    content()(function () {
        let helper = this.require('helper');
        return helper.help();
    })
);

В desktop.bundles/index/index.bemjson.js

module.exports = {
    block: 'page',
    head: [ { elem: 'css', url: 'index.min.css' } ],
    scripts: [{ elem: 'js', url: 'index.min.js' }],
    content: {
        block : 'usehelper'
    }
};

Запускаю npm run build и получаю ошибку.

Template error in mode content in block usehelper Cannot read property 'help' of undefined

Если использовать подключение через commonJS сборка проходит успешно но если в браузер этот код не попадает и когда нужно собрать блок через BEMHTML.apply() получаем туже ошибку. Побывал также подключать сборку bemhtml.js через commonJS а сборку .browser.js через ym в таком случае получаю:

"i-bem-dom__init -> jscreate -> BEMHTML -> helper -> helper"

Объясните как правильно подключить сторонние библиотеки так чтобы они работали при сборки бандлов и после в браузере?

Пример разметки:

.product
   .rate.product__rate
        .rate__stars

Пример css-правила:

.product__rate .rate__stars { /*...*/ }

Я правильно понимаю, стилевое правило выше противоречит рекомендациям, описанных во Вложенные селекторы? Какие есть варианты модификации .rate__stars кроме использования модификатора на этом элементе или его родителе?

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

Эта рекомендация относится исключительно к правилам, наследуемых по каскаду от родителя? Вложенный селектор в примере сбил с толку, невольно появились параллели с примером .product__rate .rate__stars.

Добрый день!

Подскажите, пожалуйста, где можно посмотреть пример кода где BEM методология совмещается с Bootstrap.

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

Интересуют решения без использования bem инструментов, так в bem использую только методологию.

Посоветуйте, пожалуйста, ссылку на пример реализации просмотра превью изображений в открытом попап окне, которая бы была сверстана по бэм. Интересует сама верста + js реализация. Может есть ссылки на сайты, или статьи на которых можно посмотреть.

Здравствуйте. Подскажите, пожалуйста, как отобразить блок popup при эффекте ховер на компоненте select из bem-components?

Заранее благодарен.

Здравствуйте, подскажите пожалуйста, корректно ли с точки зрения БЭМ такое миксование?

<div class="block1">
  <div class="block2 block1__elem1">
    <div class="block2__elem1 block1__elem2"></div>
    <div class="block2__elem2 block1__elem3"></div>
  </div>
</div>

Привет. Имеются две одинаковых навигации по смыслу, но с некоторыми отличиями во внешнем виде, поэтому планирую использовать модификаторы с разными темами. Но по идеи привязать название к цвету или к расположению бессмысленно, так как эти параметры могут поменяться. Как лучше всего назвать темы для этих модификаторов? За какой смысл цепляться? И стоит ли модификаторы давать на каждый элемент или можно просто дать на контейнер и наследовать через CSS? Буду благодарен за ответы

Пример моего HTML для этих навигаций:

<ul class="navigation-list navigation-list_theme-1">
  <li class="navigation-list__item navigation-list__item_theme-1">
    <a class="navigation-list__link navigation-list__link_theme-1">Пункт 1</a>
  </li>
</ul>

<ul class="navigation-list navigation-list_theme-2">
  <li class="navigation-list__item navigation-list__item_theme-2">
    <a class="navigation-list__link navigation-list__link_theme-2">Пункт 1</a>
  </li>
</ul>

Скрин внешнего вида:

Всем привет! Пытаюсь безрезультатно найти инструмент, который из HTML кода с БЭМ классами автоматически создавал бы папки и файлы CSS. Чтобы вручную это не делать. Нашел bemgo. Там вроде написано, что он генерирует. Но при этом вроде как нужно самому делать. Может я чего-то не понял. Еще bem-tools-create, но там вручную все надо создавать. При этом я еще не очень понял как эти команды выполнять, через терминал не работает почему-то.

Добрый день!

Поясните, пожалуйста, общие рекомендации оформления блока кнопки.

Знакомясь с методологией немного запутался. В разделе "Быстрый старт" указано, что блок не должен влиять на свое окружение,

т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование.

Тут понятно. Но далее, в разделе "Внешняя геометрия и позиционирование", в примере оформления позиционирования блока button содержится правило, в котором задается border: 1px .

CSS-реализация кнопки:

.button {
    font-family: Arial, sans-serif;
    text-align: center;
    border: 1px solid black;    /* Рамка */
}
.header__button {
    margin: 30px;               /* Отступ */
    position: relative;
}

Насколько правильно согласно бэм методологии задавать границу кнопке на классе button? Нормальная ли это практика (как в примере выше) или все же более правильный подход для задания границы:

• использовать оформление кнопки на примере компонента button в bem-components (где визуальный эффект границы достигается наложение двух блоков)
• на классе button оформлять границу тенью:

.button { box-shadow:  0 0 0 1px black; }

• использовать элемент родительского блока:

.page__button { border: 1px solid black; }

• использовать модификатор:

.button_wiew_page { box-shadow: 0 0 0 1px black; }

И можно ли задавать блоку padding'и? С одной стороны - это внутреннее оформление блока, а с другой стороны они тоже влияют на размер.

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

Приветствую. Господа подскажите мне как gulp-bem-bundle-builder прокинуть свой naming. Просто обидно. Всё настроил, везде naming мой работает, собираю html, bemjson.js. Везде всё типтоп, а вот собрать бандл по итогу нельзя нормально ибо builder использует стандартный нейминг. Я то уже склоняюсь на стандартный перейти, но это же не дело, всё таки как-то то можно его заставить собирать с моим неймингом.

Если что

function style(path) {
    builder = bundleBuilder({
        levels: [
            'src/common.block',
            'src/' + path + '.block'
        ]
    });
    return src(['./src/' + path + '.bundles/deps.bemjson.js'])
        .pipe(builder({
            css: bundle => bundle.src('css').pipe($.concat('style.css')),
        }))
        .pipe(dest('dist/' + path + '/css'));
}

содержимое .bemrc

module.exports = {
    root: true,
    levels: [
        {
            path: 'src/',
            naming: {
                delims: {
                    elem: '__',
                    mod: { name: '--', val: '_' }
                },
                wordPattern: '[a-zA-Z0-9]+'
            }
        }
    ],
    modules: {
        'bem-tools': {
            plugins: {
                create: {
                    levels: {
                        "src/*.block": {
                            techs: ['css', 'deps.js'],
                            templateFolder: '.bem/templates',
                            templates: {
                                'js-modules':  '.bem/templates/js',
                                'pug-modules': '.bem/templates/pug'
                            },
                            techsTemplates: {
                                js:  'js-modules',
                                pug: 'pug-modules'
                            }
                        }
                    }
                }
            }
        }
    }
}

C содержимым deps.bemjson.js всё в порядке, если моды создаю используя классический нейминг он собирает.

24-25 августа в Санкт-Петербурге пройдёт большой IT-фестиваль TechTrain 2019 для всех, кто любит IT-инженерию, технологии и разработку ПО. Мы не стоим в стороне и везём на фестиваль стенд и доклад Алексея Хохулина «State of BEM 2019. Эволюция большого фронтенда». Кстати, на стенде мы организуем БЭМ-дебаты, если вы хотите принять участие, напишите нам в личные сообщения — расскажем детали.

Stayed BEMed с нами на TechTrain.

Вы просили и мы сделаем!

19 июля в 18:30 в питерском офисе Яндекса пройдет БЭМап — митап по БЭМ.

Регистрируйтесь скорее!

Мы начнем с самых азов, расскажем зачем БЭМ в 2019 и куда он движется. Познакомим с основанной на БЭМ дизайн-системой whitepapper, позволяющей верстать без написания CSS. Поговорим, как применять идеи БЭМ в проекте на React с использованием пакетов.

И, конечно, ответим на все ваши вопросы.

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

Встречи по БЭМ всегда бесплатны, но нужно зарегистрироваться заранее: количество мест ограничено.

Stay BEMed!

Можете сказать правильно я сделал или нет ? ``

<head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="media.css">
    <meta name="keywords" content="Жизнь,работа,новости">
    <meta name="description" content="MyLife - Это прекрасная жизнь, чтобы иди дальше....">
    <title> Сайт </title>
</head>
<body>    
  <header>
    <div class="container">
        <div class="menu">
            <div class="block-logo">
                <img class="block-logo__image"src="Image/Logo.png">
            </div>
            <div class="block-button">
                <a class="block-button__text" href="#">work</a>
                <a class="block-button__text" href="#">news</a>
                <a class="block-button__text" href="#">about me</a>
            </div>
        </div>
        <h1 class="name">Slice of my life.</h1>
        <div class="block-schroll">
            <img class="block-schroll__img" src="Image/Mouse.png">
            <p class="block-schroll__text">Schroll to see more</p>
        </div>
    </div>
</header>        
</body>

``

https://www.youtube.com/watch?v=nhgC_43C38Q

Привет!

Мы рады пригласить вас на очередной BEMup — митап по БЭМ, который пройдет в Москве 14 июня в 19:00. Эту встречу мы посвятим применению методологии БЭМ на React-проектах.

В программе:

— обзор @bem-react/classname — самого минималистичного пакета для генерации имен CSS-классов по БЭМ с поддержкой TypeScript. — статические и динамические модификаторы с помощью @bem-react/core. Рассмотрим правильные способы композиции, способы расширения компонентов и другие тонкости использования. — управление зависимостями благодаря @bem-react/di: зачем компонентам реестры, как правильно организовать эксперименты на проекте, нужно ли класть все зависимости в реестр, организация кода под разные платформы, разделение кода в модификаторах и блоках.

И, конечно же, ответим на все ваши вопросы!

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

Встречи по БЭМ бесплатны, но нужно зарегистрироваться заранее: количество мест ограничено.

Stay BEMed!

Друзья, начинаем регистрацию на очередной BEMup — митап по БЭМ, который пройдет в Москве 24 мая в 19:00.

На эту встречу мы пригласили дизайнеров рассказать про создание дизайн-системы на основе http://whitepaper.tools.

Регистрируйтесь скорее, количество мест ограничено! https://events.yandex.ru/events/bemup/24-may-2019/

Пример:

<div class="block-name">
   <div class="block-name__item">
      <div class="block-name">
         <div class="block-name__item">
            etc.
         </div>
      </div>
   </div>
</div>