Résumé de l'expérience de la planification et de la gestion des feuilles de style CSS_Échange d'expériences

Cela fait plus d'un an que j'ai complètement abandonné la disposition des tableaux et utilisé xhtml+CSS pour créer des sites Web. Après plus d'un an de pratique, j'ai accumulé une certaine expérience. J'écris maintenant cet article pour la résumer. Il existe un problème clé dans le processus d'utilisation de xhtml+CSS pour créer un site Web : la planification et la gestion de la feuille de style CSS du site Web.

Mon historique de l'évolution de la gestion CSS

Lorsque j'ai utilisé CSS pour la première fois pour contrôler les styles de sites Web, je ne connaissais pas grand-chose à la planification de la gestion CSS. Le CSS que j'ai écrit était fondamentalement conforme aux besoins. à tout moment, et je ne pensais pas qu'il y avait quelque chose de mal à cela au début, mais ensuite de plus en plus ont été ajoutés, et les changements sont devenus de plus en plus désordonnés. Bien qu'il y ait eu quelques commentaires, à la fin, cela m'a quand même donné. un mal de tête rien qu'en le regardant. À cette époque, tout le CSS d'un site Web était dans un seul fichier, sans planification, et l'ordre n'était pas très régulier. Je ne pouvais donc trouver que le nom de la classe dans la page HTML, puis rechercher ce que je voulais parmi des milliers. de lignes de code CSS.

Au bout d'un moment, après réflexion et synthèse, j'ai fait un plan préliminaire pour la feuille de style CSS du site. Trois zones sont initialement divisées dans la feuille de style :

Exemple de code source [www.52css.com]
feuille de style de base
feuille de style de mise en page
feuille de style de classe
　où " " feuille de style de base" est utilisée pour décrire certaines choses courantes, telles que le corps global, un style, etc. ; "feuille de style de mise en page" est utilisée pour décrire une disposition d'identifiant unique, qui appartient à la disposition du cadre de la page entière ; "classe La feuille de style" " est utilisée pour décrire les styles des classes restantes. Ces styles sont divisés en styles réutilisables et styles qui n'apparaissent généralement qu'une ou plusieurs fois sur une page spéciale.

La mise en page selon cette méthode améliore beaucoup l'efficacité, mais cette méthode ne convient qu'aux sites Web de petite et moyenne taille. L'application sur les grands sites Web est encore un peu mince, du moins lorsque plusieurs personnes collaborent. il ne peut pas obtenir les meilleurs résultats. Il existe donc un modèle de planification de gestion CSS relativement complet résumé ci-dessous.

Mode de gestion des feuilles de style CSS plus complet

Étape 1 : Les individus ou les équipes doivent dessiner la disposition des pages principales de manière hiérarchique à l'aide d'un diagramme DIV. Ce diagramme DIV est la base du prototype de conception On. sur la page, marquez les noms d'ID et les noms de classe utilisés par les principaux modules de la page pour faciliter la création de documents de maintenance pour les modifications et mises à niveau futures.

Étape 2 : Divisez la structure CSS et établissez le CSS global et le CSS de chaque module. Référencez le CSS global dans la page html et référencez le CSS de chaque module dans le CSS global.

Exemple de code source [www.52css.com]
Créez global.css en tant que CSS global et définissez des styles globaux tels que "* { … } body { … } " dans le CSS global.
Introduisez le module CSS dans le style global via "@import url("xxx.css");".
Concernant la division du module CSS, je préfère la méthode de division CSS similaire à celle de wordpress Généralement, elle est divisée par une structure similaire à la suivante :

Exemple de code source [www.52css.com. ]
layout. css /* Disposition entière du site */
public.css /* Style de combinaison publique */
header.css /* Style de la zone d'en-tête de page */
sidebar.css /* Barre latérale style de zone * /
main.css /* Style de zone principale */
footer.css /* Style de zone inférieure */
index.css /* Style spécifique à la zone de la page d'accueil */
formulaire .css /* Style de classe de formulaire */
Expliquez que layout.css est responsable de la mise en page de l'ensemble du site Web, comme la position de base et la conception du style de #header, #footer et d'autres mises en page ; pour certaines définitions de style courantes, car la classe peut être utilisée dans une classe ="navbar font12px" Cette méthode utilise la méthode de séparation d'espace pour appliquer plusieurs styles de classe, vous pouvez donc définir certaines classes communes qui sont couramment utilisées ou qui doivent être modifiées sous des conditions spéciales. circonstances pour faciliter le réglage local ; header.css, sidebar.css, les modules tels que footer.css sont des feuilles de style CSS correspondant aux modules d'en-tête, de barre latérale et de bas. Les modules peuvent être ajoutés ou supprimés en fonction des besoins spécifiques du module. website ; index.css est le CSS de certains éléments uniques de la page d'accueil. En raison de la particularité de la page d'accueil, nous concevons généralement un traitement spécial pour la page d'accueil. Généralement, la page d'accueil est la page la plus complexe en CSS. Il est nécessaire de classer et de placer les éléments CSS uniques de la page d'accueil. Vous pouvez également introduire index.css sans @import. Mettez-le séparément pour référence sur la page d'accueil ; form.css est la feuille de style de l'élément de formulaire. n'est pas difficile, il est toujours difficile à contrôler. Mettez-le séparément dans un fichier CSS pour un contrôle facile. Bien sûr, vous pouvez également utiliser d'autres éléments similaires.

Étape 3 : Écrivez des styles dans chaque fichier de feuille de style.​