1. À propos des commentaires
Les commentaires en CSS sont très importants lors de la création de sites Web xhtml+CSS. Lors de la création de styles CSS, vous devez conserver l’habitude de commenter avec désinvolture. Généralement, j'ai l'habitude d'écrire des commentaires au format "/* commentaire content*/", car dans les éditeurs dotés de fonctions de surbrillance comme EditPlus, le "/********" couramment utilisé en langage C est utilisé. . Les commentaires tels que *******/" n'ont aucun sens, et il n'est pas nécessaire de remplir beaucoup de contenu dénué de sens comme séparation. Les documents avec commentaires servent de documents CSS originaux du site Web. Lors de la publication du site Web, vous pouvez utiliser un outil de compression CSS pour compresser le CSS et supprimer les commentaires du CSS de sortie afin d'améliorer l'efficacité du transfert de fichiers.
2. À propos de la dénomination
Lorsque je nomme des fichiers CSS, je préfère utiliser des noms anglais ou des abréviations sémantiquement corrects. Je peux utiliser des noms pinyin partiels pour les parties inhabituelles. De plus, dans certaines classes dépendantes, je peux utiliser un nom similaire à "list_banner", c'est-à-dire le nom de l'élément parent plus "_" plus le nom de l'élément.
Concernant le nommage, il peut être négocié en fonction des habitudes des designers de l'équipe. Mais il est préférable d’ajouter un commentaire après le nom afin de pouvoir générer une documentation pour référence future.
3. À propos de l'héritage
En CSS, faites bon usage de l’héritage. Par exemple, dans deux divs imbriqués, l'élément parent définit l'attribut background-color comme étant noir. Si l'arrière-plan des éléments enfants est également noir, il n'est pas nécessaire de répéter la définition. Faire bon usage de l’héritage CSS peut rendre votre code plus efficace et rationalisé.
4. À propos des niveaux de définition CSS
Lors de la définition des classes en CSS, il est recommandé d'utiliser une manière hiérarchique pour décrire les instructions.
Exemple de structure :
| Voici le contenu cité : <identifiant div="menu"> <div class="menulist"> <div class="selectit"></div> </div> </div> |
Exemple CSS :
| Voici le contenu cité : #menu { ... } #menu .menulist { ... } #menu .menulist .selectit { ... } |
Dans l'exemple ci-dessus, à partir de l'effet final, il n'est pas nécessaire que #menu apparaisse à plusieurs reprises, mais en fait, si #menu peut être ajouté devant, cela rendra la hiérarchie du document plus claire et plus facile à lire.
5. À propos du tri des styles
Lors de la conception de feuilles de style CSS, nous écrivons principalement du code à la main, ce qui peut facilement prêter à confusion dans l'ordre des styles dans les classes. Par exemple, plusieurs classes utilisent le remplissage, la marge, l'arrière-plan, la couleur et d'autres styles. Cependant, lors du tri, certaines classes ont un arrière-plan plus élevé et d'autres une marge plus élevée. Cela crée une certaine confusion et peut facilement frustrer votre réflexion. Je suggère que les concepteurs individuels ou en équipe se mettent d'accord sur un ordre approximatif, de sorte qu'individuellement il n'y aura pas beaucoup de différence, mais dans l'ensemble, il sera plus facile à lire et à gérer, et l'efficacité globale sera considérablement améliorée.
Par exemple, par défaut, je mets la largeur, la hauteur, le remplissage, la marge, la bordure, etc. au premier plan, suivis de l'arrière-plan, puis de la police, de la couleur, de l'alignement du texte, etc. qui contrôlent le texte, puis de quelques balises spéciales qui peuvent ne peut être utilisé que des éléments, comme le style de liste, etc., et enfin des filtres CSS. Lorsque vous rencontrez des situations particulières (telles que la priorité de certaines propriétés CSS qui doivent être définies), cela peut être géré de manière flexible.