CSS Singkatan vs Longhand - Kapan Menggunakan Yang

Singkatan dan Longhand - satu ringkas dan tepat tepat. Yang satu muncul karena keinginan untuk singkat, sementara yang lain berdiri teguh untuk menjaga kejelasan. Either way, mereka memiliki tujuan, pro dan kontra, sehingga untuk berbicara.

Posting ini akan menyoroti beberapa notasi singkat CSS dan notasi lama, sambil menyimpulkan mana yang terbaik untuk digunakan untuk situasi yang mana.

Apa itu Properti Singkat?

Properti singkatan adalah properti yang mengambil nilai untuk set properti CSS lainnya. Misalnya, kita dapat menetapkan nilai untuk lebar perbatasan, gaya perbatasan dan warna perbatasan menggunakan berbatasan properti sendiri.

Pada dasarnya,

 perbatasan: 1px biru solid; 

sama dengan:

 lebar-perbatasan: 1px; gaya perbatasan: solid; warna perbatasan: biru;

Dengan ini, kita tidak harus mendeklarasikan nilai properti individual secara terpisah (yang berlebihan, menghabiskan waktu dan ruang). Itu juga me-reset properti yang ditinggalkan dalam deklarasi, sesuatu yang bisa dimanfaatkan.

bagaimana cara kerjanya?

Seperti yang disebutkan sebelumnya, kami menulis satu set nilai properti lainnya di steno, urutannya tidak masalah jika semua nilai properti di steno dari jenis yang berbeda seperti di berbatasan. Untuk properti dengan jenis nilai yang serupa seperti margin, pesanan itu penting. Jika ragu, ingat searah jarum jam!

Sekarang, bagaimana jika kita melewatkan satu atau dua properti dalam deklarasi? Dalam contoh di atas, katakanlah kita mengabaikan gaya perbatasan.

 perbatasan: 1px biru; 

Kami tidak akan dapat melihat perbatasan lagi, bukan karena properti steno tidak berfungsi tetapi karena gaya perbatasan yang kami tinggalkan, mendapat nilai default tidak ada. Ini adalah bagaimana properti steno itu dirender.

 perbatasan: 1px tidak ada biru; 

Sekarang mari kita jatuhkan 1px untuk lebar perbatasan dan simpan dua lainnya:

 perbatasan: biru pekat;

Kami akan dapat melihat perbatasan, hanya dengan lebar lebih tebal dan itu karena lebar perbatasan properti mendapat nilai default medium.

 perbatasan: biru solid sedang; 

Ini menyimpulkan bagi kita itu ketika nilai properti ditinggalkan dalam deklarasi steno, properti itu mengambil nilai standarnya (bahkan jika harus mengganti nilai sebelumnya yang ditetapkan untuk hal yang sama).

Jika ada lebar-perbatasan: 1px; untuk elemen di suatu tempat sebelumnya perbatasan: biru pekat; untuk hal yang sama, lebar perbatasan akan menjadi medium (nilai default), bukan 1px.

Hal lain yang layak disebutkan adalah itu kita tidak bisa menggunakan nilai seperti mewarisi, awal atau tidak disetel, yang tersedia untuk semua properti CSS, dalam notasi steno. Jika kita menggunakan itu, browser tidak akan dapat mengetahui dengan tepat properti mana yang seharusnya diwakili oleh nilai dalam steno - seluruh deklarasi akan dibatalkan.

Itu semua milik

Ada satu properti singkatan CSS yang bisa atur nilai untuk semua properti CSS. Nilai CSS-wide mewarisi, awal dan tidak disetel berlaku untuk semua properti dan karenanya ini adalah satu - satunya nilai yang diterima oleh semua milik.

 div all: initial

Ini akan membuat div selokan elemen SEMUA nilai properti CSS yang dimilikinya, dan setel ulang nilai default di masing-masingnya.

⚠ Peringatan

Jangan menyalahgunakan semua milik. Kebutuhan untuk itu mungkin timbul hanya dalam keadaan yang sangat langka, ketika kita tidak dapat menyentuh kode CSS sebelumnya dari suatu elemen yang ingin kita terapkan pada properti ini..

catatan: Properti CSS warna mengambil nilai heksadesimal dengan notasi steno jika dua angka dari nilai hex di setiap saluran warna adalah sama. Sebagai contoh, latar belakang: # 445599; sama dengan latar belakang: # 459;.

Apa itu properti bekas pakai?

Itu sifat individu yang dapat dimasukkan dalam properti steno disebut properti tangan-panjang. Beberapa contoh adalah; gambar latar belakang, margin-kiri, durasi animasi, dll.

Kenapa kita harus menggunakannya?

Meskipun alternatif tulisan cepat berguna, mereka memiliki kelemahan. Ingat pada awalnya kita melihat bagaimana tulisan cepat menimpa setiap properti yang ditinggalkan dengan nilai defaultnya? Ini bisa menjadi masalah jika pengaturan ulang tidak diinginkan.

Ambil saja fonta properti steno misalnya. Mari kita gunakan di h4 elemen (yang memiliki gaya browser default font-weight: bold)

 font: 20px "kurir baru"; 

Dalam kode steno di atas, tidak ada nilai untuk font-berat properti, karenanya font-weight: bold(gaya default browser) akan diganti dengan nilai default font-weight: normal menyebabkan h4 elemen kehilangan gaya berani, yang mungkin tidak dimaksudkan.

Jadi, untuk contoh di atas sederhana dua sifat lama, ukuran huruf dan font-keluarga sempurna.

Juga, menggunakan singkatan untuk hanya menetapkan satu atau dua nilai properti tidak terlalu berguna. Mengapa memberi peramban kerja ekstra untuk menginterpretasikan setiap properti tunggal (termasuk properti yang ditinggalkan) di tulisan cepat, padahal hanya satu yang dibutuhkan untuk bekerja?

Selain produksi, selama tahap pengembangan, beberapa pengembang (terutama pemula) mungkin menemukan menggunakan notasi lama jauh lebih mudah untuk dikerjakan daripada steno untuk keterbacaan dan kejelasan yang lebih baik.

Kesimpulan

Saat ini dengan kemungkinan pengkodean cepat (dengan bantuan alat-alat seperti Emmet) dan minifikasi, keandalan yang tinggi pada tulisan cepat tidak diperlukan, tetapi pada saat yang sama, sangat logis untuk mengetik margin: 0;. Konteks di mana kami lebih suka notasi CSS kami akan bervariasi dan yang harus kita lakukan adalah mencari tahu notasi apa yang paling cocok untuk kita dan kapan.