12 conseils pour l'optimisation du code CSS_Experience Exchange

1.Règles d'ID
2.Règles de classe
3. Règles de balise
4 Règles générales
La compréhension générale de l'efficacité vient de "High-Performance Website Construction" publiée par Steve Souders dans. 2009 À partir du « Guide avancé », bien que le livre le répertorie plus en détail, vous pouvez également consulter la liste de référence complète ici, ou vous pouvez consulter plus de détails dans les « Meilleures pratiques pour des sélecteurs CSS efficaces » de Google.
Dans cet article, je souhaite partager quelques exemples simples et directives que j'utilise pour écrire du CSS haute performance. Ceux-ci s’inspirent du guide pour un CSS efficace écrit par MDN et suivent un format similaire.

1. Évitez les contentions excessives

Une règle générale, n’ajoutez pas de contraintes inutiles.

Copier le code Le code est le suivant :

// Oups
ul#someid {.. }
.menu#otherid{..}

// D'accord
#someid {..}
#otherid {..}

2. Le sélecteur descendant est le pire

Non seulement les performances sont faibles, mais le code est également fragile. Le code html et le code css sont sévèrement couplés. La structure du code HTML change, le CSS doit également être modifié. C'est grave, surtout dans les grandes entreprises, les personnes qui écrivent du HTML et du CSS ne sont souvent pas les mêmes.

Copier le code Le code est le suivant :

// C'est nul
html div tr td {..}

3. Évitez les sélecteurs de chaîne (intersection)

Ceci est similaire à la situation de surcontrainte. Une approche plus judicieuse consiste simplement à créer un nouveau sélecteur de classe CSS.

Copier le code Le code est le suivant :

// Oups
.menu. left.icon {..}

// Ok
.menu-left-icon {..}

4. Adhérez au principe KISS

Imaginez que nous ayons le DOM suivant :

Copier le code Le code est le suivant :

 
• Twitter

 
• Facebook

  Dribbble

Voici les règles correspondantes...

Copiez le code Le code est le suivant :

// Oups
#navigator li a {..}

// D'accord
#navigator {..}

5. Utilisez la syntaxe composée (compacte)

Utilisez la syntaxe composée autant que possible.

Copier le code Le code est le suivant :

// Oups
.someclass {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
background: #000;
background-image : url( ../imgs/carrot.png);
background-position: bottom;
background-repeat: répétition-x;
}

// D'accord
. someclass {
remplissage : 20px 10px 20px 10px;
arrière-plan : #000 url(../imgs/carrot.png) répéter-x bottom;
}

6. Évitez les espaces de noms inutiles

Copiez le code Le code est le suivant :

// Oups
.someclass table tr.otherclass td.somerule {..}

//Okay
.someclass .otherclass td.somerule {.. >

7. Évitez les répétitions inutiles

Combinez autant que possible les règles répétées.

Copier le code Le code est le suivant :

// Oups

.someclass {
couleur : rouge;
fond : bleu;
taille de police : 15px;
}

.otherclass {
couleur : rouge;
fond : bleu;
taille de police : 15px;
}

// D'accord

.someclass, . otherclass {
couleur : rouge;
fond : bleu;
taille de police : 15px;
}

8. Rationalisez les règles autant que possible.
Sur la base des règles ci-dessus, vous pouvez fusionner davantage les règles répétées dans différentes catégories.

Copier le code Le code est le suivant :

// Oups
.someclass {
couleur : rouge;
fond : bleu;
hauteur : 150px;
largeur : 150px;
taille de police : 16px;
}

.otherclass {
couleur : rouge;
fond : bleu;
hauteur : 150px;
largeur : 150px;
taille de la police : 8px;
}

// Okay
.someclass, .otherclass {
couleur : rouge;
fond : bleu;
hauteur : 150px;
largeur : 150px;
}

.someclass {
taille de police : 16px;
}

.otherclass {
taille de police : 8px;
}

9. ambiguïté La convention de dénomination de
est préférable d'utiliser des noms sémantiques. Un bon nom de classe CSS doit décrire ce qu'elle est plutôt que ce à quoi elle ressemble.
10. Évitez !importants
En fait, vous devriez également pouvoir utiliser d'autres sélecteurs de haute qualité.

11. Suivre un ordre de déclaration standard

Bien qu'il existe des méthodes courantes pour organiser l'ordre des propriétés CSS, vous trouverez ci-dessous une méthode populaire que je suis.

Copier le code Le code est le suivant :

.someclass {
/* Positionnement */
/* Modèle d'affichage et de boîte */
/* Styles de fond et de typographie */
/* Transitions */
/* Autre */
}

12. Format de code bien organisé
La lisibilité du code est directement proportionnelle à la facilité de maintenabilité. Vous trouverez ci-dessous la méthode de formatage que je suis.

Copier le code Le code est le suivant :

// Oups
.someclass- a, .someclass-b, .someclass-c, .someclass-d {
...
}

// D'accord
.someclass-a,
.someclass- b,
.someclass-c,
.someclass-d {
...
}

// Bonne pratique
.someclass {
background-image :
Dégradé linéaire ( #000, #ccc),
Dégradé linéaire (#CCC, #DDD) ;
Ombre de boîte :
2px 2px 2px #000,
1px 4px ; 1px 1px 1px #ddd encart ;
}

Évidemment, ce ne sont là que quelques règles que j'essaie de suivre dans mon propre CSS afin d'être plus efficace et maintenable. Si vous souhaitez en savoir plus, je vous recommande de lire le Guide de MDN pour écrire du CSS efficace et le Guide de Google pour optimiser le rendu du navigateur.