Можем ли мы создать различные модификаторы для элемента в БЭМ? - PullRequest
Новая
       9

Можем ли мы создать различные модификаторы для элемента в БЭМ?

0 голосов
/ 09 июня 2018

Эй, парень, я изучаю методологию БЭМ, столкнулся с проблемой, чтобы понять некоторые вещи.Примером является unordered list, который является блоком.И у этого ul есть некоторые li's и a's, которые мы называем в БЭМ как элементы. 

.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>

Все a's имеют одинаковый эффект наведения, но если я хочу изменить только эффект наведения на 2-й и 3-й a, тогда мои подходы таковы.

Первый заход на посадку

Считайте, что a's - это отдельные элементы, которые имеют разные имена классов, в соответствии с набором имен их классов hover эффект. 

.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>

Второй предполагаемый подход

Я в замешательстве, позволяет ли БЭМ создавать различные модификаторы для элемента или позволяет создавать модификаторы только для блока?Я имею в виду, что в этом подходе все a's имеют одинаковое имя класса, и в соответствии с нашими потребностями мы могли бы применить эти классы-модификаторы. 

.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>

Итак, что нам делать в этом сценарии?

1 Ответ

0 голосов
/ 09 июня 2018

Вы близки со вторым предположением!

Согласно официальным документам: https://en.bem.info/methodology/naming-convention/#naming-rules

  • Имя модификатора отделено от имени блока или элементаодиночное подчеркивание (_).
  • Значение модификатора отделяется от имени модификатора одним подчеркиванием (_).
  • Для логических модификаторов значение не включается в имя. 
<div class="menu menu_hidden"> ... </div>
<div class="menu menu_theme_islands"> ... </div>

Обратите внимание, что мы используем наведение по умолчанию для класса ссылки, нет необходимости иметь "нормальный" класс наведения.Мы переписываем, где это необходимо, специальным классом.Также я использую официальное соглашение по именованию БЭМ, вы можете использовать стиль двойного дефиса.Ваш код должен выглядеть примерно так.

.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>
...