Après avoir terminé un travail initial, de nombreuses personnes oublient la structure et les détails du projet. Cependant, le code ne sera pas complètement finalisé dans l'immédiat. Il y aura des travaux de maintenance continus pendant le temps restant, et ces travaux pourraient ne pas être effectués par vous-même. Par conséquent, un code bien structuré peut grandement optimiser sa maintenabilité. Voici cinq façons d'améliorer la maintenabilité de vos fichiers CSS, qui constituent un meilleur guide de style CSS.
1. Décomposez vos styles
Pour les petits projets, avant d'écrire du code, divisez le code en plusieurs blocs selon la structure de la page ou le contenu de la page et donnez des commentaires. Par exemple, vous pouvez séparer les styles globaux, les mises en page, les styles de police, les formulaires, les commentaires et autres en plusieurs blocs différents pour continuer à travailler.
Pour les projets plus importants, cela n’aura évidemment aucun effet. À ce stade, le style doit être décomposé en plusieurs fichiers de feuilles de style différents. La feuille de style principale ci-dessous est un exemple de cette approche, et sa tâche principale consiste à importer d'autres fichiers de style. L'utilisation de cette méthode peut non seulement optimiser la structure de style, mais également contribuer à réduire certaines requêtes inutiles du serveur. Il existe de nombreuses façons de décomposer des fichiers, et la feuille de style principale utilise la plus courante.
/*------------------------------------------------ ------------------- [Feuille de style principale] |
Parallèlement, pour les grands projets, vous pouvez également ajouter des indicateurs de mise à niveau des fichiers CSS ou certaines mesures de diagnostic, qui ne seront pas détaillées ici.
2. Créer un index de fichier CSS
Afin de comprendre rapidement la structure de l'ensemble du fichier CSS, c'est un bon choix de créer un index de fichier au début du fichier. Une méthode possible consiste à construire un index en forme d'arbre : l'identifiant structurel et la classe peuvent devenir une branche de l'arbre. comme suit:
| /*------------------------------------------------ ------------------- [Mise en page] * corps + En-tête / #en-tête + Contenu / #contenu - Colonne de gauche / #leftcolumn - Colonne de droite / #rightcolumn - Barre latérale / #sidebar -RSS/#rss - Recherche / #recherche - Boites / .box - Sideblog / #sideblog + Pied de page / #pied de page Navigation #barre de navigation Publicités .annonces En-tête de contenu h2 ——————————————————————-*/ |
Ou cela peut aussi être fait :
/*------------------------------------------------ ------------------- [Table des matières] -------------------------------------------------- -------------------*/ |
Une autre façon consiste simplement à lister d'abord le contenu, sans indentation. Dans l'exemple ci-dessous, si vous devez accéder à la section RSS, recherchez simplement 8.RSS.
/*------------------------------------------------ ------------------- [Table des matières] -------------------------------------------------- -------------------*/ /*------------------------------------------------ ------------------- |
Définir un tel style de recherche peut effectivement permettre aux autres de lire et d'apprendre plus facilement votre code. Lorsque vous travaillez sur de grands projets, vous pouvez également imprimer la recherche pour une référence facile lors de la lecture du code.