У нас есть блок "Кнопка", у нее есть дочерний элемент "Кнопка__иконка" и модификатор "Кнопка--Иконка-Слева"(уменьшает отступ слева, чтоб иконка смотрелась лучше).
У этой кнопки есть три модификатора размера (sm,m,l). У каждого размера будет разный отступ слева при модификаторе "Кнопка--Иконка-Слева".
Легко решается через CSS Custom Properties и типографские константы
--sm, --m, --l при этом выставляют эти константы, а другие модификаторы и элементы их используют в нужных им местах.
Добавим изменение размера "Кнопка__иконка" для разных размеров кнопки (если это иконочный шрифт можно использовать font-size всей кнопки, но мы как современные используем svg иконки и размер нужно задавать вручную).
Лучше делать враппер над иконкой, чтобы не завязываться на svg или нет.
Если библиотека компонент общая — ситуации могут быть разные.
Такая структура более менее:
<Button>
<Button__icon><Icon ... /></Button__icon>
<Button__body>Текст на кнопке</Button__body>
</Button>
Если иконка есть — выводим `Button__icon`, если нет — не выводим. Стили вешаем на `Button__icon`.
Для кастомизации — оставляем `Button__body`, потом пригодится в кастомных `Select`.
В идеале нужна структура, чтоб видеть все связи (пример выше), для быстрого доступа к нужному свойству, но также инструмент, который умеет удалять не нужные стили по связям. Удалив элемент "Кнопка__иконка" в сборку не должны попасть модификаторы "Кнопка--Иконка-Слева" разных размеров.
Может кто то встречался с решением или рекомендациями по данному вопросу.
Звучит как сборка стилей по зависимостям из bemjson/jsx. Технически, есть возможность даже из html получить bemjson и инициировать для него сборку css/js.
Процесс будет выглядеть примерно так:
const fs = require('fs');
const miss = require('mississippi');
const html2bemjson = require('html2bemjson');
const bemjsonToDecl = require('bemjson-to-decl');
const src = require('gulp-bem-src');
const gconcat = require('gulp-concat');
const vfs = require('vinyl-fs');
src(
['path/to/blocks'],
bemjsonToDecl.convert(
html2bemjson(
String(fs.readFileSync('path/to/your.html')))),
'css',
{ // дополнительные настройки
skipResolvingDependencies: false, // отключаем зависимости
{
'path/to/blocks': { scheme: 'nested' } // у 'path/to/blocks' схема nested
}
}
).pipe(gconcat('path/to/your.css')).pipe(vfs.dest('.'))
Ну и всё
