CSS! Do you have to repeat same properties for each link state? (link, visited, hover…etc)?

Question

Is it necessary or bad practice to repeat properties that aren't changing in each link type? Like this:

a:link {display: block; width: 50px;}
a:visited {display: block; width: 50px; color: #000;}
a:hover {display: block; width: 50px; color: #FFF}
a:active {display: block; width: 50px; color: #FFF}

Does display block need to be in each? Or is that a bad practice? Also, can you chain link states? Like this:

a:hover, a:active {display: block; width: 50px; color: #FFF}

Additionally, when you have an added id/class on the links, should they inherit the default styles first, then change for the specific id/class? Like this:

a:link {display: block; width: 50px; color: #000;}
....(etc)
a.menu:link {color: #FFF;}
....(etc)

Would the .menu link get display and width from a:link and then just change the color?

THANK YOU SO MUCH for any help clearing all this up!

Answer 1

You can chain link states.

:link and :visited are the most basic definitions for links. Statements made on them will be on every link on the page, even when a link has classes or id.

Said that, :hover and :active don't need display:block, if you declared it on :link and :visited.

Answer 2

No need to repeat the properties, not sure if it's "bad practice" per se but it's definitely something you could optimize.

You can set a { display:block; width:50px } and this will cover all states (unless one is set differently elsewhere. And yes, you should also be able to chain the states.

And you're exactly right, they'll inherit the style assigned to the element type but id/class name variables will take precedence if they are set.

Answer 3

Following Ben's answer:

a{ display:block; width: 50px }
a:hover, a:active{ color: #fff; }
a:visited{color: #000}