OOCSS/ модульный CSS: Борьба со стилями ссылок, как решить?

Question

В моем CSS-файле, как часть "сброса", я стилизовал все ссылки следующим образом:

a {
  color: blue;

  &:visited {
    color: violet;
  }

  &:hover,
  &:focus,
  &:active {
    color: orange;
  }

}

Я знаю, что это довольно широкие правила, нацеленные на все ссылки на странице, но это их внешний вид по умолчанию, поэтому я думаю, что все будет в порядке, если вы сделаете это так (или даже нужно!).

Теперь моя навигация выглядит так:

<ul class="nav">
    <li><a href="#" class="nav__a">Link 1</a></li>
    <li><a href="#" class="nav__a">Link 2</a></li>
    <li><a href="#" class="nav__a">Link 2</a></li>
</ul>

С соответствующим CSS:

.nav__a {
    color:green;
}

К сожалению, только не посещенные ссылки будут отображаться зеленым, а уже посещенные - фиолетовым.
Я узнал, что добавление !important "исправит" проблему, но это не совсем чисто.

Конечно я мог сделать

.nav__a,
.nav__a:visited {
    color: green; 
}

но это кажется довольно раздутым - я должен был бы сделать это для других состояний связи.

Есть ли способ сделать это, или это не нормальное поведение - возможно, что-то не так с моим подходом к модульному CSS?

Answer 1

Замените свой код этим:

a.nav__a{
   color:green;
}

я надеюсь работать на тебя

Answer 2

Я согласен с @ambes.

установка

a.nav__a{
   color:green;
}

устанавливает все и псевдосостояния якоря в color:green;

Вы правы, чтобы не использовать! Важный. И вы также вправе размещать элементы в своих блоках (БЭМ). Сначала это может показаться странным, но это правильно. Хорошо сделано! Оставайся классным!