Apakah ada alasan yang baik untuk dua file CSS untuk saling mengimport?

8

Saya sedang mengerjakan beberapa revisi gaya kritis untuk situs WordPress klien yang dirancang oleh tim lain.

CSS tampaknya berantakan berantakan. Salah satu keistimewaan yang saya temukan adalah bahwa stylesheet utama tema ini style.css, @imports stylesheet lain dari subdirektori: css/default.css. Sementara itu, default.csstambahkan juga stylesheet utama di bagian atas file-nya.

Saya menghapus arahan impor dan menambahkan konten default.csske style.css, tapi itu merusak tata letak terlepas dari apakah saya meletakkan default.cssgaya di bagian atas atau bawah style.cssfile. @Import loop melakukan sesuatu ke kaskade yang entah bagaimana membuat tata letak "berfungsi".

Aku belum pernah melihat sesuatu seperti ini sebelumnya. Tampak jelas bahwa saya harus menguraikan stylesheet dan mengurutkan pemilih untuk meningkatkan kekhususan. Tetapi apakah ada alasan yang masuk akal untuk sengaja membuat dua file CSS yang saling mengimport? Tampaknya gila, tetapi apakah mungkin ada alasan mendasar di balik ini?

Saya berspesialisasi dalam pengembangan front-end, bukan pengembangan WordPress. Saya perhatikan bahwa WordPress mem-parsing stylesheet tema utama untuk informasi tema. Apakah rekursi impor adalah sesuatu yang bermanfaat bagi WordPress?

css import John Stephens
sumber
Adakah plugin caching WP yang diinstal? Sudahkah Anda mencoba menggunakan dev-tools Chrome untuk melihat aturan CSS mana yang melanggar tata letak ketika Anda menghapus impor, dan menentukan file yang ada di dalamnya?
nathangiesbrecht
1
pertanyaan bagus John tetapi halaman meminta file yang sama untuk diunduh lagi dan lagi terutama tanpa header caching yang tepat melekat pada masing-masing dari mereka adalah resep untuk bencana. Saya bisa menebak Anda memiliki beberapa plugin wordpress diinstal.
Mike
1
"dan menambahkan konten dari default.css ke style.css" - mungkin seharusnya sebaliknya ?! Adakah pertanyaan media yang terlampir pada @import?
MrWhite
dapatkah Anda membagikan situs webnya?
ePetkov

Jawaban:

3

@import adalah kekacauan besar mengenai waktu pemuatan halaman. Setelah Anda selesai melakukan hal-hal CSS, klien Anda datang dengan ide optimasi loadtime dan paling tidak di sana pertanyaan tentang menyingkirkan @import akan naik lagi.

Pertama saya akan mencoba mengganti @import dengan <link>. Kemudian coba dengan dev-tools untuk dijabarkan, kelas mana yang bertentangan. Setelah itu coba pindahkan aturan CSS dari file CSS yang diimpor dengan tambahan! Penting.

Bisa terjadi, bahwa ada beberapa masalah dengan jalur (relatif) file dalam file CSS yang diimpor ...?

Kadang-kadang membantu memuat di browser situs dengan @imported CSS, sehingga sepertinya klien mengharapkan, kemudian untuk menyalin seluruh CSS dengan bantuan dev-tools, simpan ke dalam satu file CSS dan ganti semua file CSS dengan yang baru dibuat ini satu.

Gagasan global yang akan saya coba selesaikan, adalah untuk memindahkan semua aturan CSS ke dalam file yang sama, membuatnya berfungsi, lalu memindahkan aturan CSS untuk area di atas-lipat ke kepala file HTML.

Evgeniy
sumber
Terima kasih. Memindahkan semua aturan menjadi satu file dan menggunakan alat Dev untuk menyelesaikan konflik adalah persis apa yang saya lakukan, dan itu bekerja dengan sangat baik.
John Stephens