Войти с помощью github
<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!

Кому интересен вебинара по bem-express? Какие темы нужно затронуть?

Хотелось узнать в чем реальные бенефиты от использования модификаторов для таких состояний, как hover, active, focus, вместо использования css-псевдоклассов. В той же либе бэм-компонентов, например, у компонента Button используются модификаторы.

Имеются ли наработки (идеи развития) в сторону ограничений областей видимости для либ?

Например: В проекте используется либа libA с блоками A, B, C. На проекте есть блоки D, E, F

Но появляется интереcная либа libH.... С более проработанная реализация блоков E и F... Но в этой либе используются свои реализации блоков A и C.

Что в свою очередь порождает конфликт.

Хорошо было бы использовать что-то вроде namespace для блоков из либ. @vithar @veged @tadatuta @zxqfox

Всем привет. Допустимо чтобы одна сущность имела несколько модификаторов с одним названием но разными значениями? Если да, то можете привести корректные примеры таких модификаторов?

Такое допустимо:

<div class="block block_theme_sun block_theme_green-islands"></div>
<div class="block block_size_m block_size_l"></div>

или у сущности название модификатора должно встречаться только один раз, например если есть модификатор block_size_m тогда сущность больше не может иметь модификаторов у которых название size то есть block_size_l нельзя использовать.

Мы продолжаем серию БЭМапов!

Сергей Бережной проведёт секцию живого программирования и познакомит вас с библиотекой bem-react-core. Вы узнаете, как и зачем в одном проекте совмещать React и bem-react-core, как создавать блоки и элементы, работать с модификаторами и использовать уровни переопределения.

Мы приглашаем всех, кто уже знаком с React и хочет привлечь БЭМ к своему проекту! Регистрация открыта!

Stay BEMed!

При запуске тестов для модулей, использующих bem-import в окружении Windows возникают ошибки типа:

> node node_modules/jest/bin/jest.js
 FAIL  src/blocks/App/App.test.js
  ● Test suite failed to run
    Cannot find module './HeaderApp-Header.js' from 'App.js'

(Вроде бы что-то похожее было и при попытке подключения bem-react-components.)

Приличного способа решения не нашёл (возможно, помогло бы использование path.posix; мне не удалось). Для меня пока работает вот такой патч (для babel-plugin-bem-import@1.4.2):

--- node_modules/babel-plugin-bem-import/dist/index.js.ORIG    Sat Mar 10 05:43:45 2018
+++ node_modules/babel-plugin-bem-import/dist/index.js    Sat Mar 10 19:23:55 2018
@@ -63,13 +63,13 @@
                 .map(function (bemCell) {
                     var localNamingOpts = levelsMap[bemCell.layer].naming || namingOptions;
                     var fsScheme = levelsMap[bemCell.layer].scheme || 'nested';
-                    var entityPath = path.resolve(bemFs(fsScheme).path(bemCell, localNamingOpts));
+                    var entityPath = path.resolve(bemFs(fsScheme).path(bemCell, localNamingOpts)).replace(/\\/g,'/');
                     // BemFile
                     return {
                         cell: bemCell,
                         exist: fs.existsSync(entityPath),
                         // prepare path for require cause relative returns us string that we couldn't require
-                        path: requiredPath(path.relative(path.dirname(filename), entityPath))
+                      path: requiredPath(path.relative(path.dirname(filename), entityPath)).replace(/\\/g,'/')
                     };
                 });

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

Не про БЭМ, но прошу помочь разобраться. Редирект с сайта site.ru на сайт test.ru Локально все работает, на реальном сервере редиректит по адресу site.ru/test.ru, причем даже обычный window.location.replace('http://test.ru') работает также. Может кто подсказать в чем причина?

6 years ago

/dell

/dell