Y a-t-il une bonne raison pour que deux fichiers CSS se @importent mutuellement?

Je travaille sur des révisions de style critiques pour le site WordPress d'un client qui ont été conçues par une autre équipe.

Le CSS semble être un gâchis emmêlé. L' une des particularités que j'ai trouvé est que stylesheet principale du thème style.css, @imports une autre feuille de style d'un sous - répertoire: css/default.css. Pendant ce temps, default.css@ importe également la feuille de style principale en haut de son fichier.

J'ai supprimé les directives @import et ajouté le contenu de default.cssto style.css, mais cela rompt la mise en page, que je place les default.cssstyles en haut ou en bas du style.cssfichier. La boucle @import fait quelque chose à la cascade qui fait que la mise en page "fonctionne".

Je n'ai jamais rien vu de tel auparavant. Il semble évident que je devrais démêler les feuilles de style et séquencer les sélecteurs par ordre croissant de spécificité. Mais existe-t-il une justification raisonnable pour créer délibérément deux fichiers CSS qui @importent mutuellement? Cela semble fou, mais est-il possible qu'il y ait une raison de principe derrière cela?

Je me spécialise dans le développement frontal, pas dans le développement WordPress. Je note que WordPress analyse la feuille de style du thème principal pour les informations sur le thème. La récursivité @import est-elle quelque chose d'utile pour WordPress?

css import

— John Stephens
source

Des plugins de mise en cache WP sont-ils installés? Avez-vous essayé d'utiliser les outils de développement Chrome pour voir quelles règles CSS enfreignent la mise en page lorsque vous supprimez l'importation et déterminer dans quel fichier ils se trouvent?

— nathangiesbrecht du

bonne question John mais une page demandant que les mêmes fichiers soient téléchargés encore et encore, surtout sans en-têtes de mise en cache appropriés attachés à chacun d'eux est une recette pour un désastre. Je pourrais deviner que vous avez installé plusieurs plugins wordpress.

— Mike

"et a ajouté le contenu de default.css à style.css" - peut-être que ce devrait être l'inverse?! Y a-t-il des requêtes des médias attachées au @import?

— MrWhite

pouvez-vous partager le site Web?

— ePetkov

@import est un gros gâchis concernant le temps de chargement de la page. Après avoir fait les choses CSS, votre client vient avec l'idée d'optimisation du temps de chargement et au plus tard, la question de se débarrasser de @import se posera à nouveau.

Tout d'abord, j'essaierais de remplacer @import par <lien>. Essayez ensuite avec dev-tools de déterminer quelles classes sont en conflit. Après cela, essayez de déplacer les règles CSS du fichier CSS importé en ajoutant! Important.

Il pourrait arriver qu'il y ait des problèmes avec les chemins (relatifs) des fichiers dans le fichier CSS importé ...?

Parfois, cela aide à charger dans le navigateur le site avec @imported CSS, il ressemble donc au client, puis à copier tout le CSS à l'aide de dev-tools, l'enregistrer dans un fichier CSS et remplacer tous les fichiers CSS par ce nouveau créé une.

L'idée globale que j'essaierais d'accomplir est de déplacer toutes les règles CSS dans le même fichier, de le faire fonctionner, puis de déplacer les règles CSS pour la zone au-dessus de la ligne de flottaison vers la tête du fichier HTML.

— Evgeniy
source

Merci. Déplacer toutes les règles dans un fichier et utiliser les outils de développement pour résoudre les conflits est exactement ce que j'ai fait, et cela a fonctionné à merveille.

— John Stephens