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?

Don’t do the reset in the first place. (And, of course, you can also not use the whole “OOCSS” `.nav__a` thing, which kind of defeats the point of CSS – `.nav a` would have worked fine, since it’s as specific as `a:visited`.) — Ry-, Jan 04 '15 at 20:31
@U2744SNOWFLAKE Okay, but when I don't do the reset all my links will have the UA default colors, which might not be intended, so I kind of have to do it? — Sven, Jan 04 '15 at 20:34
@U2744SNOWFLAKE Yes, these simple colors are just for the example. — Sven, Jan 04 '15 at 20:45
You can use `a.nav__a` if you like, then. `.nav a` is still better, though. — Ry-, Jan 04 '15 at 20:47
@U2744SNOWFLAKE Okay, thank you, I see. Could you please elaborate why a bit more? I always though one goal of OOCSS is it to avoid descendant selectors where possible & to limit the depth of applicability as much as possible? — Sven, Jan 04 '15 at 20:53
I can’t really help you with why OOCSS has that as a goal. It makes no sense to me. Sorry. — Ry-, Jan 04 '15 at 20:55

ambes · Answer 1 · 2015-01-04T21:00:44.807

1

replace your code with this:

a.nav__a{
   color:green;
}

i hope to work for you

edited Jan 04 '15 at 21:00

answered Jan 04 '15 at 20:50

ambes

5,272
4
26
36

score 0 · Answer 2 · answered Sep 19 '15 at 14:39

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!

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

2 Answers2