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, planifier-concevoir-publier la page Lorsqu'un projet nécessite la collaboration de plusieurs personnes et le réaliser en peu de temps, la planification des fichiers de style, la réflexion des 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 que ils sont bons dans ce domaine et doivent le pratiquer avant de les mettre en œuvre. 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 au maximum pour réduire le nombre de connexions simultanées si les octets le sont trop. grands, ils peuvent être divisés pour éviter que la vitesse de téléchargement ne soit trop lente et n'affecte 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. Ce qui précède n’est qu’un petit aperçu de mon expérience professionnelle. C'est également la première fois que l'on explore véritablement les avantages de la modularité CSS : facile à modifier, facile à gérer et facile à collaborer entre plusieurs personnes. Au plaisir d’en discuter avec les experts.