СА
Выглядит как что-то, что можно попробовать скрестить с bem-react и получить на выходе компоненты не только для React, но и Angular, и Vue, и в скором времени ещё и Svelte.
Size: a a a
СА
Р
СА
MP
k

PН
k
AV
<header class="header">Класс такой:
<h1 class="header_title font-color">Lorum</h1>
<p class="header_subtitle font-color">Lorum purum</p>
<button class="header__button button-border-color">Go!</button>
</header>
<section class="block">
<h2 class="block__title font-color">Lorum</h1>
<p class="block__subtitle font-color">Lorum purum</p>
<button class="block__button button-border-color">Click!</button>
</section>
.font-color {
color: #fff;
}
Если можно, то правильнее будет сделать отдельными блоками font-color, button-border-color или модификаторами font_color и button-border_color?PН
<header class="header">Класс такой:
<h1 class="header_title font-color">Lorum</h1>
<p class="header_subtitle font-color">Lorum purum</p>
<button class="header__button button-border-color">Go!</button>
</header>
<section class="block">
<h2 class="block__title font-color">Lorum</h1>
<p class="block__subtitle font-color">Lorum purum</p>
<button class="block__button button-border-color">Click!</button>
</section>
.font-color {
color: #fff;
}
Если можно, то правильнее будет сделать отдельными блоками font-color, button-border-color или модификаторами font_color и button-border_color?.Theme_light и .Theme_darkPН
AV
PН
.clearfix, вместо описания свойств этого класса в каждом блоке, в котором это необходимо, то блок зависит от этого внешнего класса и работать без него корректно не будет, будет разваливатьсяAV
.clearfix, вместо описания свойств этого класса в каждом блоке, в котором это необходимо, то блок зависит от этого внешнего класса и работать без него корректно не будет, будет разваливатьсяPН
AV
$main-text-color: #fffPН
.MyTheme {
--text-color-primary: #eee;
}
.MyBlock {
color: var(--text-color-primary);
}AV
.MyTheme {
--text-color-primary: #eee;
}
.MyBlock {
color: var(--text-color-primary);
}VG
nw
nw