Cara menggunakan kad bebas pemilih CSS dengan betul

Cara mengelakkan penyalahgunaan kad bebas pemilih CSS

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk reka bentuk dan penggayaan web. Kad bebas pemilih CSS ialah pemilih khas yang sepadan dengan semua atribut elemen tertentu dan elemen anaknya. Apabila menggunakan pemilih CSS, penyalahgunaan kad bebas boleh menyebabkan pemilih yang terlalu luas, prestasi yang lemah dan kod yang kurang boleh diselenggara. Artikel ini menerangkan cara untuk mengelakkan penyalahgunaan kad bebas pemilih CSS dan menyediakan contoh kod khusus.

1. Gunakan pemilih yang lebih khusus
   Pemilih kad bebas (*) boleh memadankan mana-mana elemen pada halaman, tetapi pemilih sedemikian sangat luas dan akan memilih setiap elemen pada halaman. Untuk mengelakkan pemilihan yang tidak perlu, anda harus cuba menggunakan pemilih yang lebih khusus. Contohnya, jika anda hanya mahu memilih elemen tertentu dengan nama kelas "contoh" pada halaman, anda boleh menggunakan pemilih [class="example"].

[class="example"] {
  /* 样式设置 */
}

2. Elakkan penggunaan kad bebas yang berlebihan dalam pemilih berbilang peringkat
   Apabila menggunakan pemilih berbilang peringkat, anda harus cuba mengelak daripada menggunakan kad bebas dalam setiap peringkat pemilih. Ini meningkatkan kerumitan pemilih dan mungkin memilih elemen yang tidak diingini. Dalam pemilih berbilang peringkat, kad bebas hendaklah dihadkan pada tahap terakhir untuk mengelakkan daripada memilih elemen yang tidak perlu.

.parent .child * {
  /* 样式设置 */
}

Dalam kod di atas, kami mengehadkan aksara kad bebas kepada pemilih terakhir untuk mengelak daripada menggunakan aksara kad bebas pada setiap peringkat.

3. Gunakan nama kelas atau pemilih ID
   Nama kelas dan pemilih ID ialah pemilih yang paling biasa digunakan dalam CSS, ia lebih khusus dan boleh memilih elemen yang diperlukan dengan lebih tepat. Berbanding dengan pemilih kad bebas, menggunakan nama kelas atau pemilih ID boleh mengurangkan kerumitan pemilih dan meningkatkan kebolehbacaan kod.

.exampleClass {
  /* 样式设置 */
}

#exampleId {
  /* 样式设置 */
}

4. Gunakan pemilih kanak-kanak atau bersebelahan
   Pemilih kanak-kanak (>) dan pemilih bersebelahan (+) boleh mengehadkan skop pemilih untuk hanya memilih kanak-kanak tertentu atau elemen bersebelahan. Ini mengelakkan penyalahgunaan pemilih kad bebas dan juga meningkatkan prestasi pemilih.

.parent > .child 
/* 只选择直接子元素 */

.element + .sibling
/* 只选择相邻元素 */

5. Gaya pemuatan malas atau menggunakan cache penyemak imbas
   Kadangkala untuk mencapai kesan tertentu, anda mungkin perlu menggunakan pemilih yang lebih kompleks. Untuk mengelakkan pemuatan halaman yang perlahan, anda boleh dengan malas memuatkan gaya ini atau menggunakan cache penyemak imbas untuk memuatkan gaya hanya apabila diperlukan.

<script>
  // 等页面加载完成后再加载样式
  window.onload = function() {
    var styleTag = document.createElement('style');
    styleTag.innerHTML = `
      .complicated-selector {
        /* 样式设置 */
      }
    `;
    document.head.appendChild(styleTag);
  };
</script>

Dalam contoh di atas, gaya akan ditambah secara dinamik pada halaman selepas halaman dimuatkan, mengelakkan pengaruh gaya semasa proses pemuatan halaman.

Ringkasan:
Menyalahgunaan kad bebas pemilih CSS boleh menyebabkan pemilih yang terlalu luas, prestasi merosot dan kebolehselenggaraan kod yang berkurangan. Untuk mengelakkan penggunaan kad bebas secara berlebihan, kami boleh menggunakan pemilih yang lebih khusus, mengelakkan penggunaan kad liar yang berlebihan dalam pemilih berbilang peringkat, menggunakan nama kelas atau pemilih ID, menggunakan sub-pemilih atau pemilih bersebelahan, gaya memuatkan malas atau memanfaatkan caching penyemak imbas untuk meningkatkan gaya pemuatan dan prestasi halaman.

Melalui penggunaan pemilih yang munasabah, kami boleh mengawal skop gaya aplikasi dengan lebih baik dan meningkatkan kebolehbacaan dan kebolehselenggaraan kod. Pada masa yang sama, ia juga boleh memastikan pengoptimuman kelajuan dan prestasi memuatkan halaman.

Atas ialah kandungan terperinci Cara menggunakan kad bebas pemilih CSS dengan betul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!