Guide pour améliorer la maintenabilité et la lisibilité des fichiers CSS Page 1/2_Experience Exchange

Ainsi, un code bien structuré peut optimiser dans une large mesure sa maintenabilité. Vous trouverez ci-dessous quatre conseils pour améliorer la maintenabilité des fichiers CSS, comme guide pour réaliser le développement front-end WEB avec une meilleure habitude d'organisation de style CSS.

1. Décomposition des fichiers de style CSS

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.



@import "reset.css?1.1.5"
@import "layout.css?1.1.5"
@import "colors.css?1.1; .5";
@import "typography.css?1.1.5";
@import "flash.css?1.1.5";
/* @import "debugging.css?1.1.5" ; */


Parallèlement, pour les gros projets, vous pouvez également ajouter des indicateurs de mise à niveau pour les fichiers CSS ou certains diagnostics et autres mesures, qui ne seront pas détaillés ici. Veuillez faire attention au résumé et à la réflexion pendant le travail de mise en œuvre, et vous êtes également invités à vous référer aux articles pertinents de jb51.net.

2. Indexez le 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 réalisable consiste à créer un index en forme d'arbre. L'identifiant structurel et la classe peuvent devenir une branche de l'arbre.
[Mise en page]
* corps
+ En-tête / #header
+ Contenu / #content
- Colonne de gauche / #leftcolumn
- Colonne de droite / #rightcolumn
- Barre latérale / #sidebar
- RSS / #rss
- Recherche / #search
- Boîtes / .box
- Sideblog / #sideblog
+ Footer / #footer
Navigation #navbar
Publicités .ads
En-tête de contenu h2

Ou cela peut être comme ceci :
[Contenu]
1. En-tête / #en-tête
2.1. Navigation / #navbar
3. Contenu / #content
3.1. Colonne de gauche / #leftcolumn
3.2. Colonne de droite / #rightcolumn
3.3. / #rss
3.3.2. Recherche / #search
3.3.3. Boxes / .box
3.3.4. 4. Footer / #footer


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, il vous suffit d'effectuer une simple recherche.

[Contenu]
1. Corps
2. En-tête / #header
3. Navigation / #navbar
4. #leftcolumn
6. Colonne de droite / #rightcolumn
7. Barre latérale / #sidebar
8. RSS / #rss
9. >11. Sideblog / #sideblog
12. Publicités / .ads
13. Footer / #footer

/*--[8. #rss { ... }
#rss img { ... }

Définir une telle récupération de style peut effectivement faciliter la lecture et l'apprentissage de votre code par les autres. 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.