Kode CSS efisien yang biasa digunakan dalam pekerjaan

Ada empat metode pemilihan yang paling umum digunakan,

pemilihan aturan Id, seperti

mengutip konten

button#button{}

#urlBar[type="text"] { }

div > p > span#demo{}

Pemilihan aturan kelas, seperti

mengutip content

button.toolbarButton { }

.fancyText { }

menuitem > .menu-left[checked="true"] { }

Pemilihan aturan tag, seperti

mengutip content

td { }

div > p {} }

input[ type= "checkbox"] {} }

Penyeleksi seragam, seperti

konten referensi

*

: setelah

[hidden="true"]

Semuanya mulai cocok dari paling kanan hingga akhir seluruh aturan di paling kiri.

Ada masalah, misal rule paling kanan sudah bisa menentukan elemen yang ingin dipilih.

Semakin banyak aturan yang cocok akan menyebabkan pemborosan kinerja.

Misalnya, div > p > span#demo{}

div > p > span tidak masuk akal sama sekali.

Peningkatan:

ID bersifat unik. Tidak perlu melampirkan aturan yang mubazir. Itu juga dapat dicocokkan secara akurat.

Kutip konten

button#button{} -> #button{}

#urlBar[type="text"] { } -> #urlBar{}

div > p > span#demo{} -> #demo{}

Yang berikut ini tidak akan muncul Jadi bisa juga dioptimasi.

Mengutip konten

button.toolbarButton {} -> .toolbarButton{}

baik

memberikan elemen kelas secara langsung

. Cukup tulis kelas untuk a secara langsung.

Situasi khusus memerlukan perlakuan khusus.

Misalnya, terkadang Anda perlu memastikan struktur halaman bersih. Cara ini digunakan untuk memenuhi kebutuhan revisi selanjutnya. Itu juga mungkin. Temukan solusi terbaik secara seimbang.

Gunakan warisan

#demo .left{text-align:left} ->#demo{text-align:left}

Catatan: XUL digunakan pada artikel asli aneh, tapi tidak sulit untuk dipahami.