Texte original | via : 9 conseils pour des fichiers CSS plus petits et optimisés
Auteur|Auteur: Stefan Vervoort
Traduction|Trans: Luc
Étant donné que les fichiers CSS sont chargés en tête de la page Web, chaque visiteur télécharge ces fichiers. Nous optimiserons les fichiers et les images PHP, mais ignorerons souvent les fichiers CSS. Aujourd’hui, nous devrions réfléchir à ce problème et faire quelque chose.
Il est possible d'optimiser CSS à l'aide d'optimiseurs CSS, mais je pense que l'efficacité et la puissance seront améliorées si vous écrivez votre code en utilisant les techniques mentionnées ci-dessous.
L'optimisation des fichiers CSS peut également économiser du trafic et augmenter la vitesse de chargement des pages.
1. Commentaires Les commentaires sont particulièrement utiles lors de l'écriture de CSS afin que les collègues travaillant ensemble comprennent la signification du code. Il existe de nombreuses façons d’annoter, vous pouvez utiliser les méthodes suivantes :
/*-------------------*/
/*-----Commentaire-------*/
/*-------------------*/
Vous pouvez également utiliser la méthode suivante :
/*Commentaire*/
Cela enregistre 20 caractères, et en supposant qu'il y ait 15 commentaires, cela enregistre 300 caractères.
2. Codes couleur abrégés Les codes couleur sont définis avec des codes HEX, qui contiennent 6 caractères, mais dans certains cas, 3 caractères peuvent être utilisés à la place. Regardez l'exemple suivant :
div{ couleur : #ffffff; } /* Code court : couleur :#fff;
div{ couleur : #ff88ff; } /* Code court : couleur :#f8f ;
div{ couleur : #f8f7f2; } /* Aucun shortcode possible */
3. Fusionner des éléments. Par exemple, s'il y a un tas d'éléments tels que h2, h3 et h4, et qu'ils ont tous les mêmes attributs et que seuls certains attributs sont différents, alors vous pouvez l'écrire comme suit :
h2, h3, h4. {
remplissage : 0 ;
marge : 0 ;
couleur : #333 ;
espacement des lettres : 0,05 em ;
espacement des mots : 0,1 em ;
}
h2{ taille de police : 1.2em ;
h3{ taille de police : 1.1em ;
h4{ taille de police : 1em ;
Cela fusionne les éléments avec les mêmes attributs tout en déclarant des attributs de taille de police différents. Peut économiser beaucoup d'espace.
4. Lorsque la valeur est 0, Out Px/Em/% est omis.
0 ne nécessite pas de signe Px, Em et pourcentage. Lorsque votre valeur est 0 (que vous utiliserez, je suppose), l'omission de l'unité enregistre deux fois plus de caractères.
div{rembourrage : 0px 5px 5px 10px };
/* Abréviation : remplissage : 0 5px 5px 10px */
5. Fusionner les attributs Certains attributs tels que le remplissage, la marge et la bordure peuvent être écrits séparément. Par exemple : padding-top, padding-right, padding-bottom et padding-left.
Si possible, combinez-les pour faciliter leur écriture et gagner de la place.
div{
remplissage-gauche:0 ;
rembourrage supérieur : 50 px ;
rembourrage inférieur : 23 px ;
remplissage-droite : 4px ;
/* Abréviation : remplissage :50px 4px 23px 0;
Si les valeurs supérieure et inférieure sont les mêmes et que les valeurs gauche et droite sont les mêmes, vous pouvez écrire :
div{
rembourrage supérieur : 5 px ;
rembourrage inférieur : 5 px ;
remplissage-gauche:0 ;
padding-right:0px;
/* Abréviation : remplissage:5px 0;
6. Choisissez judicieusement les classes/ID
Les classes et les noms d'ID sélectionnés doivent être aussi courts, faciles à comprendre et significatifs que possible.
Évitez de choisir des noms comme « HeaderMiddleLeftCategories », utilisez plutôt « h-cats ». Cela permet d'économiser beaucoup de personnages.
7. Nettoyez les fichiers CSS pour économiser de l'espace. Lors de la création d'un site Web avec CSS, le code écrit peut fonctionner ou non et prend beaucoup de place. Les fichiers CSS doivent être vérifiés partout pour détecter les erreurs et le code invalide afin d'économiser de l'espace.
8. Supprimez le point-virgule du dernier attribut du sélecteur. C'est une astuce que j'ai découverte en utilisant le compresseur CSS.
corps{
arrière-plan :#ccc ;
couleur : #333 ;
/* Shortcode : color:#333 */Voir, j'ai supprimé le dernier point-virgule. L'effet n'est peut-être pas évident, mais un peu s'additionne. 50 sélecteurs correspondent à 50 caractères.
9. Supprimer les espaces et retours chariot inutiles Vous souhaiterez peut-être supprimer tous les espaces et retours chariot car ils occupent un caractère. Mais le problème est que cela détruit la structure du CSS et réduit la lisibilité.
Je ne fais généralement pas cela lors de l'optimisation de fichiers CSS, car la structure est plus importante pour moi. Voici un compromis, utilisez des fichiers du site qui ne contiennent pas de retour chariot ni d'espaces. L'enregistrement local de fichiers contenant des retours chariot et des espaces rend l'édition très pratique.
Conclusion Si vous souhaitez optimiser pleinement les fichiers CSS, je vous recommande d'utiliser un compresseur CSS, afin que vous puissiez acquérir vous-même les compétences ci-dessus et améliorer la vitesse d'écriture et la qualité du code CSS.
Si vous avez d'autres conseils, veuillez laisser un message.