OOCSS/modular CSS: Fighting link styles, how to resolve?

Question

In my CSS file, as part of a "reset", I styled all links like this:

a {
  color: blue;

  &:visited {
    color: violet;
  }

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

}

I am aware that these are pretty broad rules targeting all links on a page, but that's their default look, so I guess it should be okay to do it like this (or even needed!).

Now, my navigation looks like this:

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

With the corresponding CSS:

.nav__a {
    color:green;
}

Unfortunately, only the unvisited links will be displayed green, the already visited ones are still violet.
I found out that adding !important would "fix" the problem, but thats not really clean.

Of course I could do

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

but that seems rather bloated – I would need to do that for the other link states too.

Is there any way around doing this, or is it ne normal behavior – maybe there is something wrong with my approach regarding modular CSS?

Answer 1

replace your code with this:

a.nav__a{
   color:green;
}

i hope to work for you

Answer 2

I agree with @ambes.

setting

a.nav__a{
   color:green;
}

sets all and the anchor's pseudo states to color:green;

You are right to avoid using !important. And you are also right to scope elements to their blocks (BEM). It might feel weird at first, but it's the right thing to do. Nice work! Stay awesome!