Gibt es einen guten Grund für zwei CSS-Dateien, sich gegenseitig zu importieren?

8

Ich arbeite an einigen kritischen Stilrevisionen für die WordPress-Site eines Kunden, die von einem anderen Team entworfen wurden.

Das CSS scheint ein Wirrwarr zu sein. Eine der style.cssBesonderheiten , die ich gefunden habe, ist, dass das Haupt-Stylesheet des Themas @ ein anderes Stylesheet aus einem Unterverzeichnis importiert : css/default.css. In der Zwischenzeit default.cssimportiert @ auch das Haupt-Stylesheet oben in der Datei.

Ich habe die @ import-Direktiven entfernt und den Inhalt von default.cssto hinzugefügt style.css, aber das bricht das Layout, unabhängig davon, ob ich die default.cssStile oben oder unten in die style.cssDatei eingefügt habe . Die @ import-Schleife hat etwas mit der Kaskade zu tun, wodurch das Layout irgendwie "funktioniert".

Ich habe so etwas noch nie gesehen. Es liegt auf der Hand, dass ich die Stylesheets entwirren und die Selektoren in der Reihenfolge zunehmender Spezifität sortieren sollte. Aber gibt es vernünftige Gründe, um absichtlich zwei CSS-Dateien zu erstellen, die sich gegenseitig importieren? Es scheint verrückt zu sein, aber ist es möglich, dass es einen grundsätzlichen Grund dafür gibt?

Ich bin spezialisiert auf Front-End-Entwicklung, nicht auf WordPress-Entwicklung. Ich stelle fest, dass WordPress das Stylesheet des Hauptthemas nach Themeninformationen analysiert. Ist die @ import-Rekursion für WordPress in irgendeiner Weise nützlich?

css import John Stephens
quelle
Sind WP-Caching-Plugins installiert? Haben Sie versucht, mithilfe von Chrome-Entwicklungstools festzustellen, welche CSS-Regeln das Layout beschädigen, wenn Sie den Import entfernen, und festzustellen, in welcher Datei sie sich befinden?
Nathangiesbrecht
1
Gute Frage John, aber eine Seite, auf der immer wieder dieselben Dateien heruntergeladen werden müssen, insbesondere ohne die richtigen Caching-Header, die an jeden von ihnen angehängt sind, ist ein Rezept für eine Katastrophe. Ich könnte vermuten, dass Sie mehrere WordPress-Plugins installiert haben.
Mike
1
"und den Inhalt der default.css zu style.css hinzugefügt" - vielleicht sollte es umgekehrt sein?! Irgendwelche Medienanfragen an das @import?
MrWhite
Können Sie die Website teilen?
ePetkov

Antworten:

3

@import ist ein großes Durcheinander in Bezug auf die Ladezeit der Seite. Nachdem Sie die CSS-Aufgaben erledigt haben, kommt Ihr Kunde auf die Idee der Ladezeitoptimierung, und spätestens dort wird die Frage nach der Beseitigung von @import erneut auftauchen.

Zuerst würde ich versuchen, @import durch <link> zu ersetzen. Versuchen Sie dann mit dev-tools herauszufinden, welche Klassen in Konflikt stehen. Versuchen Sie anschließend, CSS-Regeln aus der importierten CSS-Datei mit dem Zusatz! Wichtig zu verschieben.

Es kann vorkommen, dass es Probleme mit (relativen) Dateipfaden in importierten CSS-Dateien gibt ...?

Manchmal hilft es, die Site mit @imported CSS in den Browser zu laden, so wie es der Client erwartet, und dann das gesamte CSS mithilfe von Entwicklertools zu kopieren, in einer CSS-Datei zu speichern und alle CSS-Dateien durch diese neu erstellte zu ersetzen einer.

Die globale Idee, die ich zu verwirklichen versuchen würde, besteht darin, alle CSS-Regeln in dieselbe Datei zu verschieben, sie zum Laufen zu bringen und dann die CSS-Regeln für den Bereich über dem Falz in den Kopf der HTML-Datei zu verschieben.

Evgeniy
quelle
Vielen Dank. Das Verschieben aller Regeln in eine Datei und das Verwenden von Dev-Tools zum Lösen von Konflikten ist genau das, was ich getan habe, und es hat wunderbar funktioniert.
John Stephens