1. Utilisez la réinitialisation globale
Différents éléments du navigateur ont des attributs par défaut différents. Utilisez Réinitialiser pour réinitialiser certains attributs par défaut des éléments du navigateur afin d'assurer la compatibilité du navigateur. Mais il convient de noter que veuillez ne pas utiliser global Reset:
*{ margin:0; padding:0; }
Ce n'est pas seulement parce que c'est une méthode lente et inefficace, mais cela conduit également à des erreurs inutiles. L'élément a également ses marges et son remplissage réinitialisés. Il est recommandé de se référer aux pratiques de YUI Reset et d'Eric Meyer. La réinitialisation n'est pas statique. Elle doit être modifiée de manière appropriée en fonction des différents besoins du projet pour assurer la compatibilité du navigateur et la commodité opérationnelle. La réinitialisation que j'utilise est la suivante :
/**Marges intérieures et extérieures claires **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote,
dl, dt, dd, ul, ol, li,
pre,
form, fieldset, légende, bouton, input, textarea,
th, td,
img{
border:medium none;
margin : 0;
padding : 0;
}
/**Définir la police par défaut **/
body,button, input, select, textarea {
police : 12px/1.5 ,tahoma , Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { taille de police : 100 % ; em{font-style:normal;}
/**Réinitialiser les éléments de la liste **/
ul, ol { list-style : aucun }
/**Réinitialiser l'élément de lien hypertexte **/
a { text-decoration : aucun ; couleur ; 333; }
a:hover { text-decoration: underline; color:#F40; }
/**Réinitialiser les éléments de l'image **/
img{ border:0px;}
/**Réinitialiser les éléments du tableau * */
table { border-collapse: cliff; border-spacing: 0; }
2 Bonnes habitudes de dénomination
Il ne fait aucun doute qu'un code désordonné ou non sémantique rendra fou. Comme ce code :
.aaabb{margin:2px;color:red;}
Je pense que même un débutant ne nommerait pas une classe comme celle-ci dans un projet réel, mais y avez-vous déjà pensé ? également très problématique :

Je m'appelle Wiky

Si la police rouge d'origine est changée en bleue, alors la le style deviendra :
.red{color:bule;}
Un tel nom sera très déroutant. Le même nom est .leftBar. Cela sera également gênant si la barre latérale doit être modifiée en barre latérale droite. Par conséquent, veuillez ne pas utiliser les caractéristiques de l'élément (couleur, position, taille, etc.) pour nommer une classe ou un identifiant. Vous pouvez choisir un nom significatif tel que : #navigation{...}, .sidebar{.... }, .postwrap{ ...}
De cette façon, quelle que soit la manière dont vous modifiez les styles qui définissent ces classes ou identifiants, la connexion entre eux et les éléments HTML ne sera pas affectée.
Il existe une autre situation. Certains styles fixes ne seront pas modifiés une fois définis. Vous n'avez alors pas à vous soucier de la situation qui vient d'être mentionnée lors de la dénomination, comme
.alignleft{float:left;margin-. right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}
Ensuite Pour un tel paragraphe

Je suis un paragraphe !

Si vous devez modifier ce paragraphe de l'alignement d'origine à gauche vers l'alignement à droite, il vous suffit alors de modifier son nom de classe pour l'aligner à droite.
3. Abréviation de code
L'abréviation de code CSS peut améliorer la vitesse d'écriture du code et simplifier la quantité de code. De nombreuses propriétés peuvent être abrégées en CSS, notamment les valeurs de marge, de remplissage, de bordure, de police, d'arrière-plan et de couleur, etc. Si vous apprenez à abréger le code, le code original ressemblerait à ceci :
li{
famille de polices : Arial, Helvetica, sans-serif ;
taille de police : 1,2em ;
hauteur de ligne : 1,4em ;
padding-top :5px ;
padding-bottom : 10px;
padding -left:5px;
}
peut être abrégé en :
li{
police : 1,2em/1,4em Arial, Helvetica, sans-serif ;
padding :5px 0 10px 5px;
}
Si vous souhaitez en savoir plus sur la façon d'abréger ces attributs, vous pouvez vous référer au "Résumé de la syntaxe des abréviations CSS communes".
4. Utiliser l'héritage CSS
Si plusieurs éléments enfants de l'élément parent sur la page utilisent le même style, il est préférable de définir leurs mêmes styles sur leurs éléments parents et de les laisser hériter de ces styles CSS. De cette façon, vous pouvez bien conserver votre code et réduire la quantité de code. Ensuite, le code d'origine ressemble à ceci :
#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif }
#container h1{font-family; :Georgia , serif; }
peut être abrégé comme suit :
#container{ font-family:Georgia, serif >
5. Utilisation de plusieurs sélecteurs
Vous pouvez fusionner plusieurs sélecteurs CSS en un seul, If. ils ont un style commun. Cela permet non seulement de garder le code concis, mais vous permet également d'économiser du temps et de l'espace. Par exemple :
h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
peut être combiné en
h1, h2, h3{ font-family:Arial, Helvetica, sans -serif ; font-weight:normal;6. Commentaires de code appropriés
Les commentaires de code peuvent permettre aux autres de mieux comprendre votre code, et une organisation raisonnable des commentaires de code peut rendre la structure plus claire. Vous pouvez choisir d'ajouter un répertoire au début de la feuille de style :
Ensuite, la structure de votre code sera claire en un coup d'œil, et vous pourrez facilement retrouver et modifier le code.
Le contenu principal du code doit également être divisé de manière appropriée, et le code doit même être commenté si nécessaire, ce qui est également propice au développement de l'équipe :
/*** En-tête ***/
#header{ hauteur:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; #content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;>
#content h1{color:#F00}
#content .posts { overflow:hidden ; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; { clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; >7. Triez votre code CSS
Si les propriétés du code peuvent être triées par ordre alphabétique, il sera plus rapide de trouver les modifications :
/*** Contenu ***/
div{
background- couleur:#3399cc;
couleur:#666;
police:1.2em/1.4em Arial, Helvetica, sans-serif;
hauteur:300px;
marge :10px 5px;
remplissage :5px 0 10px 5px;
width:30%;
z-index:10;
}
8. Gardez le CSS lisible
L'écriture de CSS lisible facilitera la recherche et la modification des styles. . Je pense qu'il va de soi lequel des deux cas suivants est le plus lisible.
/*** Pied de page ***/
div{
background-color:#3399cc;
couleur:#666;
police : 1.2em/1.4em Arial, Helvetica, sans- serif;
hauteur:300px;
marge:10px 5px;
padding:5px 0 10px 5px;
largeur:30%;
z-index:10;
}
/*** Les propriétés de style sont triées par ordre alphabétique ***/
div{ background-color:#3399cc couleur:#666; police : 1.2em/1.4em Arial, Helvetica, hauteur sans empattement : 300px marge : 10px 5px ; padding:5px 0 10px 5px; width:30%; z-index:10; }
Quand il s'agit de certains sélecteurs avec moins d'attributs de style, j'écrirai une ligne :
/*** Écrivez une ligne pour chaque attribut de style ***/
div{ background-color:#3399cc; color:#666;>
Cette règle n'est ni stricte ni rapide, mais quelle que soit la façon dont vous l'écrivez, ma suggestion est de toujours garder le code cohérent. S'il y a plusieurs attributs, écrivez-les sur des lignes séparées. S'il y a moins de 3 attributs, vous pouvez écrire une seule ligne.
9. Choisissez de meilleures valeurs d'attribut de style
Certains attributs en CSS utilisent des valeurs d'attribut différentes, bien que les effets soient similaires, il existe des différences de performances, telles que
La différence est la bordure : 0 défini sur 0px. , bien qu'il ne soit pas visible sur la page, mais selon la valeur par défaut de border, le navigateur restitue toujours border-width/border-color, c'est-à-dire que la valeur de la mémoire a été occupée.
Et border:none définit la bordure sur "none", ce qui signifie qu'il n'y a pas de bordure. Lorsque le navigateur analyse "none", il n'effectuera pas d'actions de rendu, c'est-à-dire qu'il ne consommera pas de valeurs de mémoire. Par conséquent, il est recommandé d'utiliser border:none;
De même, display:none masque le navigateur d'objets, ne le restitue pas et n'occupe pas de mémoire. Et visibilité : volonté cachée.
10. Utilisez au lieu de @import
Tout d'abord, @import n'appartient pas à la balise XHTML et ne fait pas partie du standard Web. Il n'est pas très compatible avec les navigateurs antérieurs et a des effets négatifs. impact sur les performances du site Web. Pour plus de détails, veuillez vous référer à « Conception de sites Web hautes performances : n'utilisez pas @import ». Veuillez donc éviter d'utiliser @import
11. Utiliser des feuilles de style externes
Ce principe est toujours une bonne pratique de conception. Non seulement il est plus facile à maintenir et à modifier, mais plus important encore, l'utilisation de fichiers externes peut améliorer la vitesse des pages, car les fichiers CSS peuvent être mis en cache dans le navigateur. Le CSS intégré au document HTML sera retéléchargé avec le document HTML à chaque requête. Par conséquent, dans les applications pratiques, il n'est pas nécessaire de créer du code CSS dans des documents HTML :

ou

Utilisez plutôt Importer une feuille de style externe :

12. Évitez d'utiliser des expressions CSS (Expression)
. Les expressions CSS sont un moyen puissant (mais dangereux) de définir dynamiquement les propriétés CSS. Internet Explorer prend en charge les expressions CSS à partir de la version 5. Dans l'exemple suivant, vous pouvez utiliser des expressions CSS pour changer la couleur d'arrière-plan toutes les heures :
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ) ;
Comme indiqué ci-dessus, l'expression JavaScript est utilisée dans l'expression. Les propriétés CSS sont définies en fonction de l'évaluation des expressions JavaScript.
Le problème avec les expressions, c'est qu'elles sont évaluées plus souvent qu'on ne le pense. Non seulement lorsque la page est affichée et zoomée, mais aussi lorsque la page défile et même lorsque la souris est déplacée, elle sera recalculée. Ajoutez un compteur à une expression CSS pour suivre la fréquence à laquelle l'expression est évaluée. Vous pouvez facilement réaliser plus de 10 000 calculs en déplaçant simplement la souris sur la page.
Si vous devez utiliser des expressions CSS, n'oubliez pas qu'elles sont évaluées des milliers de fois et peuvent avoir un impact sur les performances de votre page. Évitez donc d’utiliser des expressions CSS sauf si cela est absolument nécessaire.
13. Compression du code
Lorsque vous décidez de déployer votre projet de site Web sur Internet, vous devez envisager de compresser le CSS et de supprimer les commentaires et les espaces pour accélérer le chargement de la page Web. Pour compresser votre code, vous pouvez utiliser certains outils, tels que YUI Compressor
, qui peuvent rationaliser le code CSS et réduire la taille du fichier pour une vitesse de chargement plus élevée.

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!