What is the correct way to write the bem modifier?

Question

Sass

There is usually a block with elements and modifiers, I describe it in this order: https://nicothin.pro/idiomatic-pre-CSS/

Screenshot with rules:

And the question arose of how best to write modifiers with values?

Here is an example of a block with elements:

.header {
  /* ... */

  &__left {/* ... */}

  &__right {/* ... */}
}

And two recording options.

Option 1:

.header {
  /* ... */

  &__left {/* ... */}

  &__right {/* ... */}

  &--theme--blue {
    /* ... */
  }

  &--theme--white {
    /* ... */
  }

  &--size--big {
    /* ... */
  }

  &--size--small {
    /* ... */
  }
}

Option 2:

.header {
  /* ... */

  &__left {/* ... */}

  &__right {/* ... */}

  &--theme {
    &--blue {
      /* ... */
    }

    &--white {
      /* ... */
    }
  }

  &--size {
    &--big {
      /* ... */
    }

    &--small {
      /* ... */
    }
  }
}

What is the best way to write --mod-name--mod-value in scss?

Answer 1

Exclusively the first option.
I understand where the legs grow from the second - and it really may seem like a good idea at the development stage , DRY and conquer, all things, but at the stage of further support it is much more important to be able to find two (maximum three, but this is rare) styles in the project, and this can only be achieved by keeping the structure as flat as possible, without unnecessary nesting.
We see the class some-block__el--theme-dark, we need to find the styles:

1. Isolate the name of the block - go to the file containing the block styles (`some-block.scss`)
   
2. Then either `Ctrl+F` with the `--theme-dark` modifier (most often)
   
3. Or first to `Ctrl+F` element `__el` and inside we find the modifier
   

I don’t know which algorithm for choosing between 2 and 3, it’s somewhere at the level of professional intuition, with time a feeling comes .
In the case of the second option, you will have to search in pieces, and at the same time there is no guarantee that the values ​​do not intersect within the framework of different modifier names.
Therefore, the structure is as flat as possible, just in order to immediately find what you need when searching inside the file.
Exactly for the same reason, by the way, media queries are written inside the elements, and not as a separate block.
PS From this we can conclude that "let's give up nesting altogether and search in one go for the whole class at once."
There are those who share this opinion. I categorically disagree, but this is a topic for a separate discussion. :)
I advise you to dwell on the fact that nesting individual BEM entities (elements and modifiers) is a good idea, but nesting for composition of BEM entities is not a very good idea :)
PPS And it's better to use something different from prefix of the modifier itself - there will be less rippling in the eyes when there are 3-4 modifiers on one element ^^

Answer 2

Good afternoon.
I prefer not to deviate from the "classic" syntax. b__e_m, this allows you to highlight the copied class name with a double click.
Working in pug, a large number of "cons" will ripple, I'm not sure that a short record will work normally, although it may be in the settings. But it's a matter of habit.

spoiler

Well, if class names are used as variables somewhere in Fenom, then it is clear that there can be no talk of any "minuses".