CSS! Devez-vous répéter les mêmes propriétés pour chaque état de lien? (lien, visité, survol, etc.)?

Question

Est-il nécessaire ou recommandé de répéter des propriétés qui ne changent pas dans chaque type de lien? Comme ceci:

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}

Le bloc d’affichage doit-il être présent dans chacun? Ou est-ce une mauvaise pratique? Aussi, pouvez-vous chaîner des états de liens? Comme ceci:

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

De plus, lorsque vous avez ajouté un identifiant / une classe sur les liens, doivent-ils hériter des styles par défaut en premier lieu, puis changer pour un identifiant / une classe spécifique? Comme ceci:

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

Le lien .menu obtiendrait-il l’affichage et la largeur d’un lien: puis changerait-il simplement la couleur?

MERCI BEAUCOUP pour toute aide apportée pour résoudre tout cela!

Answer 1

Vous pouvez chaîner les états des liens.

: lien et: visité sont les définitions les plus élémentaires pour les liens. Les déclarations qui y sont effectuées figureront sur chaque lien de la page, même lorsqu'un lien a des classes ou un identifiant.

Cela dit,: survoler et: actif n'a pas besoin d'afficher: bloquer, si vous l'avez déclaré sur: lien et: visité.

Answer 2

Inutile de répéter les propriétés sans savoir si c'est une "mauvaise pratique". en soi, mais c’est définitivement quelque chose que vous pouvez optimiser.

Vous pouvez définir un {display: block; width: 50px} et cela couvrira tous les états (sauf si l'un d'entre eux est défini différemment ailleurs. Et oui, vous devriez aussi pouvoir enchaîner les états.

Et vous avez parfaitement raison, ils hériteront du style attribué au type d'élément mais les variables id / nom de classe auront priorité si elles sont définies.

Answer 3

Après la réponse de Ben:

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