Mengapa tanda hubung lebih disukai untuk pemilih CSS / atribut HTML?

Di masa lalu saya selalu menggunakan garis bawah untuk mendefinisikan atribut kelas dan id dalam HTML. Selama beberapa tahun terakhir saya berubah menjadi garis putus-putus, sebagian besar untuk menyelaraskan diri dengan tren di komunitas , belum tentu karena itu masuk akal bagi saya.

Saya selalu berpikir strip memiliki lebih banyak kekurangan, dan saya tidak melihat manfaatnya:

Penyempurnaan kode & Pengeditan

Sebagian besar editor memperlakukan tanda hubung sebagai pemisah kata, jadi saya tidak bisa menabrak simbol yang saya inginkan. Katakanlah kelasnya adalah " featured-product", saya harus melengkapi otomatis " featured", masukkan tanda hubung, dan selesaikan "product ".

Dengan menggarisbawahi "featured_product " diperlakukan sebagai satu kata, sehingga dapat diisi dalam satu langkah.

Hal yang sama berlaku untuk navigasi melalui dokumen. Melompat dengan kata-kata atau mengklik dua kali pada nama kelas rusak oleh tanda hubung.

(Secara umum, saya menganggap kelas dan id sebagai token , jadi tidak masuk akal bagi saya bahwa token harus begitu mudah dipecah pada tanda hubung.)

Ambiguitas dengan operator aritmatika

Menggunakan tanda hubung memecah akses objek-properti untuk membentuk elemen dalam JavaScript. Ini hanya mungkin dengan menggarisbawahi:

form.first_name.value='Stormageddon';

(Harus diakui saya sendiri tidak mengakses elemen formulir dengan cara ini, tetapi ketika memutuskan tanda hubung vs garis bawah sebagai aturan universal, pertimbangkan bahwa mungkin ada seseorang.)

Bahasa seperti Sass (terutama di seluruh kerangka kerja Kompas ) telah ditetapkan pada garis hubung sebagai standar, bahkan untuk nama variabel. Mereka awalnya menggunakan garis bawah pada awalnya juga. Fakta bahwa ini diurai berbeda menurut saya sebagai aneh:

$list-item-10
$list-item - 10

Inkonsistensi dengan penamaan variabel antar bahasa

Dulu, saya biasa menulis underscored_namesuntuk variabel dalam PHP, ruby, HTML / CSS, dan JavaScript. Ini nyaman dan konsisten, tetapi sekali lagi untuk "cocok" Saya sekarang menggunakan:

• dash-case dalam HTML / CSS
• camelCase dalam JavaScript
• underscore_case dalam PHP dan ruby

Ini tidak terlalu mengganggu saya, tetapi saya bertanya-tanya mengapa ini menjadi begitu tidak selaras, tampaknya sengaja. Setidaknya dengan menggarisbawahi dimungkinkan untuk mempertahankan konsistensi:

var featured_product = $('#featured_product'); // instead of
var featuredProduct = $('#featured-product');

Perbedaan menciptakan situasi di mana kita harus menerjemahkan string tidak perlu, bersama dengan potensi bug.

Jadi saya bertanya: Mengapa komunitas hampir secara universal berselisih, dan adakah alasan yang lebih penting daripada menggarisbawahi?

Ada pertanyaan terkait dari belakang sekitar waktu ini dimulai, tapi saya berpendapat bahwa itu bukan (atau tidak seharusnya ) hanya masalah selera. Saya ingin mengerti mengapa kita semua sepakat pada konvensi ini jika itu hanya masalah selera.

Pelengkapan kode

Apakah tanda hubung ditafsirkan sebagai tanda baca atau sebagai pengenal buram tergantung pada editor pilihan, saya kira. Namun, sebagai preferensi pribadi, saya lebih suka dapat menabrak antara setiap kata dalam file CSS dan akan merasa menjengkelkan jika mereka dipisahkan dengan garis bawah dan tidak ada pemberhentian.

Selain itu, menggunakan tanda hubung memungkinkan Anda untuk mengambil keuntungan dari pemilih atribut | = , yang memilih elemen apa pun yang mengandung teks, secara opsional diikuti oleh tanda hubung:

span[class|="em"] { font-style: italic; }

Ini akan membuat elemen HTML berikut memiliki font-italic style:

<span class="em">I'm italic</span>
<span class="em-strong">I'm italic too</span>

Ambiguitas dengan operator aritmatika

Saya akan mengatakan bahwa akses ke elemen HTML melalui notasi titik dalam JavaScript adalah bug daripada fitur. Ini adalah konstruksi yang mengerikan dari hari-hari awal implementasi JavaScript yang mengerikan dan tidak benar-benar praktik yang hebat. Untuk sebagian besar hal yang Anda lakukan dengan JavaScript hari ini, Anda ingin menggunakan penyeleksi CSS untuk mengambil elemen dari DOM, yang membuat seluruh notasi titik agak tidak berguna. Manakah yang Anda pilih?

var firstName = $('#first-name');
var firstName = document.querySelector('#first-name');
var firstName = document.forms[0].first_name;

Saya menemukan dua opsi pertama jauh lebih disukai, terutama karena '#first-name'dapat diganti dengan variabel JavaScript dan dibangun secara dinamis. Saya juga menemukan mereka lebih menyenangkan di mata.

Fakta bahwa Sass mengaktifkan aritmatika dalam ekstensi ke CSS tidak benar-benar berlaku untuk CSS itu sendiri, tapi saya mengerti (dan merangkul) fakta bahwa Sass mengikuti gaya bahasa CSS (kecuali untuk $awalan variabel, yang tentu saja harus telah @). Jika dokumen Sass ingin terlihat dan terasa seperti dokumen CSS, mereka harus mengikuti gaya yang sama dengan CSS, yang menggunakan tanda hubung sebagai pembatas. Di CSS3, aritmatika terbatas pada calcfungsi, yang menunjukkan bahwa dalam CSS itu sendiri, ini bukan masalah.

Inkonsistensi dengan penamaan variabel antar bahasa

Semua bahasa, menjadi bahasa markup, bahasa pemrograman, bahasa gaya atau bahasa skrip, memiliki gaya mereka sendiri. Anda akan menemukan ini dalam sub-bahasa grup bahasa seperti XML, di mana XSLT menggunakan huruf kecil dengan tanda hubung dan XML Schema menggunakan casing unta.

Secara umum, Anda akan menemukan bahwa mengadopsi gaya yang terasa dan terlihat paling "asli" untuk bahasa yang Anda tulis lebih baik daripada mencoba mengubah gaya Anda sendiri ke dalam setiap bahasa yang berbeda. Karena Anda tidak dapat menghindari keharusan menggunakan pustaka asli dan konstruksi bahasa, gaya Anda akan "dicemari" oleh gaya asli apakah Anda suka atau tidak, jadi cukup sia-sia untuk mencobanya.

Saran saya adalah untuk tidak menemukan gaya favorit lintas bahasa, tetapi sebaliknya membuat diri Anda betah dalam setiap bahasa dan belajar mencintai semua keanehannya. Salah satu kebiasaan CSS adalah bahwa kata kunci dan pengidentifikasi ditulis dalam huruf kecil dan dipisahkan oleh tanda hubung. Secara pribadi, saya menemukan ini sangat menarik secara visual dan saya pikir cocok dengan semua huruf kecil (walaupun tanpa tanda hubung) HTML .

Mungkin alasan utama mengapa komunitas HTML / CSS menyelaraskan diri dengan tanda hubung, bukan garis bawah adalah karena kekurangan historis dalam spesifikasi dan implementasi browser.

Dari dokumen Mozilla yang diterbitkan Maret 2001 @ https://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Names

Spesifikasi CSS1, yang diterbitkan dalam bentuk terakhirnya pada tahun 1996, tidak memungkinkan untuk penggunaan garis bawah pada nama kelas dan ID kecuali mereka "melarikan diri." Garis bawah yang keluar akan terlihat seperti ini:

    p.urgent\_note {color: maroon;}

Ini tidak didukung dengan baik oleh browser pada saat itu, dan praktiknya tidak pernah berhasil. CSS2, yang diterbitkan pada tahun 1998, juga melarang penggunaan garis bawah pada nama kelas dan ID. Namun, kesalahan pada spesifikasi yang diterbitkan pada awal 2001 membuat menggarisbawahi hukum untuk pertama kalinya. Sayangnya ini rumit lanskap yang sudah rumit.

Saya umumnya suka garis bawah tetapi garis miring terbalik hanya membuatnya jelek di luar harapan, belum lagi dukungan yang langka pada saat itu. Saya bisa mengerti mengapa pengembang menghindarinya seperti wabah. Tentu saja, kita tidak memerlukan backslash saat ini, tetapi etiket dasbor sudah mapan.

Saya tidak berpikir ada yang bisa menjawab ini secara definitif, tetapi inilah tebakan saya yang terpelajar:

1. Garis bawah perlu menekan tombol Shift, dan karenanya lebih sulit untuk mengetik.

2. Selektor CSS yang merupakan bagian dari spesifikasi resmi CSS menggunakan tanda hubung (seperti pseudo-class seperti: first-child dan pseudo-elements: first-line), bukan garis bawah. Hal yang sama untuk properti, misalnya dekorasi teks, warna latar belakang, dll. Programmer adalah makhluk kebiasaan. Masuk akal bahwa mereka akan mengikuti gaya standar jika tidak ada alasan untuk tidak melakukannya.

3. Yang ini lebih jauh keluar di langkan, tapi ... Entah itu mitos atau fakta, ada ide lama bahwa Google memperlakukan kata-kata yang dipisahkan oleh garis bawah sebagai satu kata, dan kata-kata yang dipisahkan oleh tanda hubung sebagai kata-kata yang terpisah. (Matt Cutts on Underscores vs. Dashes.) Untuk alasan ini, saya tahu bahwa preferensi saya sekarang untuk membuat URL halaman adalah menggunakan-kata-dengan-tanda hubung, dan bagi saya setidaknya, ini telah menjadi konvensi penamaan saya untuk hal-hal lain. , seperti pemilih CSS.

Ada banyak alasan, tetapi salah satu yang paling penting adalah menjaga konsistensi .

Saya pikir artikel ini menjelaskannya secara komprehensif.

CSS adalah sintaks dibatasi tanda hubung. Dengan ini saya berarti kita menulis hal-hal seperti font-size, line-height, border-bottomdll

Begitu:

Anda seharusnya tidak mencampur sintaksis: tidak konsisten .

Sudah ada peningkatan yang jelas dalam segmen-segmen URL seluruh kata yang dipisahkan tanda hubung selama beberapa tahun terakhir. Ini didorong oleh praktik terbaik SEO. Google secara eksplisit "merekomendasikan agar Anda menggunakan tanda hubung (-) alih-alih menggarisbawahi (_) di URL Anda": http://www.google.com/support/webmasters/bin/answer.py?answer=76329 .

Sebagaimana dicatat, konvensi yang berbeda telah berlaku pada waktu yang berbeda dalam konteks yang berbeda, tetapi mereka biasanya bukan bagian formal dari protokol atau kerangka kerja apa pun.

Hipotesis saya, kemudian, adalah bahwa posisi Google mengaitkan pola ini dalam satu konteks kunci (SEO), dan kecenderungan untuk menggunakan pola ini dalam kelas, id, dan nama atribut hanyalah kawanan yang bergerak perlahan ke arah yang umum ini.

Saya pikir itu adalah hal yang tergantung programmer. Seseorang suka menggunakan tanda hubung, yang lain menggunakan garis bawah.
Saya pribadi menggunakan garis bawah ( _) karena saya juga menggunakannya di tempat lain. Seperti:
- Variabel JavaScript ( var my_name);
- Tindakan pengontrol saya ( public function view_detail)
Alasan lain yang saya gunakan garis bawah, adalah ini yang di sebagian besar IDE dua kata yang dipisahkan oleh garis bawah dianggap sebagai 1 kata. (dan dimungkinkan untuk memilih dengan klik dua kali).