Cet article résume quelques techniques CSS courantes pour jeter les bases de la reconstruction de sites Web. J'espère que vous pourrez apprendre quelque chose d'utile.
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 à "Syntaxe de base CSS".
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 ;100, mais en CSS, vous devez donner une unité exacte, comme : " width:100em. Il n'y a que deux exceptions où vous pouvez laisser l'unité non définie : la hauteur de ligne et la valeur 0. Sinon, tous les autres les valeurs doivent être suivies de 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#content { /* déclarations */ }
fieldset.details { /* déclarations */ }
peut s'écrire comme
#content { /* déclarations */ }
.details { /* déclarations */ }
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 ;
}