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;<.>

Lorsque le haut, le bas, la gauche et la droite sont identiques, cela peut même s'écrire :

remplissage : 10px ;

Pour d'autres méthodes d'abréviation, vous pouvez vous référer à quelques informations sur Internet. Bien sûr, je recommande d'utiliser le logiciel TopStyle pour apprendre à écrire du CSS, il donnera des conseils précis.

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

Par exemple : padding : 0;

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

. Par exemple :

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

Une meilleure façon de l'écrire est :

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;
}

doit être traité comme :

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

En fait, aucun saut de ligne n'est nécessaire dans le fichier CSS. Mais afin de garder le code un peu lisible, je recommande quand même d'écrire chaque élément sur une seule ligne. Il existe aujourd'hui des outils disponibles pour faire quelque chose de similaire afin que cela n'ait pas d'impact sur votre processus de développement.

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

Si possible, nous devons définir le délai d'expiration du fichier CSS et activer GZip pour la transmission des fichiers CSS. . La configuration du premier permet aux navigateurs populaires de mettre en cache vos fichiers CSS, évitant ainsi d'avoir à lire le fichier à chaque fois qu'un chargement est effectué, accélérant considérablement le processus tout en réduisant également la consommation de trafic. L'activation de GZip peut réduire vos fichiers CSS à un degré inimaginable, et la plupart des navigateurs populaires prennent aujourd'hui en charge GZip.

Ce qui précède est une introduction complète à la façon dont les novices peuvent rationaliser et optimiser le code CSS. Si vous souhaitez en savoir plus sur les

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!