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

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

Как я понимаю это будет реализовыватся как то так (с добавлением элемента .article__paragraph):

<div class="article">
  <div class="article__paragraph paragraph"></div>
</div>

Это явлется правильным?

Может ли микс иметь модификаторы?

Допустим у нас есть класс .link который задает стили для всех ссылок на странице, есть элемент .navbar__link который должен унаследовать стили от класса .link.

Как это правильно реализовать?

P.S. Тут написно как нужно: https://ru.bem.info/methodology/css/#Стилизация-групп-блоков

Не могу понять, как теперь правильно работать со стилями модификаторов. Смотрю на bem-react-boilerplate@0.1.0. Вижу два модификатора для <ExampleWithMods mod1 mod2 />. Имен классов, как привычно (<Example class="Example Example_mod1 Example_mod2">) не добавляются. Пробую добавлять вручную через mods (bem-react-core/REFERENCE.md - mods):

  public mods() {
    return {mod1: this.props.mod1};
  }

-- при этом отрабатывается только один вызов mods для всех модификаторов.

Как правильно?

Вообще, ткните, пож., в актуальные примеры кода/кейсы по bem-react-core?

Ситуация: при сборке в enb в bundle хочется подключать модули из исходного кода для использования в самом make.js и внутри .bemhtml шаблонов. Например, для получения общих параметров конфигурации или утилит вроде форматирования дат и пр.

В одном из прошлых проектов решал путём возврата промиса из bemjson, который разрешался после запроса нужных зависимостей (вручную, по списку). Кажется, было что-то приличное. Где-то когда-то видел что-то (почти, кажется?) готовое, но вот никак не могу найти. Хелп?

UP: Вижу что-то похожее в API / 8.x / Шаблоны (BEMHTML, BEMTREE) / Платформа / БЭМ - Подключение-сторонних-библиотек.

Пробую поключить ym-модуль project (находится в уровнях переопределения):

В make.js:

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

В common.blocks/test/test.bemhtml:

    def()(function(){
        var project = this.require('project');
        console.log('in test.bemhtml', project);
        return applyNext();
    }),

Как результат, в консоль получаю undefined.

При этом вижу, что в бандл .benhtml.js записывается:

if (typeof modules === "object") {
  modules.define("project",["project"],function(provide, ymlib) {
    provide(ymlib);
  });
  modules.define("project",function(provide, prev) {
    provide(glob["project"] || prev);
  });
  modules.define("BEMHTML",["project"],function(provide,dep0) {
    var engine = buildBemXjst({"project":dep0});
    engine.libs = {"project":dep0};
    provide(engine);
  });
} else {
  var _libs = {};
  typeof glob["project"] !== "undefined" && (_libs["project"] = glob["project"]);
  if (Object.keys(_libs).length) {
    BEMHTML = buildBemXjst(_libs);
    exp["BEMHTML"] = BEMHTML;
    exp["BEMHTML"].libs = _libs;
  } else {
    BEMHTML= buildBemXjst(glob);
    exp["BEMHTML"] = BEMHTML;exp["BEMHTML"].libs = glob;
  }
}

-- Тут щас буду разбираться, куда оно в итоге девается.

Модуль project находится в base.blocks/project/project.js, в test.js (в рантайм) подключается вполне нормально, вот так:

modules.define('test', ['i-bem-dom', 'project'], function(provide, bemDom, project) {
provide(bemDom.declBlock(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                console.log('project module', project);
            }
        }
    }
}));
});

Уровни переопределения задаются в .bemrc.js:

    levels: {
        'libs.blocks': { scheme : 'nested' },
        'base.blocks': { scheme : 'nested' },
        'common.blocks': { scheme : 'nested' },
        'desktop.blocks': { scheme : 'nested' },
        // 'pages': {},
    },

В make.js импортируются:

    srcLevels = Object.keys(require('../.bemrc.js').levels),

Версии:

$npm list enb enb-bemxjst
+-- enb@1.5.1
`-- enb-bemxjst@8.10.4

Всем привет,

Если у меня тэг <picture>, где есть несколько <source> и один <img>, всем ли элементам присваивать классы или можно присвоить класс только тэгу <picture>?

Заранее спасибо

Как правильно подговить верстку по БЭМу для использования на сайте, где контент-менеджер не использует классы для элементов (например, контент-менеджер публикует новости в блоге на сайте компании)?

Пример: я готовлю стили для блока .content и его потомков: .content h1, .content h2, .content h3, .content p, .content img. В таком случае элементы других блоков, внутри блока .content, переопределяются стилями для потомков .content, т.к. специфичность класса .content p - выше. Как правильно поступить?

Привет всем! Расскажите пожалуйста, как переопределить шаблон bem-create? просто кинуть в папочку .bem/templates/ bemhtml.js.js - магии не случилось. Так вот а как надо?)

Всем доброго! Есть форма, в ней есть как блоки input, так и блоки textarea. Можно ли получить методом findChildBlocks сразу все в одной коллекции?

<h1 class="heading-primary">
    <span class="heading-primary--main">Outdoors</span>
    <span class="heading-primary--sub">is where life happens</span>
</h1>
.heading-primary {
    color: #ffffff;
    text-transform: uppercase;
}

.heading-primary--main {
    font-size: 6rem;
}

.heading-primary--sub {
    font-size: 2rem;
}

Это - пример разметки и оформления блока-заголовка. Источник - англоязычный курс Advanced CSS and Sass авторства Jonas Schmedtmann.
Ссылка на репозиторий: https://github.com/jonasschmedtmann/advanced-css-course/blob/master/Natours/final-after-S06/index.html
Вопрос - этот пример использования модификаторов не противоречит общепринятым рекомендациям по БЭМ-наименованию селекторов? Возможно ли использование модификаторов в отрыве от модифицируемого блока\элемента при условии, аналогичном или близком по своей сути к коду выше?

Добрый вечер @tadatuta !

Помогите понять как правильно написать.

{
    elem: 'link',
    tag: 'li',
    content: [
        link.title,
        {
            block: 'modal',
            mods: { theme: 'islands', autoclosable: true },
            content: [
                {
                    block: 'card',
                    dataContent: {
                        title: link.title,
                        image: link.image,
                        text: link.text,
                        text_title: link.text_title,
                        check_list: link.check_list
                    }
                }
            ]
        },
    ]
}

Хотел открыть модал блок по клику на элемент линк и показать какой то карточный контент, но модал блок попадает куда то в корень. Как мне его потом ловить? Или как правильно обновить контент блок примерно в этой логике?

Добрый день) Подскажите дальнейший путь развития. Я понял саму методологию, научился верстать через bemjson, а дальше что...Если это шаблоны(BEMHTML,BEMTREE) то есть ли видео где более подробно про это рассказано?

@tadatuta Доброе время суток!

Не пойму в связи с чем получаю такую штуку

Uncaught Error: declMod with lazyInit prop not allowed. Your need use 'lazyInit' in data-bem params

Когда прикрепляют select блок

код блока { block: 'select', mods: { mode: 'radio', theme: 'islands', size: 'xl' }, name: 'auto', val: 1, options: [ { val: '1', text: 'BMW' } ] },

код зависимостей

({ shouldDeps: [ { elems: [ 'title' ] }, { block: 'input', mods: { theme: 'islands', 'has-clear': true, type: 'text', size: 'xl' } }, { block: 'textarea', mods: { theme: 'islands', size: 'xl' } }, { block: 'button', mods: { theme: 'islands', size: 'xl' } }, { block: 'select', mods: { mode: 'radio', theme: 'islands', size: 'xl' } }, ] })

в чем же тут дело?

Привет!

Мы сочинили пару новых пакетов:

  • bem-naming-transformations — низкоуровневый пакет про трансформации над инстансами BemEntityName. Грубо говоря, он позволяет из { block: ‘my-block’, elem: ‘some-elem’ } получить { block: ‘MyBlock’, elem: ‘SomeElem’ } и наоборот. Бонусом возможность добавить кастомный префикс блоку или задать свои собственные функции трансформации, где написать чего душе угодно.

  • postcss-css-to-bem-css — плагин для postcss, который можно запустить самостоятельно или внутри вашего любимого сборщика и превратить .my-block__some-elem { color: red } в .MyBlock-SomeElem { color: red; } (или наоборот) и использовать все прочие возможности предыдущего пакета.

Ставьте звезды и пользуйтесь во благо всех живых существ!

Сейчас посмотрел видео про БЭМ - очень понятно объясняется там же говорилось и про то что будет следующая лекция только уже где будут весь проект дорабатывать а именно подключать gulp. Как найти мне продолжение ?

Вот 1 часть. https://events.yandex.ru/lib/talks/2857/

В bem-components используется подход с использованием модификатора theme. У нас на проекте он тоже долго используется.

Простой пример на button https://github.com/bem/bem-components/blob/v6/design/common.blocks/button/_theme/button_theme_islands.post.css

Но, как показывает практика, он приносит некоторые раздувания стилей, особенно когда нужны только несколько модификаторов. И вообще проектные блоки часто без модификатора theme пишутся.

Но есть другой подход в виде уровней

common.blocks/
  button/

light.theme
  button/

dark.theme
  button/

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

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

В общем... Кто какие подходы использует? А может кто-то их совмещает?

П.Н. Сейчас размышляю над плюсами/минусами для нас от второго подхода.

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

const CartItem = bem.declBlock('CartItem', {
    delete() {
        console.log('Soft Delete')
    }
});

CartItem.declMod({ modName : 'obsolete' }, {
    delete() {
        console.log('Full Delete');
    }
});

cartItem = new CartItem();
cartItem.delete(); 

cartItem.setMod('obsolete');
cartItem.delete();

Результат в консоли

→ Soft Delete
→ Full Delete

Но возникает вопрос... На сколько архитектурно корректно использовать эти фичи? И использует ли кто-то их вообще?

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

@veged @tadatuta подскажите на сколько корректно использовать такой подход?

Приветствую всех!

Как могу смотрю, что происходит и появляется пару вопросов. Все идут в реакт или просто спрос рождает предложение? и когда сл. бемап?

Всем привет! Не получается обратиться к блоку text внутри блока categories. По аналогии с докой делаю:

modules.define('categories', ['i-bem-dom', 'text'], function(provide, bemDom, Text) { provide(bemDom.declBlock(this.name, {...})); });

На что получаю в консоли Error: Module "categories": can't resolve dependence "text". Если в исходном коде заменю 'text' на 'button', то ошибки нет. Помогите понять где не прав

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

web-jade@webjade-Aspire-TC-120:~/Documents/bemes$ yo bem-stub ? Enter your project name: bem-test ? Enter a name of the project owner: Nikita ? Enter an email of the project owner: web-kostrov@yandex.ru ? Choose a toolkit to build the project: ENB ? Specify additional libraries if needed: ? Choose redefinition levels to use: desktop ? Choose CSS preprocessor: Only pure CSS ? Do you want to use 'Autoprefixer'? No ? Choose technologies to be used in the project: BEMJSON, BEMTREE, browser.js ? Choose a template engine: BEMHTML ? Do you want to build static HTML? Yes ? Do you want to build 'tidy' HTML? No ? Choose types of files to be minimized: css, js create bem-test/.bowerrc create bem-test/.enb/make.js create bem-test/bower.json create bem-test/desktop.bundles/index/index.bemjson.js create bem-test/.gitignore create bem-test/package.json create bem-test/README.md

I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.

npm WARN deprecated enb-diverse-js@0.1.0: Use enb-js instead. npm WARN deprecated bem-xjst@1.2.1: v1.x is deprecated. Use v4.x or newer. See https://github.com/bem/bem-xjst/wiki/Migration-guides npm WARN deprecated coa@1.0.3: Please upgrade to 1.0.4 for node 0.10, 0.12, or to 2.0+ for node 4+ 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 node-uuid@1.4.0: Use uuid module instead npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

bem-test@0.0.0 postinstall /home/web-jade/Documents/bemes/bem-test npm run deps

bem-test@0.0.0 deps /home/web-jade/Documents/bemes/bem-test bower install

bower bem-core#v2.8.0 cached https://github.com/bem/bem-core.git#2.8.0 bower bem-core#v2.8.0 validate 2.8.0 against https://github.com/bem/bem-core.git#v2.8.0 bower bem-core#v2.8.0 install bem-core#2.8.0

bem-core#2.8.0 libs/bem-core npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN borschik-tech-cleancss@2.1.0 requires a peer of borschik@>=1.0.5 but none is installed. You must install peer dependencies yourself. npm WARN enb-modules@0.2.0 requires a peer of ym@~0.1.0 but none is installed. You must install peer dependencies yourself. npm WARN vow-node@0.3.0 requires a peer of vow@0.4.x but none is installed. You must install peer dependencies yourself.

added 295 packages from 273 contributors and audited 1111 packages in 19.615s found 41 vulnerabilities (25 low, 11 moderate, 4 high, 1 critical) run npm audit fix to fix them, or npm audit for details ✔ Done!

Привет.

Подскажите как правильно написать шаблон для элемента, который зависит от модификатора блока? Имеем:

{
    block: 'modal',
    mods: {
        theme: ['first', 'second']
    }
}

У этого блока есть елемент head, который должен иметь различную верстку в зависимости от темы модального окна. Единственный вариант, который пришел мне в голову это шаблон вида:

block('modal').mod('theme', 'first').elem('head')(
    ....
);

Но не работает. Зависимости указаны, стили приезжают, верстка не выводится.

Вопрос 2: Получается оба шаблона (для каждой темы) я должен написать в одном файле modal__head.bemtree.js? Или как-то можно разнести по разным файлам?

Есть ещё вариант писать шаблон в файле modal__head_theme_first.bemtree.js, но это неудобно, т.к. придется повторять модификатор темы для элемента head. Хм..

Добрый день. Немного разобравшись в структуре project-stub, передо мной встал простой вопрос. Нужно сделать запрос на какой-нибудь бэкенд и получить json с однотипными данными (элементами). Затем map-ом вставить кусок bemjson на основе полученных данных в bemjson.js бандла. Короче говоря динамически отрендерить какие-то однотипные элементы. Сам вопрос - где будет правильнее писать запрос и получение данных? Нормальным ли вариантом будет делать это непосредственно в коде страницы some-bundle.bemjson.js? Или есть лучший на ваш взгляд вариант. Спасибо)

Добрый день.

Блок header будет использоваться на всех страницах сайта. В бандлах, в файлах bemjson каждой страницы, кажется логично указывать только сам блок, и возможно модификаторы специфичные для этой страницы. Использую project stub.

например about.bemjson.js:

/...
content: [{
    block: 'header'
}]
/...

А в папке с блоком описать его структуру блока вместе с его элементами.

header.bemjson.js:

module.exports = [
    {
        block: 'link',
        mix: { block: 'header', elem: 'logo' },
        mods: {
            theme: 'islands',
            size: 'm'
        },
        url: 'https://bem.info/',
        content: 'bem.info'
    },
    {
        elem: 'nav'
    },
    {
        elem: 'sign-up-in-out'
    }
]

Но это не заработало. Посмотрел блоки из репозитария статьи создаём динамический БЭМ-проект там в некоторых папках с блоками, есть файл bemtree.js, вроде как решающий мою задачу.

в файле make.js раскомментировал строки с bemtree

bemtree.js:

block('header').content()(function() {
    return [
        {
            block: 'logo'
        },
        {
            elem: 'search-form'
        }
    ];
});

Сделал так же у себя, заменив содержимое на свое - тоже не заработало.

block('header').content()(function() {
    return [
      {
          block: 'link',
          mix: { block: 'header', elem: 'logo' },
          mods: {
              theme: 'islands',
              size: 'm'
          },
          url: 'https://bem.info/',
          content: 'bem.info'
      },
      {
          elem: 'nav'
      },
      {
          elem: 'sign-up-in-out'
      }
    ];
});

где я ошибся и что почитать, что бы больше так не делать?

Я использую методологию БЭМ и SCSS и у меня возник вопрос.

3 месяца назад я наткнулся на эту статью - https://css-tricks.com/using-sass-control-scope-bem-naming/. В ней средствами SCSS немного меняется иерархия стилей - стили элемента, которые зависят от модификатора блока, прокидываются к основным стилям элемента.

В целом мне этот подход нравится, он выглядит более модульным. Но хотелось бы знать, насколько это правильно с точки зрения БЭМа. Я пытался найти информацию на форуме, но ничего особо и не нашёл.

P.S. Я натыкался на вопрос с приблизительно похожей тематикой - о вложенных меда-запросах (https://github.com/bem-site/bem-forum-content-en/issues/57), в которой написано, что БЭМу это не противоречит. Поскольку ситуация в принципе похожая, может и с модификаторами так же можно?

Научите собирать из bemtree шаблонов html автоматически, т.к. у меня не используется bemjson-файла и использовать bemjson-to-html не могу. А как ещё собрать готовый html понять не могу. Пример конфигурации enb можно посмотреть в этом проекте, по сути там всё стандартно, ничего не менялось с образца BemExpress. Но html должен собираться для каждой папки pages/*, так как каждый бандл у меня это общий шаблон-обвязка (например общий шаблон публичной части сайта и общий шаблон панели администратора), а вот каждая папка в pages это шаблон именно уникальной страницы (например шаблон страницы статьи, который вставлен в шаблон публичной части сайта). Соответственно на выходе сборки было бы неплохо иметь что-то вроде bundles/desktop.bundles/название-страницы.html. Вот.

Добрый день. После прочтения документации на https://ru.bem.info. Возникли некоторые вопросы, которые я попытался максимально подробно описать с примерами, надеюсь на вашу помощь. Я использую классическую схему именования (block-nameelem-name_mod-name_mod-val). 1. Можно ли вкладывать элементы принадлежащие к одному блоку в другой: ```html

<header class="postheader">

Т.е. в этом примере имеется универсальный список (ul с классом "list") который я использую много где на странице, и в его элементы list__item вложены элементы post__time и post__author блока post. Можно ли так делать?
**2**. Служебный(приватный блок). Если я правильно понял, если в ходе именования возникает ситуация когда элемент имеет слишком сложную структуру, то его делают блоком(для удобства),
хотя он и не будет использоваться без своего родительского блока.
Например:
```html
<div class="events">
  <ul class="events-list">
    <li class="events-list__item">
      <a href="#" class="events-list__link">
        <div class="events__calendar">
          <span class="events__day"></span><br>
          <span class="events__month"></span>
        </div>
        <p class="events__details"></p>
      </a>
    </li>
  </ul>
  <a class="btn" href="#">Посмотреть все</a>
</div>

В данном случае внутри блока events я создал служебный блок events-list, чтобы не делать что-то вроде eventslist > eventslist-item events__list-link, т.к. это сбивает с толку. И опять таки служебный блок events-list содержит элементы блока events. Все ли я правильно понял и верна ли моя разметка? 3. Как я понял блок не может иметь внешнего позиционирования - margin. Но внутри блока margin, padding допускается использовать напрямую с элементами и даже с самим блоком? Или только через модификаторы? Пример:

<div class="block">
    <div class="block__elem1"></div>
    <div class="block__elem2"></div>
</div>
.block {
positon: relative;
padding: 10px;
}
.block__elem1 {
margin-top: 20px;
}
.block__elem2 {
position: absolute;
bot: 0;
}

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

<div class="feed">
    <div class="post feed__post"></div>
    <div class="post feed__post"></div>
    <div class="post feed__post"></div>
</div>
.feed {
padding: 10px 0;
}
.feed__post {
margin-bottom: 15px;
}

Мне нужно это сделать через родителя, как в примере? Или нужно использовать модификаторы типа:

<div class="post post_mb_10"></div>
.post_mb_10 {
margin-bottom: 10px;
}

Или мне нужно воспользоваться оберткой и задать отступ через нее, например добавить после feed элемент feed__item с margin. Все ли эти способы верны в БЭМ и какой из них предпочтительнее? 5. БЭМ осуждает каскад, но бывают случаи когда он необходим, например выпадающее меню:

.list__item:hover .list_sub {
 display: block;
}

или

.list__item_active .list_sub {
 display: block;
}

или создание темы для списка например:

.list_type_navbar .list__item {
 padding: 10px 20px;
}

Такие исключения допускаются или есть какой-то обходной путь? Хотелось бы получить ответы на эти вопросы и исправить ошибки в разметке если таковые имеются. Спасибо!

Привет! В этом выпуске мы собрали для вас последние новости из мира БЭМ с начала 2018 года.

Из главных новостей:

  • Вектор развития БЭМ сместился в сторону React.js. Поэтому в этом выпуске вы ничего не найдете про обновления bem-core или bem-components. Но это не означает, что мы закапываем их в пользу новой библиотеки bem-react-core. Это значит лишь то, что БЭМ-методология еще раз доказала, что она применима к любому проекту: общие принципы сохраняются и помогают сделать любой проект легче и быстрее.
  • Мы продолжаем развивать БЭМ-инструменты и технологии.
  • Дизайнеры Яндекс.Денег начали большое дело про то, как БЭМ помогает создавать масштабируемую дизайн-систему. Пока официальное название проекта в разработке, но основные принципы уже определены.

БЭМ и React

bem-react-core

Не успел окончательно выйти bem-react-core@1.0.0, как мы приблизились к выходу bem-react-core@2.0.0.

Состав изменений предстоящего мажора:

  • полная поддержка TypeScript;
  • переезд самой библиотеки на TypeScript;
  • отказ от inherit;
  • честное наследование средствами языка;
  • инструментирование кода в базовых блока и модификаторах, честная работа с super;
  • классовая нотация записи блоков, элементов и модификаторов;
  • валидация объединенных пропсов базового класса и модификаторов;
  • отсутствие проблем со статическими свойствами класса;
  • отказ от изменения названий базовых методов React. Мы вернули component!
  • снижение веса библиотеки до 2.7KB вместо текущих 4KB;
  • раздельный релиз для Preact и React версий: bem-preact-core и bem-react-core.

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

БЭМ и DESIGN

С конца прошлого года дизайнеры Яндекса активно заговорили и начали публиковать свои наработки в дизайн системе. Пока все материалы собраны в репозитории bemdesign. Но грядут изменения, так что следите за новостями!

В каждом своем выступлении или статье ребята доказывают необходимость системного подхода, который предлагает БЭМ-методология: «Храните систему и система защитит вас от дальнейшего хаоса и направит в нужную сторону» (с.).

Что сделали за начало этого года и конец прошлого:

Технологии

bem-express

Выпустили следующие обновления:

project-stub

Обновили project-stub для работы с последней версией bem-xjst. В gulp-bem исправили сборку клиентского BEMHTML.

bem-xjst

Выпустили версии v8.8.5-v8.9.3.

Из важного:

  • v8.9.3 — исправили деградации, появившиеся в v8.6.8.
  • v8.9.2
    • добавили опцию singleQuotesInJsAttrs, которая делает HTML-результат шаблонизации data-атрибутов меньше — не экранируются двойные кавычки в JSON. Бонус — человекочитаемость HTML. Подробности в документации.
    • Runtime linter: починили вывод стектрейса в случае циклических ссылок в BEMJSON.
  • v8.9.0 — упростили синтаксис для легких шаблонов. Теперь можно использовать object-like запись:
    block('link')({
        tag: 'a',
        addMix: 'outer-link'
    })
    
    Примеры можно смотреть тут.
  • v8.8.6 — устранили создание HTML-класса i-bem при cls() и bem:false.

Все изменения, вошедшие в релизы, описаны в CHANGELOG.

Инструменты

bem-sdk

  • Исправили баги в config (#295, #297, #298, #299), import-notation (#264, #289), в тайпингах entity-name (#305), и дропнули ES6 код в naming.entity.stringify — теперь можно безопасно использовать в браузерах

gulp-bem

  • Объединили gulp-bem пакеты в монорепозиторий. Теперь проще обновлять пакеты, документацию, чинить общие баги, и допиливать хотелки.
  • Выпустили тестовую версию gulp-bem-src с жестким кешированием интроспекции и графа. Тестирование показало прирост скорости по сравнению с enb на большом количестве деклараций и с распараллеленным gulp-bem-bundle-builder.

bem-tools

Выпустили bem-tools 2.3.0, где обновили bem-config в bem-tools-create.

Документация

Сайт bem.info

Изменили дизайн bem.info:

bem info 2018-02-05 12-32-36

Мероприятия

  • Провели серию митапов по БЭМ, посвященных bem-react-core.
  • Опробовали новый формат встреч и провели два интенсива на целый день, на которых Владимир Гриненко рассказал про БЭМ от азов до React.js.
  • Владимир Гриненко побывал в гостях у Frontend Weekend №38 и рассказал про БЭМ и работу в Симферополе.
  • Провели хакатон по инструментам БЭМ. Большинство результатов уже включены в этот выпуск дайджеста. Следите за новостями, если хотите принять участие в следующем хакатоне!

Видео со всех встреч мы всегда публикуем в канале bem.info на YouTube.

Stay BEMed!

При размещении интерактивных элементов из bem-components (@6.0.1, desktop) на картах openlayers (@4.6.5, .ol-viewport > ol-overlaycontainer-stopevent > ol-overlay-container ol-selectable > наш компонент) "проглатываются" клики.

Использую костыль в виде модификаторов altClick, перекрывающих оригинальные обработчики pointerclick и заменяющий своими на click (перепиливать оригинальные не решился -- как-то там уж оч. много всего, -- страшно).

На сей момент понадобилось переделать для button, input:has-clear:clear; возможно, понадобится для select (пока не использую, не проверял).

UP: Добавлен jsfiddle "на пощупать": http://jsfiddle.net/lilliputten/49bja8bc/

UP-UP: Если использовать stopEvent:false при создании ol.Overlay (см. закоменченый код в примере), то клики работают, но в таком случае события проваливаются сквозь overlay на карту (видно при click-drag поверх кнопки).

Здравствуйте. Использую БЭМ, как способ именования классов. Встретился с такой проблемой. У меня есть несколько разных классов для стилизации ссылок. Например, разноцветная, особым образом подчеркнутая и тд. Вопрос - как лучше поступить?

  1. Делать для таких классов отдельные блоки с модификаторами: styled-link styled-link_underscore, styled-link styled-link_colorful. Но тут минус в том, что сами по себе styled-link не нужны. Это просто пустой класс (без стилей). Как-то не очень правильно добавлять пустой класс.
  2. Делать для таких классов просто блоки - styled-link-underscore, styled-link-colorful. Тут минус в том, что, по сути, это ссылки. И класс нужен только для придания разных стилей ссылки. И для каждой ссылки делать разный класс - как будто это совершенно разные блоки - кажется не очень правильным решением.
  3. Первый вариант, только не писать styled-link, а сразу писать модификатор - styled-link_colorful. Но это неправильно с точки зрения БЭМ, да? Модификатор модифицирует блок или элемент, то есть, должен идти в контексте с ним. А у меня просто так написан. 4.Какой-то другой вариант?

Мы продолжаем серию интенсивов для новичков на целый день!

В прошлый раз участники жаловались, что сложно выбраться в рабочий день. Мы вас услышали и теперь проводим мероприятие в воскресение, 8 апреля.

Очень просим вас максимально оперативно зарегистрироваться.

Как и на прошлом митапе начнем с самых азов и познакомим начинающих верстальщиков с идеями, которые стоят за БЭМ, а затем перейдем к практике на БЭМ-платформе (bem-express) и React с использованием bem-react-core.

Вас ждет детальный рассказ про основы БЭМ на реальных примерах, включая CSS и хорошие практики в написании HTML-разметки. Кроме того, мы обсудим, как организовать станок верстальщика, рассмотрим такую мощную концепцию, как уровни переопределения, а также сборку.

Дальше мы обсудим разработку проекта на React.js и научимся описывать React-компоненты в декларативном стиле. Для вас подготовлено плавное погружение в bem-react-core. Мы на практических примерах рассмотрим, какие преимущества получит ваш React-проект с использованием этой библиотеки.

В этот раз у нас будет гораздо больше времени, так вы сможете сделать передышку, задать вопросы и перекусить в перерыве.

План мероприятия:
12:00 — 12:30 — Знакомство и ваши вопросы
12:30 — 14:00 — Основы БЭМ
14:00 — 15:00 — Перерыв
15:00 — 18:00 — Знакомство с React.js и плавное погружение в bem-react-core
18:00 — 19:00 — Заключительная секция вопросов и ответов

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

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

По всем вопросам пишите по адресу: info@bem.info

Stay BEMed!