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

Весь блок:

<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? Извиняюсь за тупизну, слишком сложно для меня написано

Всем добрый день!

Есть такой кейс:

<!-- Тема «default» -->
<button class="button button_theme_default">
  <div class="button__text">Отправить</div>
</button>

<!-- Тема «outline» -->
<button class="button button_theme_outline">
  <div class="button__text">Отправить</div>
</button>

Так же есть, например, модификатор button_size_small который меняет размер button__text. Проблема/вопрос заключается в том, что есть необходимость при разных значениях модификатора button_theme_{name} менять поведение модификатора button_size_small, другими словами их связать. Итого при default и размере small хочется у button__text размер, например, 12px, а при outline и размере small хочется у button__text размер 14px.

Какие я вижу варианты:

  1. переименовать блок, например, вместо buttonbutton-outline.
  2. связывать модификаторы .button_theme_outline.button_size_small.
  3. добавить размер к названию темы, например, .button_theme_outline-small.

Более привлекательным (для меня) является 2-ой вариант. Но какой путь более правильный по БЭМ?

Спасибо!

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

У меня есть независимый(как мне казалось) блок .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;
  }

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

Будьте добры, подскажите какой плагин стоит использовать для gulp, чтоб собирать БЭМ проекты? Желательно с документацией, тк новичок во всем этом :)

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

Есть такая разметка

<section class="section section-icon section-icon--image--paper">
  <div class="container">
    <div class="section-icon__left">
      <h2 class="section__heading">Heading 2</h2>
      <img src="/img/paper.svg" alt="" />
      <p>Text section</p>
    </div>
  </div>
</section>

Интересует правильно ли используется подход БЭМ? Может ли содержать класс section-icon--image--paper модификатор и его значение, что изменяет внешний вид секции в целом?


Посоветуйте, пожалуйста, ссылку на пример реализации просмотра превью изображений в открытом попап окне, которая бы была сверстана по бэм. Интересует сама верста + 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" },
]

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

Скриншот

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

При установке вылезает вот это:

npm WARN deprecated CSSselect@0.4.1: the module is now available as 'css-select'
npm WARN deprecated CSSwhat@0.4.7: the module is now available as 'css-what'
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated natives@1.1.6: This module relies on Node.js's internals and will break at some point. Do not use it, and update to graceful-fs@4.x.
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@1.0.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated formatio@1.1.1: This package is unmaintained. Use @sinonjs/formatio instead
npm WARN deprecated samsam@1.1.2: This package has been deprecated in favour of @sinonjs/samsam

> spawn-sync@1.0.15 postinstall C:\Users\123\AppData\Roaming\npm\node_modules\generator-bem-stub\node_modules\spawn-sync
> node postinstall

npm WARN generator-bem-stub@0.12.0 requires a peer of yo@>=1.0.0 but none is installed. You must install peer dependencies yourself.

+ generator-bem-stub@0.12.0
added 420 packages from 375 contributors in 60.27s

А при запуске это:

fs.js:27
const { Math, Object } = primordials;
                         ^

ReferenceError: primordials is not defined
    at fs.js:27:26
    at req_ (C:\Users\123\AppData\Roaming\npm\node_modules\generator-bem-stub\node_modules\natives\index.js:143:24)
    at Object.req [as require] (C:\Users\123\AppData\Roaming\npm\node_modules\generator-bem-stub\node_modules\natives\index.js:55:10)
    at Object.<anonymous> (C:\Users\123\AppData\Roaming\npm\node_modules\generator-bem-stub\node_modules\vinyl-fs\node_modules\graceful-fs\fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1103:10)
    at Module.load (internal/modules/cjs/loader.js:914:32)
    at Function.Module._load (internal/modules/cjs/loader.js:822:14)
    at Module.require (internal/modules/cjs/loader.js:956:19)
    at require (internal/modules/cjs/helpers.js:74:18)

Как исправить?

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

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

BEMGO

Доброго времени суток. Подскажите, пожалуйста, если есть знающие люди, как подключать изображения в bemgo?

Добрый день, друзья! Никак не могу разобраться.. Подскажите пожалуйста, есть ли возможность автоматической генерации структуры папок и css файлов на основе написания их в чистом html?

Т.е. например, я пишу:

<div class="search search_theme_sand">

И автоматически, или по нажатию "волшебной" кнопки у меня генерируется структура:

common.bloks 
  search 
    _theme_sand
    search_theme_sand.css
  search.css

Нашел вроде как bemgo, но что-то у меня ничего не работает

Привет. Имеются две одинаковых навигации по смыслу, но с некоторыми отличиями во внешнем виде, поэтому планирую использовать модификаторы с разными темами. Но по идеи привязать название к цвету или к расположению бессмысленно, так как эти параметры могут поменяться. Как лучше всего назвать темы для этих модификаторов? За какой смысл цепляться? И стоит ли модификаторы давать на каждый элемент или можно просто дать на контейнер и наследовать через 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 осталось чуть больше недели, а мы во всю готовимся к БЭМ-дебатам. Приходите на площадку поболеть за участников или выступите в одном из раундов. Чтобы принять участие, свяжитесь с нами любым удобным способом.

Доброго. Только начал осваивать БЭМ. Подскажите, что в данном случае не так, и как следовало бы правильно сделать?

<header class="header">
    <div class="header__text">
        <p class="text-head"> Заголовок </p>
        <ul class="text-main">
            <li class="text-main__item"> Пункт 1 </li>
            <li class="text-main__item"> Пункт 2 </li>
            <li class="text-main__item"> Пункт 3 </li>
            <li class="text-main__item"> Пункт 4 </li>
        </ul>
    </div>

    <div class="header__logo">
        <img src="#" alt="" class="logo">
    </div>
</header>
a year ago

naming

Приветствую. Господа подскажите мне как 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.

Здравствуйте! Такой вопрос. Например создаем секцию с классом intro:
< section class="intro"> Как правильно задать класс заголовка в этой секции:

1) < h1 class="intro_title">

2)< h1 class="intro intro_title">

3) < h1 class="title">