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

Мне просто привычно думать в концепции тем, потому что они глобальны и ими можно кастомизировать разные элементы. Но в простом случае может быть удобнее сделать как ты и предложил, вместо Theme__time_day использовать Clock__time_day, если иконка это не самостоятельный блок, а элемент блока Clock

p.s. я напутал с форматированием и у меня time как элемент, но вроде БЭМ не обязывает использовать конкретные разделители, поэтому можно представить что это такой формат отделения модификаторов

хмхм очень интересно, спасибо

Модификатор блока может менять элементы блока через вложенные селекторы, это нормально

probably an entity lookup issue

может кто-то хочет попрактиковаться в письменном английском

Hello, I posted a question on Stackoverflow regarding SRP and using mixes in BEM. I wander if anyone would mind looking at it. https://stackoverflow.com/questions/65960953/css-bem-mix-in-elements-srp-and-naming

БЭМ и Bootstrap.

Вот так норм?

//sass
.someblock__someelement
 @extend .col-sm-3

Во что это скомпилируется? Например я не знаю sass, не представляю результат

Что именно должно быть норм? Не шарю за bootstrap, но если в ".col-sm-3" ничего не вложено, то это валидный по бэм css.

.col-sm-3, .someblock__someelement{
/* здесь будет содержимое класса col-sm-3 бутстрапа */
}

Понятно. А в чём вопрос?

Ты так пытаешься взаимствовать стили из бутстрапа? Почему руками не скопировать?

У такого кода будут побочные эффекты в виде повышенной специфичности селекторов

Плюсую. Реализация ".col-sm-3" может быть какой угодно. В том числе может содержать вложенные селекторы. Насколько знаю, этот селектор просто отвечает за ширину, в таком случае лучше использовать css-переменные. Как-то так:

\:root
  --col-sm-3: 100px

.someblock__someelement
  width: var(--col-sm-3)

Там не один класс, а целый фреймворк. Его особо руками не скопируешь.

Вопрос в поиске правильного решения. Меня смущает конечный css который превратится в что то типа:

.col-sm-3, .class1, .class2, .class3, .class4 {}

И так для всех классов которые я решу экстендить.

Альтернатива очевидная в хтмл писать бэм классы и дополнять их классами бутстрапа.

Типа было:

<p class=”block block__element”>...</p>

Стало:

<p class=”block block__element col-sm-3”>...</p>

Как пример.


Или есть «правильное» решение?

Я хочу использовать готовый grid бутстрапа. И при этом верстать проект используя БЭМ методологию.

Ну ты же всё равно переписываешь этот фреймворк в свой проект. Просто вместо копирования кода ты копируешь имена классов.

Правильного решения нет, зависит от задачи.

Если тебе нужно сделать что-то конкретное - можешь использовать такой подход с миксами как ты описал. Тем более, если это описывается в JSX, то всё будет инкапсулировано и если потребуется, легко будет выпиливать бутстрап.

Ну а если у тебя есть время и желание - сделай свой бутстрап на БЭМе. Или погугли готовый. Что бы всё было идиоматично

А почему тебе нужен грид именно бутстрапа? Если только потому что ты знаешь только о бутстраповском гриде, попробуй погуглить сетку на БЭМ, может быть найдёшь что-то подходящее

Посмотри кстати на https://lostgrid.org

Готовая сетка на бэм? Ну это будут те же миксины по сути. Глобально мало что изменится от моего варианта тырить классы с бутстрапа.

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

Лостгрид прикольная тема. Мне понравилось. Нужно поизучать.

А как вы верстаете сетку и адаптив на БЭМ? Неужели каждый раз вручную?

Неужели я первый кто решил использовать готовый НЕ БЭМ css код в методологии БЭМ?

Я просто хочу понять, как лучше такой не бэм код вписать в бэм?

@extend к человечески-названным бэм блокам?

Или в html код просто вместе с бэм классами пишем не бэм?

Или еще как то?

Как тебе нравится, так и пиши.

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

Никто не запрещает использовать миксы, это нормально.

Можно написать блок сетки по БЭМ и использовать его