CSS styles génériques VS styles spécifiques - pour l'efficacité

Question

Fondamentalement, je voudrais savoir laquelle des méthodes suivantes (donnant les mêmes résultats) est plus efficace, et même si elle serait négligeable avec la taille des exemples, je donne I aimerait assumer les techniques sur un site complet pour la réponse.

Exemple 1

//generic 
.round { border-radius:5px; -moz-border-radius:5px; } //-o-, -ms-..... 
.blue { color:blue; } 
.red { color:red; } 
//specific 
.title { width:100px; height:20px; background:black; } 
.image { width:50px; height:50px; } 

<div class="title round blue">title</div> 
<div class="image round red">image</div> 

Exemple 2

//specific 
.title { width:100px; height:20px; background:black; border-radius:5px; -moz-border-radius:5px;color:blue; } 
.image { width:50px; height:50px; border-radius:5px; -moz-border-radius:5px; color:red;} 

<div class="title">title</div> 
<div class="image">image</div> 

Toute réflexion sur ce serait génial! Cheers

Answer 1

Il n'y a pas de différence significative dans le rendu des méthodes CSS. La considération est vraiment combien de temps les fichiers CSS prennent pour télécharger. Clairement, de belles CSS bien rédigées vont télécharger plus rapidement que des CSS bavardes avec trop de déclarations. Cependant, si vous voulez avoir (en prolongeant votre exemple) de nombreux styles de titres différents, alors la méthode plus verbeuse pourrait être préférable car elle finira par être "plus resserrée" à long terme.

.title{font-size:18px;padding:20px 0;font-family:verdana} 
.blue{color:#00f} 
.red{color:#f00} 
.bgyellow{background-color:#ff0} 

<div class="title red">My Title</div> 
<div class="title blue">My Title</div> 
<div class="title bgyellow red">My Title</div> 

est préférable ...

.redtitle{font-size:18px;padding:20px 0;font-family:verdana;color:#f00} 
.bluetitle{font-size:18px;padding:20px 0;font-family:verdana;color:#00f} 
.redbgyellowtitle{font-size:18px;padding:20px 0;font-family:verdana;color:#f00;background-color:#ff0} 

<div class="redtitle">My Title</div> 
<div class="bluetitle">My Title</div> 
<div class="redbgyellowtitle">My Title</div> 

Comme vous pouvez le voir, le second exemple commencera à être embrouillé, alors que le premier sera plus concis et plus facile à lire quand les choses se corsent. Cela dit, si vos styles doivent être identiques sur tout le site (par exemple rouge, 18px verdana), vous devriez le faire avec une seule déclaration.

Ne pas me flamme si mon code ci-dessus est bogué - il est du haut de ma tête sans tester ;-)