Mes réflexions sur le framework CSS et les modules CSS ont toujours été vagues et je suis complètement la tendance. Les problèmes que j'ai rencontrés au travail récemment m'ont obligé à prêter attention à cette question. Je suis habitué à ce qu'une seule personne fasse tout, planification-conception-publication. Lorsqu'un projet nécessite la collaboration de plusieurs personnes et sa réalisation en peu de temps, la planification des fichiers de style, la réflexion sur les modules et frameworks CSS sont particulièrement importantes.
La question suivante m'a tracassé récemment : si plusieurs personnes travaillent à la réception d'un site Web en même temps, comment les répartir de manière à ce que le style de l'ensemble du site Web soit unifié, que la structure des fichiers de style soit raisonnable, qu'il y ait pas de duplication ni de redondance, et l'efficacité est la plus élevée ? J'ai consulté plusieurs camarades de classe et les réponses que j'ai obtenues sont résumées comme suit : en termes d'unification du style, nous avons discuté ensemble pour faire d'abord un croquis, et une personne a réalisé une page de style standard basée sur le croquis, puis nous avons commencé à travailler ensemble, et le reste était une modification constante. En termes de production, plusieurs fichiers CSS différents sont définis pour l'ensemble du site, et chaque personne est responsable de fichiers de style différents.
Ce qui est facile à dire ne l’est pas si facilement une fois mis en œuvre. En matière de design, je n'ose toujours pas prendre de risques. Heureusement, il n'y a pas beaucoup de pages. Il y a moins de 20 pages de premier et deuxième niveaux au total, et une seule personne peut s'en occuper. Parlez-nous du processus de production.
(1) Standardisez la dénomination CSS, l’ordre d’écriture et les commentaires.
Sans parler de l'importance de ce point, il est difficile d'imaginer à quel point il serait déroutant que plusieurs méthodes de nommage « fortement personnalisées » apparaissent en même temps dans une feuille de style. La dénomination peut utiliser la connexion des symboles "-", "_", tels que text-box, text-content, text_box ou l'écriture majuscule et minuscule "hump case", textBox, textContent, etc. Les commentaires sont très importants. Les commentaires peuvent être divisés en trois niveaux. Les principales catégories de commentaires sont utilisées pour diviser les blocs CSS, tels que les annotations d'en-tête, de conteneur, de pied de page, les annotations de module local sous les catégories principales et les annotations de troisième catégorie. annoté dans un sélecteur. Utilisez des commentaires ou piratez des commentaires sur certains effets spéciaux. Le format d'écriture peut utiliser une indentation horizontale pour afficher les relations hiérarchiques.
(2) Déterminer la division de la structure de la feuille de style en fonction des rendus
Il existe de nombreuses introductions sur Internet sur la division de la structure des fichiers CSS, qui ne sont généralement constitués que de quelques fichiers : layout.css/main.css/footer.css/header.css/reset.css, etc. Tout le monde dit qu'ils sont bon dans ce domaine et pratiquez-le. Comprenez qu’il n’y a pas de meilleur, seulement le plus approprié. La meilleure division de style doit dépendre étroitement de la structure HTML elle-même, plutôt que d'être universelle.
En plus de faciliter la future division du travail et la collaboration, la distribution des fichiers CSS a également un point très important : si les octets sont petits, ils peuvent être compressés autant que possible pour réduire le nombre de connexions simultanées. grands, ils peuvent être divisés pour éviter que la vitesse de téléchargement ne soit trop lente, affectant le chargement du style. Ce sont des questions spécifiques qui doivent être traitées au cas par cas. Par exemple, pour les pages très visitées telles que les moteurs de recherche et les pages d’accueil de portails, il est préférable d’écrire du CSS à l’intérieur de la page.
Décidez au préalable de la structure du style CSS :
Exemple de code source
reset.css /*Recharge du style de page*/
header.css /*Style d'en-tête à l'échelle du site*/
footer.css /*Style de pied de page complet du site*/
public.css /*Style de module public pour l'ensemble du site*/
index.css /*Style unique de la page d'accueil*/
conteneur.css /*Styles de corps de niveau 2 et inférieur*/
print.css /*Style d'impression*/
c'est à dire.css /*piratage IE*/
(3) Division du travail et collaboration
La scène est installée et les chants vont commencer. Trouvez toutes les listes de textes publiques et les listes mixtes d'images et de textes. Une personne est responsable de l'écriture dans le module public, une personne pour la tête et la queue, et une personne pour le cadre de page secondaire. La partie personnalisée est laissée à la fin.
Il existe encore de nombreux problèmes dans le fonctionnement réel. La redondance du code ne peut être évitée et ne peut être que minimisée. Il faut parfois faire des sacrifices pour être efficace.