css - gunakan pemilih '*' universal vs. pemilih html atau badan?

Menerapkan gaya pada tag tubuh akan diterapkan ke seluruh halaman, jadi

body { font-family: Verdana }

akan diterapkan ke seluruh halaman. Ini juga bisa dilakukan dengan

* {font-family: Verdana} 

yang akan berlaku untuk semua elemen dan sepertinya akan memiliki efek yang sama.

Saya memahami prinsip bahwa pada contoh pertama gaya diterapkan ke satu tag, badan untuk seluruh halaman sedangkan dalam contoh kedua font sedang diterapkan terhadap setiap elemen html individu. Apa yang saya tanyakan adalah apa perbedaan praktis dalam melakukan itu, apa implikasinya dan apa alasannya, situasi atau praktik terbaik yang mengarah pada penggunaan satu sama lain.

Satu efek samping tentunya kecepatan (+1 Rob). Saya paling tertarik pada alasan sebenarnya untuk memilih satu dari yang lain dalam hal fungsi.

Perbedaan fungsional antara dua pilihan pemilih CSS ini ... (my take)

tubuh

• Menerapkan properti gaya ke elemen tubuh.
• Elemen di dalam tubuh dapat mewarisi nilai properti. Beberapa properti bawaan untuk 'mewarisi'.
• Deklarasi gaya yang cocok dengan elemen dalam tubuh dapat menimpa gaya yang diwarisi.

Pemilih Universal * (semua elemen)

• Menerapkan properti gaya ke semua elemen individu.
• Mengganti properti gaya warisan, dan 'nilai awal' default. Memblokir warisan.
• Selektor css lain yang lebih spesifik yang cocok dengan elemen akan menggantikan properti gaya yang diterapkan oleh *.

Saran

1. Gunakan badan untuk properti gaya yang default untuk mewarisi, seperti font, warna, untuk memberikan nilai default yang masuk akal untuk elemen, mengurangi kebutuhan untuk kode secara eksplisit untuk setiap kasus, dan menjaga kemampuan untuk elemen yang terkandung di tingkat yang lebih rendah di bawah tubuh untuk mewarisi dari orang tua mereka.
2. Mungkin lebih baik tidak menggunakan Pemilih Universal * dalam hal ini. Ini mengganggu warisan antara elemen-elemen lain di dalam tubuh, dan mungkin memaksa Anda untuk menulis lebih banyak aturan css sebagai kompensasi. Ini bisa menjadi faktor dalam memperlambat rendering halaman. Ini tergantung pada ukuran dan isi halaman dan berapa banyak aturan css yang ada.

Coba sesuatu seperti ini

body { font-family: Verdana }
table { font-family: Arial }

melawan

* { font-family: Verdana }
table { font-family: Arial }

Dan lihat gaya mana yang diterapkan pada sel-sel tabel.

Ada perbedaan antara "diterapkan pada seluruh dokumen" dan "diterapkan pada setiap elemen dokumen" ketika Anda berurusan dengan stylesheet cascading .

Menerapkan gaya kaskade ke badan menerapkannya ke semua tag di dalam tubuh sampai tag menimpa itu. Kemudian gaya yang ditimpa diterapkan ke semua tag di dalamnya.

Namun, ada beberapa gaya yang tidak kaskade, seperti margin dan padding (biasanya tidak masuk akal). Itu hanya dapat diterapkan pada tag tertentu dan di situlah wildcard dapat berguna (walaupun jarang).

Sebagian besar gaya non-cascading juga memiliki nilai inherit (mis. margin: inherit), Yang berarti "ambil nilai tag induk".

Saya lupa detail lengkapnya tetapi, dengan pemilih *, kinerjanya melambat karena setiap elemen dievaluasi saat peramban mem-parsing CSS dan menerapkan gaya. iirc, mengatur font, dalam hal ini, hanya orang tua membuat satu referensi untuk setiap elemen dan pekerjaan tambahan tidak diperlukan.

Ada beberapa masalah lain juga, tetapi, sekali lagi, saya tidak ingat semuanya dan belum pernah menggunakan * selama bertahun-tahun.

Pedoman umum untuk desain CSS yang baik adalah sespesifik mungkin, tetapi tidak lebih.

Jadi, dalam contoh Anda, menerapkan gaya ke elemen tubuh akan sespesifik mungkin dan tentu saja lebih spesifik daripada pemilih '*'.

Seperti orang lain telah disebutkan, body { font-family: Verdana }akan memilih font Verdena hanya unsur-unsur yang mewarisi para font-styleproperti dari orang tuanya sehingga semua orang tua yang terlalu mewarisi properti eventualy membentuk bodyelemen, dan, * {font-family: Verdana}akan memilih font Verdena untuk semua elemen. Saya ingin menggambarkan perbedaannya dengan sebuah contoh:

Menggunakan pemilih tubuh:

body 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Not Courier :("> 
</form>

Menggunakan universal selelctor *:

* 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Courier :)"> 
</form>

Gunakan kode css dan html dari contoh yang Anda akan mengenali bahwa <input>elemen tidak mewarisi gaya font sama sekali dan karenanya apa pun yang Anda ketikkan ke dalam formulir mendapatkan gaya font default dari lembar gaya agen pengguna. Dalam contoh kedua pemilih universal *secara eksplisit menetapkan gaya font untuk setiap elemen termasuk inputelemen.