Can I create a modifier of a modifier ?

[Memoyr]

My case is different than the existing question "Why do I need to combine block and prefixed modifier class for a modified block?"

What I'd like to know , is what to do when I have a variation to apply on a modifier. Example : Can I do.block--mod--special ? <div class=”block block--mod block--mod--special”> The explanation is that the modifier .block--mod--special can only be used along with the existing modifier .block--mod. ( This will never exist : .block--special ) I could create .block--mod-special , but it'll require to duplicate base rules of block--mod in .block--mod-special.

I'm not sure what is best.

Thanks

[garrypolley]

Having an idea of what is at play here would help my understanding.

If I read this correctly I would assume what really exists is:

.block--mod === .block__element

And the what's really needed is:

.block__element--special.

Assuming I'm reading it incorrectly it's also possible this is a special case:

.block--super-special-case

I'd need more details on the actual block/element/modifiers in question to give a better idea.

[Memoyr]

Here the existing case : .checkbox .checkbox--toogle-switch (I reuse most of .checkbox) .checkbox--toogle-switch--small (making it small for the toggle-switch and small without toggle wouldn't work.)

Here's the complete example , my struggle is naming the class you see here .toggle-btn--small or should it be .checkbox--toggle-btn--small ?

<label class="form-checkbox form-checkbox--toggle-btn  toggle-btn--small">
    <input type="checkbox" class="oc-form-checkbox__checkbox">
    <span class="form-checkbox__button">
      <svg class="icon icon-ok">
         <use  xlink:href="img/sprite.svg#icon-ok"></use>
       </svg>
    </span>
        <span class="form-checkbox__label-text">Option 2 — initial state </span>
</label>

_checkbox.scss.zip

[garrypolley]

Assuming the same markup this is what I would do, largely because I think the toggle is a sub-element of the form.

<label class="form__checkbox_toggle form__checkbox_toggle--small">
    <input type="checkbox">
    <span class="form__checkbox_button">
     <!-- I'd move this icon to a :before or :after CSS selector -->
      <svg class="icon icon-ok">
         <use  xlink:href="img/sprite.svg#icon-ok"></use>
       </svg>
    </span>
    <span class="form__checkbox_label-text">Option 2 — initial state </span>
</label>

It's not perfect. And I'd probably remove a lot of the markup here, but I don't know the UI. So the markup may be needed.

[Memoyr]

OK, i agree. The mistake is in the use of the markup and It's better having a separated object of checkbox toggle than having to add a modifier applied on a modifier. Some rule of the checkbox will be duplicated but I think is a better choice. One thing in you example I don't agree , is not having a class name on <input type="checkbox"> I thought BEM would not allow having style on tag.