How to organize files in the component library?

Question

css

I use the BEM methodology, but this is a common problem.
The problem is related modifiers and blocks.
I'll explain what I mean.
We have a "Button" block, it has a "Button__icon" child element and a "Button--Icon-Left" modifier (reduces the padding on the left to make the icon look better).

If the project does not need an icon in the button, you need to remove the "Button--Icon-Left" modifier and the "Button_icon" element, as well as all the "Button_icon" modifiers, if any. Let's
complicate the example. This button has three size modifiers (sm ,m,l) Each size will have a different padding on the left with the "Button--Icon-Left" modifier.

Let's add "Button__icon" resizing for different button sizes (if it's an icon font, you can use the font-size of the entire button, but we, as modern ones, use svg icons and the size must be set manually).
It turns out such a structure.

These are what I call linked modifiers .
With this structure, we clearly see that the size modifier (S,M,L) affects the "Button--Icon-Left" modifier (Btn--Icon-left) and the "Button_icon" element ( Btn_Icon). So you can easily find the desired style and change it. Plus, if we don't need one of the button sizes, deleting one folder removes all of its associated styles. But there is also a downside, if we want to remove the "Button--Icon-Left" modifier and leave all sizes (S, M, L), then we will have to go into each size folder and remove this modifier.
Now about related blocks.
There are three blocks in the library: "Btn", "Dropdown", "Btn-group".
In "Btn-group" for "Btn" and "Dropdown" the rounding of the corners of all elements is removed,

.btn-group  > .btn, 
.btn-group > .dropdawn{
border-radius: 0;
}

.btn-group > .btn:first-child,
.btn-group > .dropdawn:first-child,{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.btn-group > .btn:last-child,
.btn-group > .dropdawn:last-child,{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

The problem is the same, if projects do not need "Dropdown", then we do not need styles for its rounding in the "Btn-group" block.
When there are few blocks, there are no particular problems, but when the library of components grows, you can forget about customization.
Ideally, you need a structure to see all the links (example above), for quick access to the desired property, but also a tool that can remove unnecessary styles by links. By removing the "Button_icon" element, modifiers "Button--Icon-Left" of different sizes should not get into the assembly.
Maybe someone met with a solution or recommendations on this issue.
Thank you for your attention.

Answer 1

We have a "Button" block, it has a "Button__icon" child element and a "Button--Icon-Left" modifier (reduces the padding on the left to make the icon look better).
This button has three size modifiers (sm,m,l). Each size will have a different padding on the left with the "Button--Icon-Left" modifier.

Easily solved through CSS Custom Properties and typographical constants
--sm, --m, --l while setting these constants, and other modifiers and elements use them in the places they need.
It is better to make a wrapper over the icon, so as not to be tied to svg or not.
If the component library is shared, the situations may be different.
This structure is more or less:

<Button>
  <Button__icon><Icon ... /></Button__icon>
  <Button__body>Текст на кнопке</Button__body>
</Button>

If there is an icon, we display `Button__icon`, if not, we do not display it. We hang styles on `Button__icon`.
For customization - leave `Button__body`, then it will come in handy in custom `Select`.

Ideally, you need a structure to see all the links (example above), for quick access to the desired property, but also a tool that can remove unnecessary styles by links. By removing the "Button_icon" element, modifiers "Button--Icon-Left" of different sizes should not get into the assembly.
Maybe someone met with a solution or recommendations on this issue.

Sounds like a dependency build from bemjson/jsx. Technically, it is even possible to get bemjson from html and initiate css/js assembly for it.
The process will look something like this:

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('.'))

Well, that's all