Should module children be inserted into module modifiers?

Question

When writing css using BEM, if you need to make changes to a module element when it is in a submodule, do you insert the module element into the submodule or create a new class name for the element module?

Create a new class

Creating a new class name (i.e. module--modifier__element) seems to be more in line with the spirit of BEM. This prevents unnecessary specificity. But it also adds a lot of extra work by adding an extra class to each element in the module.

The attachment

Embedding an existing element class in a module modifier (that is, it module--modifier module__element {}will add some additional specificity, but it will save you a lot of work (at least for large modules) and simplify the work on markup. For example, if you need to change the module modifier, you only need to change it to one place in the markup, and not change it on every child element.

In addition to this, if not all children are changed, you will need to consult css to find out which children need the class added to them.

CODE EXAMPLE

.module {
  display: block;
  width: 90%;
  height: 2rem;
  margin: 2rem auto;
  padding: 0.5em;
  background: #fff;
  border: 2px solid #333;
}

.module--modified1 {
  background: #333;
  border: none;
}

.module--modified2 {
  background: #baa;
  border: 3px solid #8f8;
}

  .module__element {
    color: #333;
    text-align: center;
  }

  /* Option 1 */
  /* In sass this would actually be nested within the module_modified1 block */
  .module--modified1 .module__element {
    color: #fff;
  }

  /* Option 2 */
  .module--modified2__element {
    color: #fff;
    font-size: 1.3em;
  }

<div class="module">
  <div class="module__element">Module</div>
</div>

<div class="module module--modified1">
  <div class="module__element">Module Modifier 1</div>
</div>

<div class="module module--modified2">
  <div class="module__element module--modified2__element">Modulue Modifier 2</div>
</div>

Run codeHide result

Answer 1

Both options are valid. Specificity reduction is good practice, but making code simple is also good practice.

BEM . , . , fun-rounded-block :

<div class="fun-rounded-block fun-rounded-block--blue-version">
    <div class="fun-rounded-block__content">
        <div class="some-block-here">
            <div class="fun-rounded-block">
                <p class="fun-rounded-block__content">element in the sub-block here</p>
            </div>
        </div>
    </div>
</div>

, .fun-rounded-block--blue-version .fun-rounded-block__content .