And again about bam - in which cases is it redundant, in which not?

Question

css

Once again, I wondered when the use of bam is redundant, and when not.
For example, I'm building a website with a fairly simple "business" design. I don't use any frameworks.
I have modifiers like

spoiler

.--mark {
    color: #24408d;
}
.--mark-2 {
    color: rgb(255, 229, 0);
}

, used throughout the site to highlight text.
There are similar reusable blocks

.title {
    font-size: rem(40);
    font-weight: 400;
    text-align: center;
}

and typically BAM (sort of)

spoiler

.icon {
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
}

.icon--search {
    width: 23px;
    height: 23px;
    background-image: url("../images/icons/search.png");
}

On this, in principle, I have no questions, but if there are any considerations and comments, I am ready to listen.
And now the essence - I'm making a site on flex. Those. there are two blocks that are different in meaning and ownership, but both use the same display flex and justify-content center rules. And I'm starting to think, should these rules be put into modifiers or not? On the one hand, this looks logical, on the other hand, these blocks have been and will be exactly in the form specified by these rules, i.e. in theory, despite the same rules, they are isolated. Previously, I used modifiers like .--flex, .--justfy-center, etc., including for setting text-transform in blocks (and not parts of text), etc., now I’m thinking about the advisability of using such approach in blocks, where the use of positioning rules, etc. constantly on the entire layout.
For example, earlier

ul.menu.flex-container.flex--between.--reset
        li.menu__logo-box

.flex-container {
display: flex;
flex-flow: wrap;
}

.flex--between {
justify-content: space-between;
}

.menu {
    list-style: none;
}

.--reset {
margin: 0;
padding: 0;
}

Right now, I still use --reset to reset blocks like h1, ul, etc., but move all flex properties to the menu. Similarly, the question about lists - which is more correct, to use a separate class to reset the marking of the list, or to prescribe each list separately?
Or a similar moment

.sub-menu {
    position: absolute;
    z-index: 10;
    list-style: none;
    padding-top:  10px;
    padding-bottom: 10px;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, 0.9);
    color: rgb(255, 255, 255);
    min-width: 100%;
}

Previously, I broke down properties by type, i.e., for example, .sub-menu, .sub-menu--position, say --panel (background and text color). But, for example, this particular block is used in general, i.e. other site elements do not have similar padding, background colors, etc. It would be possible to single out a separate class for the white text color, which is used in different blocks, but they are different in style, i.e. in one block, the color can change from white to yellow, and in the other it remains. It would be nice and aesthetic to "split" the .sub-menu properties into several parts, but does it make sense?
In general, I look forward to your thoughts about all this.

Answer 1

It's Atomic CSS in a BEM wrapper!
I actually find it really useful to mix them up sometimes, but for layout on flex I just use a separate grid component and it's more than enough for now.
Yes, if you like Atomic CSS in general and are aware of its advantages and disadvantages, then the answer to your questions about "dividing" classes into pseudo-modifiers is naturally yes.