К примеру есть блок Collapse, у него существует два элемента: Collapse__part & Collapse__item.

На момент инициализации блока хочу разбить его контент таким образом:

//- Из такой структуры (так определено в bemjson)
<div class="collapse">
  <div class="work collapse__item">...</div>
  <div class="work collapse__item">...</div>
  <div class="work collapse__item">...</div>
</div>

//- В такую (модифицировать)
<div class="collapse">
  </div class="collapse__part">
    <div class="work collapse__item">...</div>
    <div class="work collapse__item">...</div>
  </div>
  </div class="collapse__part">
    <div class="work collapse__item">...</div>
  </div>
</div>

C условием того что эти чанки могут быть разной длины(настраиваемый параметр), в данном случае длина составляет 2 элемента(Collapse__item)

Посоветуйте пожалуйста в какой технологии это лучше сделать (в js, bemhtml.js или иным способом), каким образом?

ps. полностью использую среду разработки BEM (rep.: Project-Stub)

Здравствуйте. Подскажите пожалуйста, может ли быть так: Есть блок “родитель”, внутри него есть еще один блок “потомок” и внутри блока потомка есть элемент блока родителя? То есть вот так.

<div class=”parent”>
    <div class=”children”>
      <div class=”parent__elem”></div>
    </div>
</div>

Подскажите как решается данная проблема? У нас имеется класс "header__search-form" который допустим имеет отступ с низу, но как быть если придется перенести блок "search-form" в другое место где ему тоже нужны те же свойства, нужно создавать новый класс для нового окружения, каскадом, добавлением утилитарного класса или как то иначе? вижу 3 варианта

Вариант 1

<div class="header">
    <div class="search-form header__search-form"></div>
</div>

<div class="sidebar">
    <div class="search-form sidebar__search-form"></div>
</div>

<div class="blog">
    <div class="search-form blog__search-form"></div>
</div>

.header__search-form{
    margin-bottom:10px;
}
.sidebar__search-form{
    margin-bottom:5px;
}
.blog__search-form{
    margin-bottom:10px;
}

Вариант 2

<div class="header">
    <div class="search-form mb-10"></div>
</div>

<div class="sidebar">
    <div class="search-form mb-5"></div>
</div>

<div class="blog">
    <div class="search-form mb-10"></div>
</div>

Вариант 3

<div class="header">
    <div class="search-form"></div>
</div>

<div class="sidebar">
    <div class="search-form"></div>
</div>

<div class="blog">
    <div class="search-form"></div>
</div>

.header .search-form {
    margin-bottom:10px;
}
.sidebar .search-form {
    margin-bottom:10px;
}
.blog .search-form {
    margin-bottom:10px;
}

Стандартная ситуация

<body class="body body_fixed">
   <div class="logo">
      LOGO
   </div>
</body>


.logo {
   font-size: 40px;
}
.body.body_fixed .logo {
   80px;
}

Как мне такого рода CSS по папочкам разложить? Как посоветуете наименовать файлы? Что вообще можно сделать чтоб это грамотно сопровождать и deps какой и куда прикладывать. Решил упороться на сборщиках и правильной организации структуры. Настроил сборщики начал тесты проводить потом бац, а что делать со спецефичностью? Хочешь не хочешь но есть моменты когда от неё не уйти.

Добрый вечер. Подскажите пожалуйста, правильно ли организована разметка по БЭМ? Внешняя геометрия и позиционирование блока, а именно padding, position и т.д задаётся через миксы .top-bar__top-lang, .top-bar__top-phone, page__header, footer__copyrights, header__navigation, page__wrapper. Все ли я правильно понял? Можно ли упростить/добавить что либо DOM-узлах?

<body class="page">
    <div class="wrapper page__wrapper">
        <div class="top-bar page__top-bar">
            <div class="top-bar__container">
                <div class="top-bar__row">
                    <div class="top-lang top-bar__top-lang">
                        <ul class="top-lang__list">
                            <li class="top-lang__item">
                                <a href="" class="top-lang__link"></a>
                            </li>
                            <li class="top-lang__item">
                                <a href="" class="top-lang__link"></a>
                            </li>
                            <li class="top-lang__item">
                                <a href="" class="top-lang__link"></a>
                            </li>
                        </ul>
                    </div>
                    <div class="top-phone top-bar__top-phone">
                        <!-- START .top-phone__list -->
                        <ul class="top-phone__list">
                            <li class="top-phone__item">
                                <a href="" class="top-phone__link">p</a>
                            </li>
                            <li class="top-phone__item">
                                <a href="" class="top-phone__link"></a>
                            </li>
                            <li class="top-phone__item">
                                <a href="" class="top-phone__link"></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <header class="header page__header">
            <div class="navigation header__navigation">
                <nav class="navigation__container">
                    <ul class="navigation__list">
                        <li class="navigation__item">
                            <a href="" class="navigation__links"></a>
                        </li>
                        <li class="navigation__item">
                            <a href="" class="navigation__links"></a>
                        </li>
                        <li class="navigation__item">
                            <a href="" class="navigation__links"></a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <footer class="footer page__footer">
            <div class="copyrights footer__copyrights"></div>
        </footer>
    </div>
</body>

Приветствую, начинаю изучать БЭМ столкнулся с такой проблемой, как правильно именовать элементы при большой вложенности? Пример:

<div class="profile">
        <div class="profile__slider">
            <div class="profile__slider-slide">
                <div class="btn profile__slider-slide-btn"></div>
                <div class="message profile__slider-slide-message" ></div>
            </div>
            <div class="profile__slider-slide profile__slider-slide_something">
                <div class="btn profile__slider-slide-btn"></div>
                <div class="message profile__slider-slide-message" >
                    <div class="profile__slider-slide-message-bold"></div>
                </div>
            </div>
        </div>
    </div>

Можно использовать данное именование: profileslider-slide-message, которое говорит что это элемент "message" является потомком элемента "slide", который является потомком элемента "slider", который является элементом блока "profile". В данном случае profileslider-slide-message также является элементом блока "profile", хотя это не совсем логично, но обеспечиваться локализация данного элемента, в том плане что он будет уникальным.

В верстке я часто использую псевдоклассы :first-child, :last-child, :nth-child и тд. Они позволяют избежать ошибок при изменении верстки.

Допустимо ли повсеместное использование таких псевдоклассов в БЭМ? Или стоит использовать их только в крайней необходимости, в остальных случая заменяя модификаторами?

Например, есть такая разметка:

<div class="page">
  <ul class="list">
    <li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item"></li>
  </ul>
</div>

Блок .list реиспользуемый, но мне нужно чтобы внутри блока .page отступы между элементами .list__item отличались от стандартных для элемента.

Сейчас я поступаю так: миксую блок .list к .page и каскадом изменяю свойства необходимых элементов.

<div class="page">
  <ul class="page__list list">
    <li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item"></li>
  </ul>
</div>

Вот:

.list{
  &__item{
    margin-bottom: 16px;
  }
}

.page{
  &__list{
    .list{
      &__item{
        margin-bottom: 32px;
      }
    }
  }
}

Можно ли так делать? И как стоит поступать в таких случаях?

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

Как применять методологию bem с bootstrap-scss при верстке макета ? Меня интересует способы применения какие они есть и какие задачи решает каждый из этих способов.

Можно ли перезаписывать стили дочерних элементов через каскад от модификатора?

Например вот так:

.block {
  &__content {
    background-color: red;
  }

  &__text {
    display: block;
  }

  &_active {
    .block__content {
      background-color: blue;
    }

    .block__text {
      display: flex;
    }
  }
}

~~~

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

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

Вопрос 2: Предположим есть блок кнопки (button), и в разных местах одного и того же проекта ему задаются разные размеры, это все нужно задавать через модификаторы?

Вопрос 3: Иногда требуется задать отступы от одного блока до другого, как это лучше реализовать (через модификаторы)?

Вопрос 4: Одна и та же кнопка в разных проектах имеет некоторые различия во внешнем виде, но часть стилей одинаковая, в стиль блока запихнуть только общее, а остальное сделать через модификаторы (_theme_a, _theme_b)?

P.S. Новичок в БЭМ, вопросов много, извините.

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

<div class="header">
    <!-- К блоку `search-form` примиксован элемент `search-form` блока `header`-->
    <div class="search-form header__search-form"></div>
</div>

Микс header__search-form добавляет некие стили форме поиска. Форма поиска у нас подключается программно модулем. Теперь решили, что форма поиска необходима и в футере. Описываем подключение модуля и там с тем же шаблоном. И у нас (если ни чего не менять) этот микс применится и в футере. Соответственно нам необходимо либо иметь два разных шаблона блока поиска, либо микс выводить по выполнению условия (скажем PHP формирует этот HTML). Что является по сути лишним. Гораздо более логично, понятно и чище будет обойтись без "миксов". Или, точнее, реализовывать их "обычным" способом каскадных стилей.

.header .search-form { color:red; }

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

В данном примере мы совместили поведение и стили блока search-form и элемента search-form блока header. Такой подход позволяет нам задать внешнюю геометрию и позиционирование в элементе header__search-form, а сам блок search-form оставить универсальным. Таким образом, блок можно использовать в любом другом окружении, потому что он не специфицирует никакие отступы. Это позволяет нам говорить о его независимости

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

Только начинаю разбираться с БЭМ. Прочитал все что есть на сайте и посмотрел пару роликов, но остались вопросы на самые базовые темы. Вот один из них, касающийся способов модифицирования стилей элементов вложенных блоков:

Предположим, есть блок button:

< div class="button" > < div class="button_ _icon" / > < /div>

.button_ _icon { color: yellow; }

Он является элементом для блока panel

< div class="panel" > < div class = "button panel_ button" > < div class="button _icon" /> < /div> < /div>

Предположим, мне надо поменять цвет у button__icon только в панели, но не задеть его в остальных местах. Как это сделать правильно?

Примиксовывать к button_ icon panel _button-icon. Это может привести к изменению кода блока button, если он не подразумевал возможность примиксовывать к иконке другие классы (например, мы используем React), что противоречит БЭМ.
Использовать вложенный селектор .panel .button_ _icon { color: red; }. Это увеличивает связанность компонент и зависимость от реализации button'а. Ну и в обоих этих вариантах panel в принципе не должен обращаться да и знать про элементы чужого блока.
Добавить модификатор button_ _icon_color_red для иконки. Опять же потребуется изменение кода для кнопки. И реализация сильно усложнится, если вложенность будет бОльшая - например, не во всех панелях у кнопки другой цвет, а только в панелях, которые лежат в header. Прокидывать модификатор через всю иерархию - напрягает. Как правильно?

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

Есть какие-то готовые решения, которые у меня не получилось загуглить? В какую сторону смотреть?

Всем привет ! Я только недавно начал глубже погружаться в БЭМ-методологию (до этого использовал только БЭМ-нейминг). Мне очень понравилась эта концепция и хотелось бы полностью внедрить ее в свой воркфлоу. Однако, т.к. у меня недостаточно опыта и я довольно поверхностно знаю JavaScript, мне не хватает знаний чтобы запилить свой "велосипед" для Gulp4 и/или Webpack4. А готовые решения вроде bem-tools, enb и других специфических решений мне не подходят из-за своей перегруженности и как мне кажется сложности. Я не говорю что это так и есть, это справедливо и субъективно лично для меня.

Хотелось бы иметь возможность подтягивать данные в pug-шаблоны из data.json-файла или аналогичного data.js, а также декларативно определять структуру БЭМ-боков с учетом соответствующих зависимостей.

Если совсем коротко, то нужно вот из такой структуры:

app
│   ├── assets
│   │   ├── fonts
│   │   ├── images
│   │   └── libs
│   ├── blocks
│   │   ├── common.blocks
│   │   │   ├── footer
│   │   │   └── header
│   │   │       ├── header.js
│   │   │       ├── header.pug
│   │   │       ├── header.scss
│   │   │       ├── img
│   │   │       └── nav-menu
│   │   │           ├── img
│   │   │           │   └── background.jpg
│   │   │           ├── nav-menu.js
│   │   │           ├── nav-menu.pug
│   │   │           └── nav-menu.scss
│   │   ├── desktop.blocks
│   │   └── touch.blocks
│   ├── pages
│   │   ├── about
│   │   │   ├── about.js
│   │   │   ├── about.pug
│   │   │   └── about.scss
│   │   ├── gallery
│   │   │   ├── gallery.js
│   │   │   ├── gallery.pug
│   │   │   └── gallery.scss
│   │   └── home
│   │       ├── home.js
│   │       ├── home.pug
│   │       └── home.scss
│   └── templates
│       ├── custom.pug
│       └── default.pug

получить на выходе вот такую:

.
├── about.html
├── assets
│   ├── fonts
│   │   ├── font1
│   │   └── font2
│   ├── images
│   │   └── sprites
│   │       ├── png
│   │       └── svg
│   ├── scripts
│   │   ├── about.min.js
│   │   ├── common.min.js
│   │   ├── gallery.min.js
│   │   └── home.min.js
│   └── styles
│       ├── about.min.css
│       ├── common.min.css
│       ├── gallery.min.css
│       └── home.min.css
├── gallery.html
└── home.html

Мне не принципиально на чем делать сборку, будь-то Gulp, Webpack или их совместное использование, главное получить ожидаемый и предсказуемый результат. Надеюсь, я доступно изъяснялся и смог донести свою мысль. Какие будут мысли на этот счет ? :) Заранее всем признателен.

з.ы. Естественно, прежде чем оставлять свой вопрос здесь я шерстил по сети в поисках готовых решений, однако в одних случаях разобраться мешало отсутствие документации, в других - неактуальность самой информации, в иных - не хватало моей профессиональной компетенции. з.з.ы. В Ютубе я натыкался на пару видео, но если честно, изложенная там информация расчитана далеко не на новичков. Пользуясь случаем, хочу попросить ответственных ребят из Яндекса обновить учебные видеоматериалы и записать воркшопы по сборке БЭМ-проектов на Gulp4 и Webpack4 с учетом реалий 2019 года. Я думаю, не одна сотня людей ждет подобного материала. Всем спасибо.

Добрый день. Планируется ли обновлять эту технологию, так как она довольно интересно смотрится, но не поддерживает PostCSS. Если не планируется, то возможно у кого-то есть нечто подобное, был бы благодарен!

Решил создать собственный блок. Назвал его usual. Но при добавлении mod к нему ничего не происходит. Единственное, что применяется - это tag()(). Вот, что я пишу в usual.bemhtml(скрин) Вот что на выходе:

Следую инструкциям описанным в этой статье - https://habr.com/company/yandex/blog/251473/ При сборке и старте проекта(npm start или enb server) возникает ошибка в borshik'е При этом проект собирает все, но при изменении чего-либо в файлах не реагирует и не перезагружает страницу.

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at assertPath (path.js:39:11)
    at Object.dirname (path.js:651:5)
    at res.__constructor (C:\Users\Admin\Desktop\currebt\secondproject\node_modules\borschik\lib\tech.js:87:47)
    at new res (C:\Users\Admin\Desktop\currebt\secondproject\node_modules\borschik\node_modules\inherit\lib\inherit.js:123:43)
    at res.createFile (C:\Users\Admin\Desktop\currebt\secondproject\node_modules\borschik\lib\tech.js:24:24)

Скриншот

Приветствую, балуюсь с новой библиотекой и видимо, что то с руками)

import * as React from 'react';
import { withBemMod, ModBody } from '@bem-react/core';
import { IButtonProps } from '../index';

const ButtonLink: ModBody<IButtonProps> = (Base, { text, className }) => (

  // className === 'Button Button_type_link'

  <a className={className}>{text}</a>
);

export const ButtonTypeLink = withBemMod<IButtonProps>('Button', { type: 'link' }, ButtonLink);

библиотеки обновил, но не понимаю почему там нет ModBody, ведь я так хочу менять не только стили )

и еще момент я так понимаю className основного блока должен сам приехать. Или я не прав?

Помогите пожалуйста советом, добрые люди.

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

Помогите разобраться с подключением webpack-bem-loader, вроде делов то добавить в конфиг пару строк.

Делаю так:

overrides config

module.exports = function override(config, env) {
  // Add bem-loader in Babel scope
  const babelLoader = config.module.rules[2].oneOf[1];

  config.module.rules[2].oneOf[1] = {
    test: babelLoader.test,
    include: babelLoader.include,
    use: [
      {
        loader: require.resolve('webpack-bem-loader'),
        options: {
          naming: 'react',
          levels: ['./src/blocks'],
          techs: ['js', 'css'],
          techMap: {
              js : ['react.js']
          },
          langs: ['ru', 'en']
        }
      },
      {
        loader: babelLoader.loader,
        options: babelLoader.options
      }
    ]
  };

  return config;
}

Ну и пытаюсь в index.js проекта поймать свой блок App

import App from 'b:App';

который написан как

import React from 'react';
import { decl, Bem } from 'bem-react-core';

export default decl({
  block: 'App',
  content() {
    return (
      <Bem block='App'>asd</Bem>
    );
  }
});

вот мой package.json

{
  "name": "bemdev-plate",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bem-react-core": "^2.2.3",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "react-app-rewired": "^1.6.2",
    "webpack-bem-loader": "^0.7.0"
  }
}

Помогите разобраться где я не прав? или где читать внимательнее ?

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

<div class="page-main__banner banner">
    <section class="banner__content">
      <h1 class="banner__title">Быстрая доставка цветов</h1>
      <ul class="banner__advantages">
        <li class="banner__advantage banner__advantage--rose">
          Ежедневный привоз свежих цветов
        </li>
        <li class="banner__advantage banner__advantage--ruble">
          Низкие цены за счет больших поставок
        </li>
        <li class="banner__advantage banner__advantage--car">
          Быстрая круглосуточная доставка
        </li>
      </ul>
    </section>
  </div>

Первая обертка - для фона на всю ширину страницы. Второе - собственно информация. Но у меня осмысленное название у обертки получается, а section - это уже по сути элемент блока. Но при этом я не могу сам section выделить в отдельный блок, т.к. фон тоже является частью блока. Извиняюсь, если не понятно написал. И прошу простить, если вопрос глупый.

Дайджест новостей по БЭМ. Выпуск №15

В этом полугодии ребята из команды БЭМ, как настоящие эссенциалисты, решили откинуть все неважное и сосредоточить усилия на первостепенных задачах. Поэтому этот выпуск дайджеста уместился на один экран :)

Итак, главные новости полугодия:

БЭМ и React

Антон Виноградов пожелал всем добра и сообщил, что bem-react-corе v3 влита в master и с этого момента становится основной рекомендованной версией библиотеки для работы с БЭМ в React мире. А вот версии v1 и v2 больше поддерживаться не будут, но еще какое-то время будут доступны в ветках.

Репозиторий bem-react-core переименован в bem-react для соответствия с npm неймспейсом @bem-react, где находятся все пакеты библиотеки.

Инструменты

Выпустили @bem-react/* пакеты.
Опубликовали пакет enb-js-browserify в npm. Используйте его, чтобы получить commonJs в своем клиентском коде.

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

Обновили документацию к пакетам bem-sdk с живыми примерами в RunKit:

БЭМ и DESIGN

Опубликовали первую версию дизайн-системы Whitepaper.
Собрали портал http://whitepaper.tools.
Переехали в новую организацию на GitHub https://github.com/whitepapertools.

Все актуальные новости и анонсы ребята публикуют в Telegram канале whitepaper.

Мероприятия

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

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

Всех с наступающими и наступившими праздниками! Stay BEMed!

Добрый, возможно я хочу скрестить ежа с ужом, но.. У меня делается сайт , все по блокам и по полочкам, от БЭМ я хочу - уровни переопределения, блоки, элементы, модификаторы в стилях, в js пока будет слабая поддержка, к react команда не готова, ну и к i-bem тоже. Js будет пока свой. На js очень хотелось поддержки классов и всех других прелестей, поэтому собирал на webpack через babel, но сейчас нужно делать уровни переопределения, webpack из коробки не знает о них ничего, делать руками импорты - мракобесие. Нашел лоадер webpack-bem-loader, переписал импорты на более удобные, собрал, в итоге со стилями все ок, но js крашится с ошибкой: app.js:4 Uncaught TypeError: (webpack_require(...).default || webpack_require(...)).applyDecls is not a function. Если руками в бандле поудалять вызов .applyDecls(), то все работает как нужно. Как я понимаю, это из-за того, что лоадер заточен под react, может есть какие опции, которые мне помогут, или где поправить это? Я форкнул бы.

Приветствую! Когда будет доступен ресурс: https://ru.bem.info/platform/libs/bem-components/?

Вопрос 1: Вроде DI штука понятная, но пока не понятны паттерны её использования. В частности одна из фичь, про которую говорят — дешёвые эксперименты. Но чтобы эксперименты были максимально дешёвыми (через di), то получается, что во всех блоках нужно отказаться от "классических" импортов и всё делать через di? (чтобы при приходе эксперимента не нужно было переписывать блок на di)

Вопрос 1.1: Где должен храниться код/реестры экспериментов? Внутри компонентов или лежать где-то рядом с компонентами?

Вопрос 1.2: Как правильно накатывать реестры и использовать версии экспериментов?

Вопрос 2: Следующее... В di правильно будет в качестве registry.id указывать имя блока или можно указывать и модификатор?

// ProductCard
new Registry({ id : 'ProductCard' })

ProductCard.registry/desktop.js
ProductCard.registry/mobile.js

// Product/_layout
new Registry({ id : 'ProductCard_layout_grid' })

ProductCard_layout_grid.registry/desktop.js
ProductCard_layout_grid.registry/mobile.js

@awinogradov @tadatuta

23 ноября в 19:00 о московском офисе Яндексе пройдет очередной БЭМап.

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

Завсегдатаи БЭМапов помнят, что мы уже рассказывали о третьей версии библиотеки bem-react-core, которая помогает работать по БЭМ-методологии в мире React.

На этот раз мы хотим перейти от теории к практике и на простых примерах показать, как использование библиотеки делает ваши React-проекты гибче и проще в поддержке.

Мы рассмотрим все три пакета библиотеки:

classname — для генерации имен классов в соответствии с БЭМ-нотацией
core — для динамической работы с модификаторами
di — для реализации концепции уровней переопределения с помощью паттерна Dependency Injection

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

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

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

Stay BEMed!

https://5minreact.ru/49-bem-react-core/ — слушайте на здоровье!

Уважаемые коллеги, подскажите, пожалуйста, как правильно переопределять стили блока, например:

.article__text {color: blue;} /* стиль текста именно в блоке article*/
.text {color: red;} /* общий стиль текста блока text*/

<div class="article">
    <p class="text article__text">Текст все равно красный!</p>
</div>

Стиль текста article__text все равно не меняется, потому что .text расположен ниже (сборка стилей в main.css происходит по алфавиту). Считаю, что использование !important или дополнительную вложенность элементов - это не метод БЭМ, так как же правильно обходить такую ситуацию? Следить за алфавитным порядком стилей в большом проекте также объективно не имеется возможности.

Или я неправильно понимаю использование миксов? Укажите, пожалуйста, на ошибку.

Как динамически разбить элементы блока на чанки?

Перекрестные элементы

Универсальный класс

Модификация блока путём увеличение специфичности

Правильно ли организована разметка по БЭМ?

Как правильно именовать, элементы при большой вложенности?

Использование псевдоклассов в БЕМ

Как использовать миксы от родителей к элементам дочерних реиспользуемых блоков?

Как применять на практике bem + bootstrap-scss ?

Допустим ли каскад в модификаторах?

Про заголовки

Как разметить структурно сложный но при этом нереюзабельный элемент?

БЭМ и задание размеров шрифта, кнопки, отступов

Мысли про миксы

Модифицирование стилей элементов вложенных блоков.

Линтинг разметки с БЭМ: есть ли?

Как собрать многостраничный БЭМ-проект c зависимостями на Gulp4 и/или Webpack4?

Обновление enb-bembundle

Синтаксис BEMHTML игнорируется

При сборке проекта на БЭМ возникает ошибка TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

Почему потерялся ModBody? @bem-react/core )

Подключение webpack bem loader

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