Mengapa menghindari menggunakan @import CSS?

CSS @import terkenal karena memuat setiap file yang diimpor secara terpisah alih-alih paralel. Dengan kata lain, browser pengunjung harus menunggu setiap file yang diimpor untuk dimuat alih-alih dapat memuat semua file CSS Anda sekaligus. Ini dapat sangat memperlambat situs web Anda, tergantung pada jumlah file CSS yang Anda impor. Juga, ketika Anda menggunakan @import untuk memasukkan file CSS tambahan, itu membuat permintaan HTTP tambahan, permintaan tambahan untuk ditangani oleh browser pengunjung Anda.

Fungsi CSS @import memungkinkan untuk menyertakan file CSS eksternal dalam dokumen. Ini dapat digunakan sebagai cara untuk mengimpor skrip CSS dalam tag stylesheet dalam dokumen HTML atau untuk menambahkan aturan tambahan dalam file CSS, CSS @import dapat digunakan baik di halaman HTML (dalam tag style) atau di file CSS. Salah satu karakteristik utama adalah Anda selalu menemukannya di baris teratas skrip CSS; @import harus digunakan di posisi itu.

Di halaman HTML kode @import biasanya terlihat seperti ini:

<style type="text/css">
@import url("cssfile.css");
a {color : #000; }
# more CSS rules below #
</style>

Dalam file CSS Anda biasanya dapat menemukannya di baris atas dokumen yang terlihat seperti ini:

@import url("cssfile.css");

Yang pertama harus Anda lakukan adalah menghapus semua aturan @import dari kode CSS Anda. Kemudian Anda membuka semua file CSS yang Anda gunakan untuk halaman web (juga yang tidak Anda gunakan @import), salin dan tempel semua kode di dalam file tersebut, gabungkan semuanya dalam satu skrip CSS besar dan panggil dari a Header HTML dalam tag style ( hal yang sama dapat dilakukan dengan Javascript ).

Menggabungkan semua skrip CSS dalam satu skrip yang lebih besar dan memasukkannya ke dalam markup HTML adalah cara terbaik untuk menangani skrip CSS dalam hal kecepatan halaman. Tidak ada alasan untuk memanggil file CSS terpisah (atau bahkan satu file), kecuali situs Anda menggunakan skrip CSS yang sangat besar.