Kumpulan Multiple CSS Selectors untuk Meningkatkan Beban Beban
Kecekapan adalah faktor penting dalam laman web yang berjaya. Tapak itu perlu menjadi cekap bagaimana ia menggunakan imej dalam talian . Ini akan membantu memastikan laman web ini berfungsi dengan baik untuk pelawat dan memuatkan dengan cepat pada peranti mereka. Kecekapan juga harus menjadi sebahagian daripada proses keseluruhan anda, membantu anda untuk memastikan kemajuan tapak tepat pada masanya dan pada anggaran.
Pada akhirnya, kecekapan memainkan peranan dalam semua aspek penciptaan laman web dan kejayaan jangka panjang, termasuk dalam gaya yang ditulis untuk lembaran CSS laman web tersebut. Mampu mencipta fail CSS bersih lebih bersih dan ideal, dan salah satu daripada cara yang anda boleh mencapai ini adalah dengan mengumpulkan beberapa pemilih CSS bersama-sama.
Pemilih Pengumpulan
Apabila anda menyusun pemilih CSS , anda menggunakan gaya yang sama kepada beberapa elemen yang berbeza tanpa mengulangi gaya dalam helaian gaya anda. Daripada mempunyai dua atau tiga atau lebih peraturan CSS, semua yang melakukan perkara yang sama (misalnya, tetapkan warna sesuatu kepada merah), anda mempunyai satu aturan CSS yang dapat dicapai untuk halaman anda.
Terdapat beberapa sebab mengapa "kumpulan pemilih" ini memberi manfaat kepada halaman. Pertama, helaian gaya anda akan lebih kecil dan memuat lebih cepat. Diakui, lembaran gaya bukanlah salah satu penyebab utama ketika datang ke laman loading lambat. Fail CSS adalah fail teks, jadi walaupun lembaran CSS yang panjang adalah kecil, saiz fail bijak, berbanding dengan imej yang tidak dimodifikasi. Walau bagaimanapun, setiap tuduhan kecil, dan jika anda boleh mencukur beberapa saiz CSS anda dan memuatkan halaman yang lebih cepat, itu sentiasa menjadi perkara yang baik untuk dilakukan.
Secara umum, kelajuan beban purata di atas tapak adalah kurang dari 3 saat; 3 hingga 7 saat adalah kira-kira purata, dan lebih daripada 7 saat terlalu perlahan. Nombor-nombor ini bermakna bahawa, untuk mencapai mereka dengan laman web anda, anda perlu melakukan semua yang anda boleh! Inilah sebabnya mengapa anda boleh membantu laman web anda dengan cepat menggunakan pemilih CSS berkumpulan.
Bagaimana Pelukis CSS Kumpulan
Untuk menyusun pemilih CSS bersama-sama dalam helaian gaya anda, anda menggunakan koma untuk memisahkan beberapa pemilih berkumpulan dalam gaya. Dalam contoh di bawah, gaya mempengaruhi elemen p dan div:
div, p {color: # f00; }Koma pada asasnya bermaksud "dan". Oleh itu pemilih ini terpakai kepada semua elemen perenggan DAN semua unsur pembahagian. Sekiranya koma hilang, ia akan menjadi semua elemen perenggan yang merupakan anak dari satu bahagian. Itulah pemilih yang sangat berbeza, jadi koma ini benar-benar mengubah makna pemilih!
Apa-apa bentuk pemilih boleh dikumpulkan dengan pemilih lain. Dalam contoh ini, pemilih kelas dikumpulkan dengan pemilih ID:
p.red, #sub {color: # f00; }Maka gaya ini terpakai kepada mana-mana perenggan dengan atribut kelas "merah", DAN mana-mana unsur (kerana kami tidak menyatakan jenisnya) yang mempunyai atribut ID "sub".
Anda boleh mengumpulkan sejumlah pemilih bersama, termasuk pemilih yang merupakan kata tunggal dan pemilih kompund. Contoh ini termasuk empat pemilih berbeza:
p, .red, #sub, div a: link {color: # f00; }Jadi peraturan CSS ini akan dikenakan kepada yang berikut:
- Mana-mana unsur perenggan
- Mana-mana elemen dengan kelas "merah"
- Mana-mana elemen dengan ID "sub"
- "Pautan" pseudo kelas unsur-unsur anchor yang putuskan pembahagian.
Pemilih terakhir ialah pemilih gabungan. Anda dapat melihatnya dengan mudah digabungkan dengan pemilih lain dalam peraturan CSS ini. Dengan peraturan itu, kami menetapkan warna # f00 (yang berwarna merah) pada 4 pemilih ini, yang lebih baik untuk menulis 4 pemilih berasingan untuk mencapai hasil yang sama.
Keuntungan lain dari pemilih kumpulan ialah, jika anda perlu membuat perubahan, anda boleh mengedit satu peraturan CSS tunggal bukannya berbilang. Ini bermakna bahawa pendekatan ini dapat menjimatkan berat badan dan masa laman anda untuk mengekalkan tapak pada masa akan datang.
Mana-mana pemilih boleh dikelompokkan
Seperti yang anda dapat lihat dari contoh di atas, mana-mana pemilih yang sah boleh diletakkan dalam kumpulan, dan semua unsur dalam dokumen yang sepadan dengan semua unsur berkumpulan akan mempunyai gaya yang sama berdasarkan sifat gaya itu.
Sesetengah orang lebih suka menyenaraikan unsur-unsur terkumpul pada garisan berasingan untuk kelayakan dalam kod. Penampilan di laman web dan kelajuan beban tetap sama. Sebagai contoh, anda boleh menggabungkan gaya yang dipisahkan oleh koma menjadi satu gaya gaya dalam satu baris kod:
th, td, p.red, div # firstred {color: red; }
atau anda boleh menyenaraikan gaya pada baris individu untuk kejelasan:
th,
td,
p.red,
div # firstred
{
warna: merah;
}
Sama ada kaedah yang anda gunakan untuk mengelompokkan pemilih CSS berganda mempercepatkan laman web anda dan menjadikannya lebih mudah untuk mengurus gaya jangka panjang.
Artikel asal oleh Jennifer Krynin. Disunting oleh Jeremy Girard pada 5/8/17.