Meilleures pratiques de classes CSS multi-classes ou groupées

Je suis nouveau sur CSS/CSS3 et j'ai lu dans de nombreux endroits différents moyens de créer des fichiers CSS. Certaines personnes balises tous dans les mêmes éléments et certaines personnes divisent les éléments et ensuite utiliser des classes différentes dans le code HTML. par exemple:Meilleures pratiques de classes CSS multi-classes ou groupées

// css 

h1 { font: normal 20px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; } 
h2 { font: normal 16px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; }

donc dans le code HTML, ils ont juste à mettre et voilà. Si vous avez besoin de changer la couleur de la bordure, vous devez changer TOUS les tags qui ont le bord inférieur.

h1 { font: normal 20px Arial; } 
h2 { font: normal 16px Arial; } 
.colorBlack { color: black; } 
.headers { margin: 1em 0; padding:0; } 
.borderBottom { border-bottom: solid 0.1em #ddd; }

et dans le code HTML que vous utilisez:

<h1 class="black headers borderBottom">h1</h1>

Très facile, mais chaque fois que vous devez mettre toutes les CSS dont vous avez besoin

est-il des meilleures pratiques sur la façon de construire CSS? Quel est le meilleur moyen de performance ou de temps de chargement?

Source

2011-10-11 Tech4Wilco

L'attribut 'class' n'est pas seulement une alternative à l'utilisation de' style'. C'est pour mettre des mots qui décrivent ce que l'élément _is_, pas de quelle manière il devrait être rendu. Cela devrait être conservé dans la feuille de style. – Eric

@ Tech4Wilco. Ce site vous sera très utile: https://developer.mozilla.org/en/CSS –

Je recommande d'utiliser:

h1, h2 { 
    color: black; 
    margin: 1em 0; 
    padding: 0; 
    border-bottom: solid 0.1em #ddd; 
} 
h1 { 
    font: normal 20px Arial; 
} 
h2 { 
    font: normal 16px Arial; 
}

La meilleure pratique: Gardez votre code lisible. La lisibilité n'est pas obtenue en séparant une définition de style dans plusieurs classes inutiles.

Habituellement, vous voulez que les étiquettes h1 et h2 aient des styles similaires. Pour cette raison, j'ai regroupé les styles. Lorsque vous voulez une autre valeur de propriété pour un certain élément, vous pouvez ajouter une autre définition CSS. Lorsque le sélecteur a une spécificité supérieure, la nouvelle déclaration remplacera la précédente.

Source

2011-10-11 21:14:39

Le second h1 ou h2 ne va pas écraser le premier? – Tech4Wilco

@ Tech4Wilco: C'est exactement le point. Cela l'annule. – Eric

Dam battu au coup de poing à nouveau! +1 – Jared

Je pense que les deux techniques sont utiles. Personnellement, je mets souvent deux classes ou plus quand je dois séparer un élément d'un autre (par exemple dernier élément de la ligne ne doit pas contenir margin-right) mon code ressemble:

HTML:

<div class="images-row"> 
    <div class="image-item">...</div> 
    <div class="image-item">...</div> 
    <div class="image-item">...</div> 
    <div class="image-item last-in-row">...</div> 
</div>

CSS:

.image-item { 
    border:1px solid red; 
    margin-right:20px; 
    width:200px; 
    height:200px; 
} 

.image-item.last-in-row { 
    margin-right:0; 
}

(bien supporté dans IE> 7 et d'autres navigateurs de qualité). Cette solution garde le code propre et me fait écrire moins (je n'ai pas besoin de réécrire tous les styles pour le dernier élément ou d'ajouter des sélecteurs séparés). La gestion des éléments jQuery est moins compliquée (j'ai besoin d'un seul sélecteur pour correspondre à tous les .image-items).

Source

2011-10-11 21:27:20 veritas

Meilleures pratiques de classes CSS multi-classes ou groupées

Répondre

Questions connexes