У яндекса всегда проблемы с документацией, со всеми продуктами так.
Целые бизнесы на этом строятся, как например консалтинг по clickhouse.

Если здесь есть кто-то с полномочиями на сбор фидбека о работе компании в целом, можете передать в вашу внутреннюю систему моё мнение о том, что вам стоит уделять больше внимания документации, потому что это самое главное для публичных open source продуктов.

По поводу конкретно di не понятно что именно тебе может быть не ясно.
- Читай документацию с ясными примерами https://github.com/bem/bem-react/tree/master/packages/di
- Посмотри как это используется yandex-ui
- Если даже после этого что-то не ясно, задавай конкретные вопросы. Если на твой вопрос нет ответа в документации, я почти уверен что разработчики увидят это и добавят туда по собственной инициативе, потому что они достаточно заботливые. И они точно добавят, если этого нет и ты будешь настаивать на добавлении в этом чате или ещё лучше, сделаешь PR

👍

ibemjs. У инпута срабатывает focusout в тот момент когда кликаем на корзину. У focusout приортитет перед click? По логике сначала кликнули и как следствие получили focusout. Почему focusout срабатывает раньше?

Чтобы назначить фокус, нужно сначала освободить фокус, не? Он же, по сути, синглтон.

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

onBlur? Да.

а вот если у меня есть иконка которая меняет свой цвет в зависимости от времени суток (день — желтая, ночь — голубая)
то я могу их описать как модификаторы, типа
block__icon--night
block__icon--day
?
или это не правильно, ведь модификатор должен показывать как выглядит, типа большой, маленький, красный
или же это можно воспринимать как тема иконки? или как лучше

Да, это правильное использование модификатора. А "красный" не правильное, потому что завтра захочется сделать зелёным и вместе с стилями придётся менять и имя класса во всех местах использования

а блин точно. получается модификаторы не должны зависть от этого, типа цвет, шрифт, фон?
типа не icon--red, а icon--error?
потому что иконка ошибки не значит красная, это уже от дизайнера зависит

Да. Именуй по назначению, а не по характеристикам

но модификаторы же получается могут быть либо булевыми, либо ключ-значение
поэтому правильнее будет
block__icon--theme--night?

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

да ну с другой стороны если у меня будут реальные темы блоков, типа dark, light, я их буду групировать по ключу theme
то нужно и как-то сгрупировать это night и day
можно какой-то ключ, например
block__icon--times-of-day--night

хотя и довольно громостко

Всё правильно. Это уже вопрос твоей архитектуры, как решишь так и будет. Можно например в ключ state положить. Или устанавливать эти стили не для BlockIcon, а для конкретного блока в котором используются эти иконки или на уровне темы

да спасибо

а вот вопрос
действительно, если применять ту же тему какую-то для всего блока, так как меняется и сам блок и его элементы, например при
block--theme--dark
блок становится темным, а все элементы в нем по типу
block__title, block__icon, block__description белыми
но вот вопрос как тогда мне поменять цвет вложенных элементов? к кажому применить модификатор theme--dark и прописать стили для них?
ведь по БЭМу не желательно использовать вложенные селекторы по типу
.block img

Тема - это просто блок с css переменными содержащим цвета, шрифты, отступы и прочее.

Эти css переменные используются блоками и при изменении темы меняется вид блоков.

Такая технология используется в https://github.com/bem/yandex-ui/

Для изучения живых примеров страниц на этой технологии изучи страницу https://bem.github.io/yandex-ui-themer/

На body элементе висит класс Theme_color_yandex-default с переменными, а все компоненты используют эти переменные

то будет типо так?
.clock {
 border: 1px solid #dddddd;
 border-radius: 6px;
}

.clock--times-of-day--day {
 --icon-bg-color: #ef7b00
}

.clock--times-of-day--night {
 --icon-bg-color: #2459a7
}

.clock__times-of-day-icon {
 display: block;
 width: 15px;
 height: 15px;
 border-radius: 50%;
 background-color: var(--icon-bg-color);
}

хотя нетогда блок зависит т модификатора и по сути светлая тема это тема по умолчани. по этому наверное лучше
.clock {
 border: 1px solid #dddddd;
 border-radius: 6px;
 --icon-bg-color: #ef7b00
}

.clock--times-of-day--night {
 --icon-bg-color: #2459a7
}

.clock__times-of-day-icon {
 display: block;
 width: 15px;
 height: 15px;
 border-radius: 50%;
 background-color: var(--icon-bg-color);
}

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

Есть иконка
.Icon {
 background-color: var(--icon-bg-color);
}

А есть тема

.Theme__time_day {
 --icon-bg-color: #ef7b00
}

.Theme__time_night {
 --icon-bg-color: #2459a7
}

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

В целом, можно и в конкретном блоке переопределять, но мне не нравится такая идея из-за протекания зоны ответственности. Лучше бы блоку clock ничего не знать о внутреннем механизме другого блока icon. Это не его дело и при изменении деталей реализации icon придётся править и блок clock