CSS! ¿Tiene que repetir las mismas propiedades para cada estado de enlace? (enlace, visitado, flotar & # 8230; etc.)?

Question

¿Es necesario o una mala práctica repetir las propiedades que no cambian en cada tipo de enlace? Así:

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}

¿El bloque de visualización debe estar en cada uno? ¿O es una mala práctica? Además, ¿puedes encadenar estados de enlace? Así:

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

Además, cuando tiene una identificación / clase agregada en los enlaces, ¿deberían heredar primero los estilos predeterminados y luego cambiar por la identificación / clase específica? Así:

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

¿El enlace .menu obtendría visualización y ancho de un enlace: y luego simplemente cambiaría el color?

¡MUCHAS GRACIAS por cualquier ayuda para aclarar todo esto!

Answer 1

Puede encadenar estados de enlace.

: enlace y: visitado son las definiciones más básicas para enlaces. Las declaraciones hechas en ellos estarán en cada enlace de la página, incluso cuando un enlace tenga clases o id.

Dijo que:: hover y: active no necesitan display: block, si lo declaró en: link y: visitó.

Answer 2

No es necesario repetir las propiedades, no estoy seguro si es una "mala práctica" per se pero definitivamente es algo que podrías optimizar.

Puede configurar un {display: block; ancho: 50px} y esto cubrirá todos los estados (a menos que uno esté configurado de manera diferente en otro lugar. Y sí, también debería poder encadenar los estados.

Y tiene toda la razón, heredarán el estilo asignado al tipo de elemento, pero las variables de nombre de id / clase tendrán prioridad si se establecen.

Answer 3

Siguiendo la respuesta de Ben:

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