Comment les novices rationalisent et optimisent le code CSS Vous le saurez après avoir lu ceci ?

Le contenu de cet article explique comment les novices peuvent rationaliser et optimiser le code CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Simplifiez vos commentaires

Dans de nombreux cas, en particulier ceux qui ont été engagés dans le développement de langages tels que C/Java. Les programmeurs peuvent aimer écrire des commentaires sur plusieurs lignes, tels que :

Bien sûr, de tels commentaires ne posent aucun problème dans les langages compilés, mais en CSS, ils augmenteront considérablement la taille du fichier CSS. Vous devriez essayer de le faire. simplifiez-le comme ceci :

Cela réduit la taille du fichier tout en conservant la lisibilité. En fait, dans une véritable version publiée du fichier CSS, vous pouvez supprimer complètement ces commentaires.

2. Simplifier les codes couleurs

En CSS, on a souvent affaire à des codes couleurs hexadécimaux. Vous avez peut-être l'habitude d'écrire la « forme standard » suivante :

color: #ffffff;
color: #ff88ff;

En fait, cette écriture peut être simplifiée en CSS, on peut écrire :

color: #fff;
color: #f8f;

3. Utilisez des attributs sur une seule ligne au lieu d'attributs sur plusieurs lignes

Dans les attributs CSS tels que margin/padding/font/border, etc., vous pouvez utiliser une seule ligne pour remplacer plusieurs paramètres de ligne. , par exemple :

padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;

On peut écrire :

padding: 10px 0 10px 0;

L'ordre est en haut, à droite, en bas, à gauche Bien sûr, pour la marge et. attributs de remplissage, lorsque les valeurs de gauche et de droite/haut et bas sont les mêmes, cela peut également être écrit plus simplement, par exemple, dans l'exemple ci-dessus, cela peut être écrit comme suit : padding: 10px 0;<. 🎜>

4. Lorsque la valeur est 0, l'unité peut être omise

5. plusieurs paramètres en même temps Un exemple des attributs d'un élément

h1 {
margin: 0;
padding: 0;
}
h2 {
margin: 0;
padding: 0;
}
h3 {
margin: 0;
padding: 0;
}

h1,h2,h3 {
margin: 0;
padding: 0;
}

6. Supprimez les espaces et les sauts de ligneC'est une opération très discrète, mais cela devrait être fait pour les CSS qui sont hors du stade de développement et appliqués sur Internet. C'est du moins ainsi que toutes les applications Google sont réalisées. Par exemple :

h1 {
margin: 0;
padding: 0;
}
blockquote {
background-color: #ffcccc;
}

h1{margin:0;padding:0;}
blockquote{background:#fcc;}

7. Définissez le délai d'expiration et utilisez GZip

tutoriels vidéo CSS, veuillez prêter attention au. Site Web chinois PHP.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!