Group Multiple CSS Selectors untuk Meningkatkan Kecepatan Beban
Efisiensi merupakan faktor penting dalam situs web yang sukses. Situs itu harus efisien dalam cara menggunakan gambar online . Ini akan membantu memastikan bahwa situs berkinerja baik untuk pengunjung dan memuat dengan cepat di perangkat mereka. Efisiensi juga harus menjadi bagian dari proses Anda secara keseluruhan, membantu Anda untuk membuat kemajuan situs tepat waktu dan sesuai anggaran.
Pada akhirnya, efisiensi memainkan peran dalam semua aspek pembuatan situs web dan kesuksesan jangka panjang, termasuk dalam gaya yang ditulis untuk lembar CSS situs tersebut. Mampu membuat file CSS yang lebih bersih dan lebih bersih sangat ideal, dan salah satu cara yang dapat Anda capai adalah dengan mengelompokkan beberapa pemilih CSS bersama.
Pengelompokan Pemilih
Saat Anda mengelompokkan pemilih CSS , Anda menerapkan gaya yang sama ke beberapa elemen yang berbeda tanpa mengulangi gaya di lembar gaya Anda. Daripada memiliki dua atau tiga atau bahkan lebih banyak aturan CSS, yang semuanya melakukan hal yang sama (contoh, atur warna sesuatu menjadi merah), Anda memiliki aturan CSS tunggal yang dicapai untuk halaman Anda.
Ada sejumlah alasan mengapa "pengelompokan pemilih" ini menguntungkan halaman. Pertama-tama, style sheet Anda akan lebih kecil dan memuat lebih cepat. Harus diakui, style sheet bukan salah satu penyebab utama ketika datang ke situs loading yang lambat. File CSS adalah file teks, sehingga bahkan lembar CSS yang sangat panjang berukuran kecil, dengan ukuran file yang bijaksana, jika dibandingkan dengan gambar yang tidak dioptimalkan. Namun, setiap jumlah sedikit, dan jika Anda dapat mencukur beberapa ukuran CSS Anda dan memuat halaman yang jauh lebih cepat, itu selalu merupakan hal yang baik untuk dilakukan.
Secara umum, kecepatan muat rata-rata di atas untuk situs kurang dari 3 detik; 3 hingga 7 detik adalah tentang rata-rata, dan lebih dari 7 detik terlalu lambat. Angka-angka yang rendah ini berarti bahwa, untuk mencapainya dengan situs Anda, Anda perlu melakukan semua yang Anda bisa! Inilah sebabnya mengapa Anda dapat membantu menjaga situs Anda dengan cepat menggunakan pemilih CSS yang dikelompokkan.
Bagaimana Memilih Penyeleksi CSS Kelompok
Untuk mengelompokkan pemilih CSS bersama-sama dalam style sheet Anda, Anda menggunakan koma untuk memisahkan beberapa pemilih yang dikelompokkan dalam gaya. Dalam contoh di bawah ini, gaya mempengaruhi elemen p dan div:
div, p {color: # f00; }Koma pada dasarnya berarti "dan". Jadi pemilih ini berlaku untuk semua elemen paragraf DAN semua elemen pembagian. Jika koma hilang, itu akan menjadi semua elemen paragraf yang merupakan anak dari sebuah divisi. Itu adalah pemilih yang sangat berbeda, jadi koma ini benar-benar mengubah arti pemilih!
Setiap bentuk pemilih dapat dikelompokkan dengan pemilih lain. Dalam contoh ini, pemilih kelas dikelompokkan dengan pemilih ID:
p.red, #sub {color: # f00; }Jadi gaya ini berlaku untuk setiap paragraf dengan atribut kelas "merah", DAN elemen apa pun (karena kami tidak menentukan jenis apa) yang memiliki atribut ID "sub".
Anda dapat mengelompokkan sejumlah pemilih secara bersamaan, termasuk pemilih yang merupakan kata tunggal dan pemilih pemilih. Contoh ini mencakup empat pemilih berbeda:
p, .red, #sub, div a: tautan {color: # f00; }Jadi aturan CSS ini akan berlaku untuk yang berikut:
- Elemen paragraf apa pun
- Elemen apa pun dengan kelas "merah"
- Elemen apa pun dengan ID "sub"
- Unsur "pseudo" dari elemen anchor yang merupakan bagian dari pembagian.
Pemilih terakhir adalah pemilih senyawa. Anda dapat melihatnya dengan mudah dikombinasikan dengan pemilih lain dalam aturan CSS ini. Dengan aturan itu, kami menetapkan warna # f00 (yang berwarna merah) pada 4 pemilih ini, yang lebih disukai untuk menulis 4 pemilih terpisah untuk mencapai hasil yang sama.
Manfaat lain dari pengelompokan pemilih adalah bahwa, jika Anda perlu membuat perubahan, Anda dapat mengedit satu aturan CSS saja, bukan yang ganda. Ini berarti bahwa pendekatan ini menghemat waktu dan berat halaman Anda ketika datang untuk mempertahankan situs di masa depan.
Setiap Selector Dapat Dikelompokkan
Seperti yang Anda lihat dari contoh di atas, setiap pemilih valid dapat ditempatkan dalam grup, dan semua elemen dalam dokumen yang cocok dengan semua elemen yang dikelompokkan akan memiliki gaya yang sama berdasarkan pada properti gaya tersebut.
Sebagian orang lebih suka mencantumkan elemen yang dikelompokkan pada baris terpisah untuk keterbacaan dalam kode. Penampilan di situs web dan kecepatan pemuatan tetap sama. Misalnya, Anda dapat menggabungkan gaya yang dipisahkan oleh koma menjadi satu properti gaya dalam satu baris kode:
th, td, p.red, div # firstred {color: red; }
atau Anda dapat mencantumkan gaya pada masing-masing baris untuk kejelasan:
th,
td,
p.red,
div # diaktifkan
{
warna merah;
}
Metode apa pun yang Anda gunakan untuk mengelompokkan beberapa pemilih CSS mempercepat situs Anda dan membuatnya lebih mudah untuk mengelola gaya jangka panjang.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 5/8/17.