CSS! Do you need to repeat the same properties for every link state? (link, visit, hang ... etc)?

Is it necessary or bad practice to repeat properties that don't change in every 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}

      

Should a block be displayed in each? Or is it bad practice? Also, can you link the link states? Like this:

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

      

Also, if you have an added id / class in your links, should they inherit the default styles first and then change for the specific id / class? Like this:

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

      

Will the .menu link display and width from the link: and then just change the color?

THANK YOU SO MORE for any help cleansing it all!

+2


source to share


3 answers


You can link channel states.

: link and: visited are the most basic link definitions. The statements made on them will appear on every link on the page, even if the link has classes or an ID.



They say that: hover and: active don't need to display: block if you declared it: link and: visited.

+1


source


No need to repeat properties, not sure if this is "bad practice" per se, but it is definitely something you could optimize for.

You can set {display: block; width: 50px} and this will cover all states (unless they are set differently elsewhere). And yes, you should be able to bind states as well.



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

+2


source


Following Ben's answer:

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

      

+1


source







All Articles