Résumé des techniques CSS telles que les commentaires CSS, la dénomination, l'héritage, l'ordre de style_Échange d'expériences

1. À propos des commentaires

Lors de la création d'un site Web xhtml+CSS, les commentaires en CSS sont très importants. 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 "/* Contenu du commentaire */", car dans les éditeurs dotés de fonctions de surbrillance tels que EditPlus, le "/***************/" couramment utilisé en langage C est utilisé. Des commentaires comme celui-ci n'ont aucun sens, et il n'est pas nécessaire de remplir beaucoup de contenu dénué de sens en guise de 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é selon les 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, l'héritage doit être bien utilisé. 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. Concernant la hiérarchie des définitions 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 :

Exemple de code source [www.52css.com]

Exemple CSS :

Exemple de code source [www.52css.com]
#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 le document Les niveaux plus clairs et plus faciles à lire.

5. À propos du tri des styles

Lors de la conception des feuilles de style CSS, nous écrivons principalement du code à la main, ce qui peut facilement prêter à confusion dans le tri 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 début, suivis de l'arrière-plan, puis de la police, de la couleur, de l'alignement du texte, etc. qui contrôlent le texte, et puis quelques éléments qui ne peuvent être utilisés que par des balises spéciales, telles que 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.​