Quelle est la meilleure façon de définir les styles CSS?

Question

Par exemple, vous devez faire flotter un groupe d'éléments.

Option 1 - éléments de la chaîne

#elm1, #elm2, #elm3, #elm4 {float:left} 

Option 2 - Ajouter une classe similaire aux éléments

.float {float:left} 

Option 3 - Ajouter le style à la classe individuelle

#elm1{float:left} 
#elm2{float:left} 
#elm3{float:left} 
#elm4{float:left} 

Je préfère 1 mais je ne sais pas quel impact cela a sur la vitesse, y a-t-il d'autres options? Quelle est la convention pour cela?

Answer 1

La plupart des minimiseurs CSS et des «nettoyeurs» feront votre première option. À mon avis, c'est beaucoup mieux que de créer une nouvelle classe à ajouter à un tas d'éléments juste pour le style et c'est un million de fois mieux que votre dernière option.

En CSS, s'il possède déjà un ID ou une classe, vous pouvez lui appliquer un style. Donc, en comparant l'option 1 à l'option 2, l'option 1 devrait être votre meilleur choix. Vous n'avez pas besoin de revenir en arrière dans votre code et d'ajouter des classes aux éléments qui ont déjà des ID et vous n'avez pas à jongler entre l'ID et la classe pour le même élément dans votre feuille de style.

Answer 2

En ce qui concerne la vitesse, je ne pense pas qu'il y ait beaucoup de différence entre les 3 options. Je pense que c'est plus une question de maintenabilité. Il semble que l'option 1 sera la plus facile à maintenir des options, donc c'est probablement ce que je ferais avec.

Answer 3

http://css-tricks.com/efficiently-rendering-css/ Semble dire que les identifiants sont les plus efficaces, bien qu'à mon humble avis, je pense que la classe est plus propre et représente plus précisément ce que vous essayez d'exprimer.

de l'article de Google @http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

« Evitez un sélecteur à clé universelle. Laisser éléments d'hériter d'ancêtres, ou utiliser une classe pour appliquer un style à plusieurs éléments. » Donc, je pense que les meilleures pratiques disent utiliser une classe. Son IMHO propre et lisible.

Answer 4

Certains compromis sont nécessaires. Généralement, tout ce qui est basé sur un identifiant est considéré comme plus rapide, d'autant plus que les pages deviennent plus lourdes. D'autre part, http://net.tutsplus.com/tutorials/html-css-techniques/object-oriented-css-what-how-and-why/ et les auteurs d'articles similaires croient que l'utilisation de classes pour les règles communes a du sens et devrait être utilisé. La différence de vitesse est souvent négligeable et les classes soigneusement utilisées rendent le maintien et la mise à jour de la conception beaucoup plus simples.

Answer 5

Utilisez l'option deux (classes) pour les observations globales. C'est ce que les sélecteurs de classe sont censés faire.

Utilisez l'ID pour styliser des différences spécifiques. C'est ce que les sélecteurs d'ID sont censés faire.

.myclass { 
     float:left; 
     height:10px; 
    } 

    #elem2 { 
    height:69px; 
    color:#ABCDEF; 
    } 

Answer 6

L'objectif global de css est de libérer le html de la présentation. L'approche sémantique est donc toujours la bonne.

Si vous utilisez .float { float:left } vous pouvez aussi bien utiliser style="float:left" ...(D'accord, c'est une exagération, mais le point est que les classes de style moins vous utilisez le mieux la séparation entre la présentation et l'information)

Comme mentionné précédemment, la meilleure approche est d'identifier sémantiquement et de classer votre code html et ensuite utiliser Relations DOM

#elements { 
    float:left; 
} 
    #elements li { 
     color:#ABCDEF 
    } 
    #elements li.odd { 
     color:#123456 
    }