Meilleures pratiques pour HTML/CSS

Question

Je suis en train de coder une image .psd à html. Mais je suis confus avec la meilleure pratique pour le faire. i.e.
pour le style d'un achor comme un bouton i utiliser des attributs de style suivant

.button { 
padding: 10px; 
display: inline-block; 
text-decoration: none;   
    background-color: #3f4551; 
color: white; 
    background-image: url("../images/icons/icon_left.png") no-repeat 10px center; 
} 

maintenant je peux utiliser le <a href="#" class="button"></a> pour obtenir le résultat souhaité.
Cependant j'ai beaucoup d'ancrage qui ont le même style comme avant que des modifications mineures comme icône sur le côté droit au lieu de gauche et couleur différente, gradient etc.. alors j'ai décidé de le casser en plusieurs class-à-dire

.button{ 
    padding: 10px; 

display: inline-block; 
text-decoration: none; 
background-repeat: no-repeat; 
} 
.icon_left{ 
    background-position: 10px center; 
} 
.color_blue{ 
     color:blue; 
    } 

maintenant je peux utiliser ces classes pour le style <a href="#" class="button icon_left color_blue></a>"-à-dire Mais de cette façon le balisage devient de plus en plus maladroit et weird.So j'ai décidé de demander qui est la meilleure pratique ??? MERCI à l'avance :)

Answer 1

C'est un bon début et vous allez dans la bonne direction.

Quelques conseils plus cependant, compte tenu des meilleures pratiques:

1. Utilisez des noms descriptifs qui ne sont pas explicitement leur valeur racontaient. Par exemple, n'utilisez pas color_blue comme nom de classe car la couleur peut changer si vous modifiez votre application. Mieux sont les noms qui reflètent le but de cet élément, comme default-action, disabled ou emphasized. De la même manière, with-icon serait un meilleur nom de classe que icon_left. Les noms sont sur la sémantique, et non la représentation visuelle.

2. Utilisez des sélecteurs spécifiques le cas échéant. Par exemple, si les classes de boutons sont utilisées par les éléments button, utilisez des sélecteurs tels que button.emphasized. Cela vous permet de réutiliser ce nom de classe pour d'autres types d'éléments (c'est-à-dire div.emphasized), de sorte que vous ne deviez pas les renommer en .button-emphasized et .block-emphasized.

   Si vous en savez plus sur la structure de votre document, vous pouvez même faire la distinction entre #content > button.emphasized et #sidebar > button.emphasized et utiliser différentes classes de boutons en fonction de la hiérarchie des éléments.

3. Utilisez l'héritage de sélecteur le cas échéant. Si une classe partage les mêmes paires propriété-valeur parmi d'autres qui diffèrent, vous devez utiliser l'héritage. Par exemple .emphasized pour les règles qui s'appliquent à tous les éléments utilisant cette classe, et button.emphasized & div.emphasized pour les règles spécifiques, qui peuvent écraser le sélecteur plus général ("parent").

4. Appliquez les conventions de dénomination. Habituellement, les noms sont en minuscules et le signe moins est préféré au lieu d'utiliser le trait de soulignement. Par conséquent, with-icon est meilleur que with_icon. Vous pouvez également utiliser des majuscules comme suit: withIcon. Personnellement je préfère la première version.

Answer 2

Si je comprends bien ..Votre bon chemin! Je sais que votre code source semble trop bourré mais c'est comme ça que ça fonctionne. Rappelez-vous que les classes sont utilisées pour styliser plus d'un élément, et que Id (si utilisé correctement) est utilisé pour styler une seule entité/élément