1. Utilisez des abréviations CSS
L'utilisation d'abréviations peut aider à réduire la taille de vos fichiers CSS et à les rendre plus faciles à lire. Pour les principales règles de l'abréviation CSS, veuillez vous référer au "Résumé de la syntaxe commune des abréviations CSS", qui ne sera pas décrit ici.
2. Définissez clairement l'unité sauf si la valeur est 0
Oublier de définir les unités d'une dimension est une erreur courante parmi les débutants en CSS. En HTML, vous pouvez simplement écrire width=100, mais en CSS, vous devez donner une unité exacte, telle que : width:100px width:100em. Il n'y a que deux exceptions où les unités ne peuvent pas être définies : la hauteur de ligne et la valeur 0. De plus, les autres valeurs doivent suivre l'unité. Attention à ne pas ajouter d'espaces entre la valeur et l'unité.
3. Sensible à la casse
Lors de l'utilisation de CSS en XHTML, les noms d'éléments définis en CSS sont sensibles à la casse. Pour éviter cette erreur, je recommande d'utiliser des minuscules pour tous les noms de définition.
Les valeurs de class et id sont également sensibles à la casse en HTML et XHTML. Si vous devez écrire une casse mixte, veuillez confirmer soigneusement que votre définition en CSS est cohérente avec les balises en XHTML.
4. Annulez les restrictions d'éléments avant la classe et l'identifiant
Lorsque vous écrivez pour définir une classe ou un identifiant pour un élément, vous pouvez omettre la qualification d'élément précédente, car l'ID est unique dans une page et peut être utilisé plusieurs fois dans la page. Cela n’a aucun sens pour vous de qualifier un élément. Par exemple:
div#contenu { }
champset.détails { }
peut s'écrire comme
#contenu { }
.détails { }
Cela économise quelques octets.
5.Valeur par défaut
Habituellement, la valeur par défaut de padding est 0 et la valeur par défaut de background-color est transparente. Mais la valeur par défaut peut être différente selon les navigateurs. Si vous avez peur des conflits, vous pouvez définir les valeurs de marge et de remplissage de tous les éléments à 0 au début de la feuille de style, comme ceci :
* {
marge : 0 ;
remplissage : 0 ;
}
6. Pas besoin de définir à plusieurs reprises des valeurs héritables
En CSS, les éléments enfants héritent automatiquement des valeurs d'attribut de l'élément parent, telles que la couleur, la police, etc., qui ont été définies dans l'élément parent, et peuvent être directement héritées dans l'élément enfant sans définition répétée. Mais sachez que le navigateur peut remplacer votre définition par certaines valeurs par défaut.
7. Premier principe récent
S'il existe plusieurs définitions du même élément, la définition la plus proche (niveau minimum) sera prioritaire. Par exemple, il y a ce morceau de code.
Mise à jour : ensemble Lorem ipsum dolor
Dans le fichier CSS, vous avez défini l'élément p et une classupdate
p{
marge : 1em 0 ;
taille de police : 1em ;
couleur : #333 ;
}
.mise à jour {
poids de la police : gras ;
couleur : #600 ;
}
Parmi ces deux définitions, class=update sera utilisée car class est plus proche que p. Vous pouvez consulter « Calcul de la spécificité d'un sélecteur » du W3C pour en savoir plus.
8. Définitions de classes multiples
Une balise peut définir plusieurs classes en même temps. Par exemple : nous définissons d'abord deux styles, le premier style a un arrière-plan de #666 ; le deuxième style a une bordure de 10 px.
.one{largeur :200px;arrière-plan :#666;}
.two{border:10px solide #F00;}
Dans le code de la page, on peut appeler comme ça
L'effet d'affichage final est que ce div a à la fois un arrière-plan #666 et une bordure de 10 px. Oui, c'est possible de faire cela, vous pouvez l'essayer.
9. Utilisez des sélecteurs descendants
Les débutants en CSS ne savent pas que l'utilisation de sous-sélecteurs est l'une des raisons qui affectent leur efficacité. Les sous-sélecteurs peuvent vous aider à enregistrer de nombreuses définitions de classe. Jetons un coup d'œil au code suivant :
<div id=subnav>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>Élément 1</a></li>>
<li class=subnavitemselected> <a href=# class=subnavitemselected> Élément 1</a> </li>
<li class=subnavitem> <a href=# class=subnavitem> Élément 1</a> </li>
</ul>
</div>
La définition CSS de ce code est :
div#subnavul { }
div#subnavulli.subnavitem { }
div#subnavulli.subnavitem a.subnavitem { }
div#subnavulli.subnavitemselected { }
div#subnavulli.subnavitemselected a.subnavitemselected { }
Vous pouvez remplacer le code ci-dessus par la méthode suivante
<ul id=subnav>
<li> <a href=#> Élément 1</a> </li>
<li class=sel> <a href=#> Élément 1</a> </li>
<li> <a href=#> Élément 1</a> </li>
</ul>
La définition du style est la suivante :
#subnav { }
#subnavli { }
#subnav un { }
#subnav .sel { }
#subnav .sel a { }
Utilisez des sous-sélecteurs pour rendre votre code et votre CSS plus concis et plus faciles à lire.
10. Pas besoin d'ajouter des guillemets au chemin de l'image d'arrière-plan
Pour enregistrer des octets, je recommande de ne pas citer le chemin de l'image d'arrière-plan, car les guillemets ne sont pas nécessaires. Par exemple:
arrière-plan:url(images
marge : 0 automatique ;
}
Mais IE5/Win ne peut pas afficher correctement cette définition. Nous utilisons une astuce très utile pour la résoudre : utilisez l'attribut text-align. Comme ça:
corps {
texte-align:centre;
}
#envelopper {
largeur : 760 px ;
marge : 0 automatique ;
texte-align:gauche;
}
La règle text-align:center; du premier corps définit que tous les éléments du corps dans IE5/Win sont centrés (les autres navigateurs centrent simplement le texte), et la deuxième règle text-align:left consiste à centrer le texte dans #warp; la gauche.
15. Importer et masquer le CSS
Étant donné que les anciens navigateurs ne prennent pas en charge CSS, une approche courante consiste à utiliser la technique @import pour masquer CSS. Par exemple:
@import url(main.css);
Cependant, cette méthode n'a pas fonctionné pour IE4, ce qui m'a donné mal à la tête pendant un moment. Plus tard, je l'ai écrit comme ceci :
@import main.css ;
De cette façon, CSS peut être masqué dans IE4 Haha, cela économise également 5 octets. Si vous souhaitez connaître l'explication détaillée de la syntaxe @import, vous pouvez voir ici "le tableau des filtres CSS de centricle"
16. Optimisation pour IE
Parfois, vous devez définir des règles spéciales pour les bogues du navigateur IE. Il y a trop de hacks CSS ici, je n'en utilise que deux, que Microsoft soit meilleur dans la prochaine version bêta d'IE7. Avec la prise en charge de CSS, les deux méthodes le sont. le plus sûr.
1. Méthode d'annotation
(a) Pour masquer une définition CSS dans IE, vous pouvez utiliser un sélecteur enfant :
html>corps p {
}
(b) La méthode d'écriture suivante ne peut être comprise que par le navigateur IE (cachée des autres navigateurs)
*htmlp{
}
(c) Parfois, vous souhaitez que IE/Win soit actif mais IE/Mac masqué, vous pouvez utiliser l'astuce de la barre oblique inverse :
*htmlp{
déclarations
}
2. Méthode des commentaires conditionnels
Une autre méthode, qui, à mon avis, est plus éprouvée que CSS Hacks, consiste à utiliser les commentaires conditionnels d'attribut privé de Microsoft (commentaires conditionnels). En utilisant cette méthode, vous pouvez définir certains styles séparément pour IE sans affecter la définition de la feuille de style principale.
17. Conseils de débogage : quelle est la taille des couches ?
Lors du débogage des erreurs CSS, vous devez être comme une machine à écrire et analyser le code CSS ligne par ligne. Je définis généralement une couleur d'arrière-plan sur le calque en question afin que l'espace occupé par le calque soit évident. Certaines personnes suggèrent d'utiliser border, ce qui est généralement possible, mais le problème est que parfois border augmentera la taille des éléments, et border-top et boeder-bottom détruiront la valeur de la marge verticale, il est donc plus sûr d'utiliser l'arrière-plan.
Une autre propriété qui pose souvent problème est le contour. Le contour ressemble à Boeder, mais n'affecte pas la taille ou la position de l'élément. Seuls quelques navigateurs prennent en charge l'attribut outline, les seuls que je connaisse sont Safari, OmniWeb et Opera.
18. Style d'écriture du code CSS
Lors de l’écriture de code CSS, chacun a ses propres habitudes d’écriture concernant l’indentation, les sauts de ligne et les espaces. Après une pratique constante, j'ai décidé d'adopter le style d'écriture suivant :
sélecteur1,
sélecteur2 {
propriété:valeur;
}
Lorsque j'utilise des définitions d'union, j'écris généralement chaque sélecteur sur sa propre ligne afin qu'ils soient plus faciles à trouver dans le fichier CSS. Ajoutez un espace entre le dernier sélecteur et les accolades {. Écrivez également chaque définition sur sa propre ligne. Le point-virgule doit être placé directement après la valeur de l'attribut.
J'ai l'habitude d'ajouter un point-virgule après chaque valeur d'attribut. Bien que les règles autorisent que le point-virgule n'ait pas besoin d'être écrit après la dernière valeur d'attribut, si vous souhaitez ajouter un nouveau style, il est facile d'oublier d'ajouter le point-virgule et provoquer une erreur, donc vous l'ajoutez toujours mieux.
Enfin, l'accolade fermante } est écrite seule sur une ligne.
Les espaces et les sauts de ligne facilitent la lecture.
