Ringkaslah beberapa pengalaman menulis CSS yang telah saya pelajari, dengarkan, tonton dan tanyakan, dan tulis CSS yang efisien - bicarakan tentang efisiensi rendering CSS, yang terkait dengan efisiensi rendering dan sumber daya yang dikonsumsi. Sebagian ditulis berdasarkan pemahaman saya sendiri. Tidak menutup kemungkinan ada kesalahan dan kekurangan. Anda dipersilakan untuk memberikan pendapat yang lebih baik.
1. Digit dan huruf besar/kecil nilai warna heksadesimal
Saat menulis nilai warna heksadesimal, Anda dapat menggunakan huruf kecil atau menghilangkannya menjadi 3 digit. Tidak ada data konklusif untuk membuktikan apakah metode penulisan ini berdampak pada efisiensi rendering browser, tetapi standar default untuk nilai warna heksadesimal adalah Ini adalah huruf besar dan angka 6 digit. Tidak ingin mengambil risiko dalam situasi yang tidak diketahui akan mengurangi efisiensi rendering.
* Tidak disetujui - warna:#f3a;
* Disarankan untuk menggunakan - warna:#FF33AA;
2. Perbedaan antara tampilan dan visibilitas
Mereka digunakan untuk mengatur atau mengambil apakah objek ditampilkan. Menampilkan objek tersembunyi tidak mempertahankan ruang fisik, dan visibilitas mempertahankan ruang fisik yang ditempati oleh objek tersembunyi. Saat browser merender ruang fisik yang ditempati, sumber daya akan dikonsumsi.
* Tidak berlaku lagi - visibilitas: tersembunyi;
* Dianjurkan untuk menggunakan - display:none;
3. Perbedaan antara border:none; dan border:0;
Mirip dengan hubungan antara tampilan dan visibilitas, ruang masing-masing tidak dicadangkan dan dicadangkan. Lebih lanjut tentang perbatasan:0; Meskipun perbatasan dapat disembunyikan, penggunaan warna perbatasan/gaya perbatasan akan tetap dipertahankan untuk Anda.
* Tidak disetujui - batas:0;
* Disarankan untuk menggunakan - border:none;
4. Gambar latar belakang yang terlalu kecil sebaiknya tidak dibuat ubin.
Meskipun ukuran file gambar latar belakang dengan lebar dan tinggi 1 piksel sangat kecil, namun rendering panel dengan lebar dan tinggi 500 piksel memerlukan ubin berulang sebanyak 2500 kali. Meningkatkan efisiensi rendering gambar latar belakang terkait dengan ukuran dan volume gambar. Ukuran file gambar terbesar tetap sekitar 70KB.
* Tidak Disetujui - Ubin gambar latar belakang dengan lebar dan tinggi di bawah 8 piksel
* Direkomendasikan untuk digunakan - gambar latar belakang dengan ukuran dan ukuran sedang
5. Filter IE
Selain memakan sumber daya, filter IE juga memiliki masalah kompatibilitas. Ada filter yang membuat PNG menjadi transparan. Anda dapat menghindari penggunaan filter ini dengan membuat GIF atau JPG tampak transparan. Disarankan untuk hanya menggunakan transparansi GIF di IE6, karena IE7 ke atas sudah mendukung transparansi PNG.
* Penolakan, penyalahgunaan filter IE tidak hanya menghabiskan sumber daya tetapi juga menyebabkan masalah kompatibilitas.
* Direkomendasikan, sebaiknya pilih metode lain untuk menghindari penggunaan filter.
6. *{margin:0; padding:0;} untuk menghindari perbedaan gaya browser
Karakter pengganti * menginisialisasi semua tag, dan rendering browser menggunakan sumber daya tertentu. Beberapa tag hampir sama di browser yang berbeda, atau beberapa tag tidak lagi direkomendasikan (karena Anda tidak akan menggunakannya). Tag tersebut tidak memerlukan wildcard untuk diinisialisasi ulang.
* Tidak berlaku lagi, gunakan * wildcard
* Tidak disetujui, tabel b tombol rentang div dan tag lainnya harus disertakan dalam wildcard untuk mengontrol gaya pengisian internal dan eksternal
* Disarankan untuk menggunakan wildcard secara selektif untuk mengontrol gaya isian dalam dan luar.
7. Jangan menambahkan tag tambahan untuk mendeskripsikan kelas atau id
Jika Anda memiliki pemilih yang menggunakan id sebagai pemilih kunci, mohon jangan menambahkan nama tag tambahan. Karena ID bersifat unik, Anda tidak boleh mengurangi efisiensi pencocokan karena alasan yang tidak ada.
* Tidak berlaku lagi - button#backButton { }
* Tidak berlaku lagi - .menu-left #newMenuIcon { }
* Direkomendasikan untuk menggunakan - #backButton {}
* Disarankan untuk menggunakan - #newMenuIcon {}
8. Usahakan untuk memilih kelas yang paling khusus untuk menyimpan selector
Salah satu alasan terbesar penurunan efisiensi sistem adalah kami menggunakan terlalu banyak penyeleksi di kelas tag. Dengan menambahkan kelas ke elemen, kita dapat membagi lagi kategori ke dalam kelas sehingga kita tidak perlu membuang waktu untuk mencocokkan terlalu banyak penyeleksi untuk satu tag.
* Tidak digunakan lagi - treeitem[mailfolder="true"] > treerow > treecell {}
* Direkomendasikan untuk menggunakan - .treecell-mailfolder {}
9. Hindari penyeleksi keturunan
Pemilih turunan adalah pemilih paling intensif sumber daya di CSS. Ini benar-benar membutuhkan banyak sumber daya, terutama ketika pemilih menggunakan kelas label atau kelas umum. Dalam banyak kasus, yang sebenarnya kita inginkan adalah subselektor. Kecuali dinyatakan secara eksplisit, penggunaan pemilih turunan dilarang keras di UI CSS.
* Tidak digunakan lagi - sel pohon treehead treerow {}
* Lebih baik, tetapi masih tidak berfungsi (lihat artikel berikutnya) - treehead > treerow > treecell {}
10. Jangan sertakan sub-selektor dalam kelas label
Jangan gunakan subselektor di kelas label. Jika tidak, setiap kemunculan elemen akan menambah waktu pencocokan. (Terutama jika pemilihnya sepertinya cocok)
* Tidak digunakan lagi - treehead > treerow > treecell {} }
* Disarankan untuk menggunakan - .treecell-header {}
11. Perhatikan penggunaan seluruh subselektor
Gunakan subselektor dengan hati-hati. Jika Anda bisa memikirkan cara untuk tidak menggunakannya, maka jangan gunakan. Secara khusus, pohon dan menu RDF sering menggunakan subselektor, seperti ini.
* Tidak digunakan lagi - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }
Ingatlah bahwa properti RDF dapat disalin di template! Dengan menggunakan ini, kita dapat menyalin atribut RDF pada elemen anak XUL yang ingin kita ubah berdasarkan atribut tersebut.
* Disarankan untuk menggunakan - .tree-folderpane-icon[IsImapServer="true"] { }