Can we create different modifiers for an element in BEM

Question

Hey Guy's I'm learning about BEM methodology, facing a problem to understand some things. Example there is a unordered list which is a block. And this ul has some li's and a's which we call in BEM as an elements.

.c-list__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-list__link {
  text-decoration: none;
  font-size: 14px;
  color: green;
  transition: all 0.3s;
}

.c-list__link:hover {
  color: red;
}

<ul class="c-list">
  <li class="c-list__item">
    <a href="#" class="c-list__link">1</a>
  </li>
   <li class="c-list__item">
    <a href="#" class="c-list__link">2</a>
  </li>
   <li class="c-list__item">
    <a href="#" class="c-list__link">3</a>
  </li>
    <li class="c-list__item">
    <a href="#" class="c-list__link">4</a>
  </li>
</ul>

All a's have same hover effect, But if I want to change only hover effect of 2nd and 3rd a then my approaches are.

First assume approach

Consider those a's are separate elements which have different class name, according to their class name set hover effect.

.c-list__item {
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-list__link, .c-list__special-link {
  text-decoration: none;
  font-size: 14px;
  color: green;
  transition: all 0.3s;
}
.c-list__link:hover {
  color: red;
}
.c-list__special-link:hover {
  color: orange;
}

<ul class="c-list">
  <li class="c-list__item">
    <a href="#" class="c-list__link">1</a>
  </li>
   <li class="c-list__item">
    <a href="#" class="c-list__special-link">2</a>
  </li>
   <li class="c-list__item">
    <a href="#" class="c-list__special-link">3</a>
  </li>
    <li class="c-list__item">
    <a href="#" class="c-list__link">4</a>
  </li>
</ul>

Second assume approach

I'm here confuse, Does BEM allows us to create different modifiers for an element or Does it allows us to only create modifiers for block? I mean in this approach all a's have same class name and according to our need we could apply those modifier classes.

.c-list__item {
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-list__link {
  text-decoration: none;
  font-size: 14px;
  color: green;
  transition: all 0.3s;
}
.c-list__link_hover-normal:hover {
  color: red;
}
.c-list__link_hover-special:hover {
  color: orange;
}

<ul class="c-list">
  <li class="c-list__item">
    <a href="#" class="c-list__link c-list__link_hover-normal">1</a>
  </li>
   <li class="c-list__item">
    <a href="#" class="c-list__link c-list__link_hover-special">2</a>
  </li>
   <li class="c-list__item">
    <a href="#" class="c-list__link c-list__link_hover-special">3</a>
  </li>
    <li class="c-list__item">
    <a href="#" class="c-list__link c-list__link_hover-normal">4</a>
  </li>
</ul>

So What should we do in this scenario?

Answer 1

You are close with the second assumption!

According to the official docs: https://en.bem.info/methodology/naming-convention/#naming-rules

• The modifier name is separated from the block or element name by a single underscore (_).
• The modifier value is separated from the modifier name by a single underscore (_).
• For boolean modifiers, the value is not included in the name.

<div class="menu menu_hidden"> ... </div>
<div class="menu menu_theme_islands"> ... </div>

Note that we use default hover on the link class, no need to have "normal" hover class. We overwrite where needed with the special class. Also I'm using the official BEM naming convention, you are free to use the double hyphen style. Your code should look something like this.

.c-list__item {
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-list__link {
  text-decoration: none;
  font-size: 14px;
  color: green;
  transition: all 0.3s;
}
.c-list__link:hover {
  color: red;
  outline: 1px solid red;
}
.c-list__link_hover_special:hover {
  color: blue;
  outline: 1px solid blue;
}

    <ul class="c-list">
      <li class="c-list__item">
        <a href="#" class="c-list__link">1</a>
      </li>
       <li class="c-list__item">
        <a href="#" class="c-list__link c-list__link_hover_special">2</a>
      </li>
       <li class="c-list__item">
        <a href="#" class="c-list__link c-list__link_hover_special">3</a>
      </li>
        <li class="c-list__item">
        <a href="#" class="c-list__link">4</a>
      </li>
    </ul>