Приветствую всех! Использую упрощенную схему организации файловой структуры Flat. Как я понял, при использовании данной схемы, создается для каждого блока своя директория при этом стили и скрипты всех элементов и модификаторов хранятся в одно файле.

Блок:

<input class="input input_type_seach">

Схема файловой структуры:

common.blocks
--input
----input.css ( Содержание файла: .input {} .input_type_seach{} )
----input.js

Как правильно добавить этому блоку иконку?

<input class="input input_type_seach input_icon_user">

Схема файловой структуры:

common.blocks
--input
----input.css ( Содержание файла: .input {} .input_type_seach{} .input_icon_user{} )
----input.js
----input_icon_user.png

Так ли это работает?

Весь блок:

<div class="goods-items">
      <div class="goods-items__leftside">
             <div class="goods-items__item goods-items__item-first">
                <img class="goods-items__img" src="img/item1.png" alt="">
                 <span class="goods-items__price"><sup class="goods-items__money">£</sup>60</span>
                 <div class="goods-items__hidden">
                 <div class="goods-items__hidden-title">Womens burnt orange casual tee <span class="good-items__hidden-price"><sup class="goods-items__money">£</sup>29.99</span></div>
                 <div class="goods-items__hidden-desc">Classic casual t-shirt for women on the move. 100% cotton. </div>
                <div class="goods-items__hidden-icons">
                   <i class="goods-items__hidden-icon fa fa-shopping-cart"></i>
                   <i class="goods-items__hidden-icon fa fa-heart" aria-hidden="true"></i>
                   <i class="goods-items__hidden-icon fa fa-arrow-up" aria-hidden="true"></i>
                </div>
                <i class="goods-items__hidden-info fa fa-info-circle"></i>
                         =========Тут блок кода, написанный ниже======       
       </div>
    </div>
                       ....
</div>

<div class="goods-items__hidden">
   <div class="goods-items__hidden-preview">
       <div class="goods-items__hidden-preview-item"></div>
   </div>
</div>

То есть внутри блока goods-items находятся элементы hidden, hidden-preview и hidden-preview-item.

И правильное ли у меня наименование по БЭМ вообще? если нет, то укажите, пожалуйста, на ошибки

Проблема

Предположим, у меня есть следующий html:

<header class="header header_main">
    <button class="header__button button">
        <svg class="button__icon">
            <!-- SVG contents -->
        </svg>
        <span class="button__text">Button</span>
    </button>
</header>

И я хочу изменить элемент button__text у header__button. Предположим, изменить font-size. Я не уверен, но вроде вот так:

.header__button .button__text {
    font-size: 20px;
}

...делать нельзя. Потому что элемент button__text - часть внутренней реализации блока button. Поэтому, следующее что приходит в голову, просто сделать модификатор для button, что-то вроде этого:

.button_big-font .button__text {
    font-size: 20px;
}

Вроде все ок, добавляем модификатор, наслаждаемся. Но появляется следующего рода задача: нужно скрыть текст кнопок в шапке на мобильных устройствах. Вроде реализуется просто (конкретно в моем случае нужен именно display: none):

@media screen and (max-width: 575px) {
    .button_big-font .button__text {
        display: none;
    }
}

Вот только я могу применять модификатор big-font еще где-то вне header. И там я не хочу скрывать текст. Создавать модификатор, который можно применить только в определенном контексте (т.е. big-font только для header__button), тоже как-то не очень.

Попытки решения

Пробовал использовать css-переменные. Что-то вроде:

.button__text {
    display: var(--button_text-display, inline);
}
@media screen and (max-width: 575px) {
    .header__button {
        --button_text-display: none;
    }
}

Но все-таки скрытие текста - это вопрос внутренней реализации блока button. Там может использоваться как display: none, так и visibility: hidden, или вообще font-size: 0. А здесь я не только намертво вбиваю значение none, которое может использоваться только для display, но и позволяю применить другие значения, вроде flex, что не допустимо.

Также пробовал использовать правила @extend в sass. Но во-первых, они работают только в текущей области @media, а альтернативные решения плодят много css-кода на выходе. Во-вторых, @extend'ы чего-либо, относящегося к другому блоку, несколько ломают всю модульность.

Собственно вопрос

Есть ли способ изменить внутрянку (в частности элементы) блока в контексте другого блока либо элемента, без создания дополнительных модификаторов и прочих извращений?

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

Хочу получить сборку bemhtml для браузера.

В консоли браузера это работает (https://bem.github.io/bem-xjst/):

var bemhtml = BEMHTML();

var templates = bemhtml.compile(() => {
    block('text')({ tag: 'span' });
});

var bemjson = [
    { block: 'text', content: 'First' },
    { block: 'text', content: 'Second' }
];

var html = templates.apply(bemjson);

Как можно собрать для себя клиентский bemhtml из https://github.com/bem/bem-xjst/tree/master/lib?

Помогите пожалуйста разобрать что это значит - Имя блока задает пространство имен, которое гарантирует зависимость элементов от блока (blockelem). Разве зависимость элементов от блока гарантирует не их вложенность?) Что такое пространство имён? Если в блок вложить блок это он станет элементом? Если нет, почему в скобочках написано blockelem, а не block-elem? Извиняюсь за тупизну, слишком сложно для меня написано

Методика очень нравится, когда-то давно познакомился очень поверхностно и хватало просто базового нейминга, но сейчас столкнулся с такой ситуацией:

У меня есть независимый(как мне казалось) блок .container, который выполняет свою функцию - ограничивает контент по ширине и добавляет padding . Я в него заворачиваю нужные мне блоки. И всё бы хорошо, пока я не решил сделать меню, которое может быть как sticky, так и мобильным.

Грубо говоря элементы так выглядят:

nav.mobile-sticky-menu
   .container.container--full-width
        ul.mobile-sticky-menu__list
                    ul.mobile-sticky-menu__list-item
                    ul.mobile-sticky-menu__list-item
                    ul.mobile-sticky-menu__list-item

При разных условиях(ширина окна, позиция скролла) добавляются разные модификаторы - --mobile, --sticky, и соот-но меню либо прилеплено к верху при скролле, либо через кнопку открывается справа/слева - мобильное.

Условия.

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

В состоянии mobile - мне не нужен мой контейнер, лишние паддинги.

.

.

Я понимаю, что я скорее всего где-то сильно косячу и полнейший нуб в БЭМ, но помогите понять как в таком случае правильно связать логически блок .container и блок .mobile_sticky-menu, чтобы сохранились условия выше.

Хочу сделать один из элементов списка активным. Активность подразумевает изменение цвета шрифта, фона, границ для вложенных элементов. Как это правильно сделать в БЭМ?

Пример вёрстки без БЭМ:

  <div class="item active">
    <div class="square"></div>
    <div class="text">Step 1</div>
  </div>
  <div class="item">
    <div class="square"></div>
    <div class="text">Step 2</div>
  </div>

  .item .text {
    color: gray;
  }
  .item .square {
    border: 1px solid gray;
  }
  .item.active .text {
    color: red;
  }
  .item.active .square {
    border-color: red;
  }

Реализация с БЭМ

  <div class="item">
    <div class="item__square item__square_active"></div>
    <div class="item__text item__text_active">Step 1</div>
  </div>
  <div class="item">
    <div class="item__square"></div>
    <div class="item__text">Step 1</div>
  </div>

  .item__text {
    color: gray;
  }
  .item__square {
    border: 1px solid gray;
  }
  .item__text_active {
    color: red;
  }
  .item__square_active {
    border-color: red;
  }

Так это делается в БЭМ или есть варианты? Такой вариант не удобно использовать.

Подскажите каким инструментом можно преобразовать 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?

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

Допустим у меня вот такая вёрстка header'а

<header class="page__header header">
  <nav class="header__nav nav">
    <ul class="nav__links">
      <li class="nav__item">
        <a href="#" class="nav__link"></a>
      </li>
    </ul>
  </nav>
</header>

Как мне это разбить на блоки header, nav и их элементы? Использую handlebars. Если я напишу шаблон для блока header, будет вот так, верно?

<header class="page__header header">
  {{>nav/nav.hbs}}
</header>

Начав писать шаблон, я столкнулся с проблемой, во первых - создавая новый блок, который входит в другой блок, как мне реализовать миксы - внешнюю геометрию и позиционирование как я могу писать класс header__nav, если nav допустим не всегда используется как элемент header'а?

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

index.hbs

<body class="page">
  {{>header/header.hbs}}
  {{>article/article.hbs}}
  {{>footer/footer.hbs}}
</body>

header.hbs

<header class="page__header header">
  {{>nav/nav.hbs}}
</header>

nav.hbs // вот именно здесь главный вопрос с классом header__nav, куда мне его девать если nav не должен быть зависим от header'a?

<nav class="??header__nav?? nav">
  {{>nav/__links/nav__links.hbs}}
</nav>

nav__links.hbs

<ul class="nav__links">
  {{#each nav__links}}
  {{>nav/__item/nav__item.hbs}}
  {{/each}}
</ul>

nav__item.hbs

<li class="nav__item">
  {{>nav/__link/nav__link.hbs}}
</li>

nav__link.hbs

<a href="#{{this.link}}" class="nav__link">{{this.text}}</a>

На вход я подаю вот по типу таких данных например, типовая навигация для лендинга:

nav__links: [
    { link: "about", text: "about us" },
    { link: "prices", text: "pricelist" },
    { link: "team", text: "our team" },
    { link: "contact", text: "contact us" },
]

По файловой структуре получается вот так:

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

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

<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'и? С одной стороны - это внутреннее оформление блока, а с другой стороны они тоже влияют на размер.