C'è qualche buona ragione per cui due file CSS si importano l'un l'altro?

Sto lavorando ad alcune revisioni di stile critiche per il sito WordPress di un cliente progettato da un altro team.

Il CSS sembra essere un pasticcio aggrovigliato. Una delle idiosincrasie che ho trovato è che il foglio di stile principale del tema style.css, @imports un altro foglio di stile da una sottodirectory: css/default.css. Nel frattempo, default.css@importa anche il foglio di stile principale nella parte superiore del suo file.

Ho rimosso le direttive @import e aggiunto il contenuto di default.cssa style.css, ma ciò interrompe il layout indipendentemente dal fatto che io abbia inserito gli default.cssstili nella parte superiore o inferiore del style.cssfile. Il ciclo @import fa qualcosa in cascata che in qualche modo fa "funzionare" il layout.

Non ho mai visto nulla di simile prima. Sembra ovvio che dovrei districare i fogli di stile e mettere in sequenza i selettori in ordine crescente di specificità. Ma esiste una logica ragionevole per creare deliberatamente due file CSS che @importano l'un l'altro? Sembra impazzito, ma è possibile che ci sia una ragione di principio dietro questo?

Sono specializzato nello sviluppo front-end, non nello sviluppo di WordPress. Prendo atto che WordPress analizza il foglio di stile del tema principale per informazioni sul tema. La ricorsione di @import è utile in qualche modo per WordPress?

css import

— John Stephens
fonte

Sono installati plug-in di cache WP? Hai provato a utilizzare gli strumenti di sviluppo di Chrome per vedere quali regole CSS interrompono il layout quando rimuovi l'importazione e stabilisci in quale file si trovano?

— nathangiesbrecht,

bella domanda John, ma una pagina che richiede di scaricare gli stessi file più e più volte, specialmente senza le intestazioni di cache adeguate allegate a ciascuno di essi, è una ricetta per il disastro. Suppongo che tu abbia installato più plugin wordpress.

— Mike,

"e ha aggiunto il contenuto di default.css a style.css" - forse dovrebbe essere il contrario ?! Qualche query multimediale allegata al @import?

— MrWhite,

puoi condividere il sito?

— ePetkov,

@import è un gran casino per quanto riguarda il tempo di caricamento della pagina. Dopo aver eseguito le operazioni CSS, il tuo client viene con l'idea di ottimizzazione del tempo di caricamento e al più tardi la domanda su come sbarazzarsi di @import sorgerà di nuovo.

Innanzitutto proverei a sostituire @import con <link>. Quindi prova con dev-tools per definire quali classi sono in conflitto. Successivamente prova a spostare le regole CSS dal file CSS importato con l'aggiunta di! Important.

Potrebbe succedere che ci siano dei problemi con i percorsi (relativi) dei file nel file CSS importato ...?

A volte aiuta a caricare nel browser il sito con @imported CSS, quindi sembra che il client si aspetti, quindi a copiare l'intero CSS con l'aiuto di dev-tools, salvarlo in un file CSS e sostituire tutti i file CSS con questo appena creato uno.

L'idea globale che vorrei provare a realizzare è quella di spostare tutte le regole CSS nello stesso file, farlo funzionare, quindi spostare le regole CSS per l'area above the fold nella testa del file HTML.

— Evgeniy
fonte

Grazie. Spostare tutte le regole in un unico file e usare gli strumenti Dev per risolvere i conflitti è esattamente quello che ho fatto e ha funzionato magnificamente.

— John Stephens,