Эй, парень, я изучаю методологию БЭМ, столкнулся с проблемой, чтобы понять некоторые вещи.Примером является 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>
Итак, что нам делать в этом сценарии?