Pertimbangan praktis untuk konvensi penamaan HTML / CSS (sintaksis) [ditutup]

Pertanyaan: apa pertimbangan praktis untuk sintaksis classdan idnilai - nilai?

Perhatikan bahwa saya tidak bertanya tentang semantik , yaitu kata-kata aktual yang digunakan, seperti misalnya dijelaskan dalam blogpost ini . Ada banyak sumber daya di sisi konvensi penamaan, pada kenyataannya mengaburkan pencarian saya untuk informasi praktis tentang berbagai bit sintaksis : casing, penggunaan interpungsi (khusus -dasbor), karakter khusus untuk digunakan atau dihindari, dll.

Singkatnya alasan saya mengajukan pertanyaan ini:

• Pembatasan penamaan pada id dan kelas tidak secara alami mengarah ke konvensi apa pun
• Banyaknya sumber daya di sisi semantik dari konvensi penamaan mengaburkan pencarian pada pertimbangan sintaksis
• Saya tidak dapat menemukan sumber otoritatif tentang ini
• Tidak ada pertanyaan tentang Programmer SE tentang topik ini :)

Beberapa konvensi yang saya pertimbangkan untuk digunakan:

1. UpperCamelCase, terutama sebagai kebiasaan lintas dari pengkodean sisi server
2. lowerCamelCase, untuk konsistensi dengan konvensi penamaan JavaScript
3. css-style-classes, yang konsisten dengan penamaan properti css (tetapi dapat mengganggu ketika Ctrl + Shift + ArrowKey pilihan teks)
4. with_under_scores, yang secara pribadi saya belum pernah melihat banyak digunakan
5. alllowercase, mudah diingat tetapi bisa sulit dibaca untuk nama yang lebih panjang
6. UPPERCASEFTW, sebagai cara terbaik untuk mengganggu sesama programmer Anda (mungkin dikombinasikan dengan opsi 4 agar mudah dibaca)

Dan mungkin saya telah meninggalkan beberapa opsi atau kombinasi penting juga. Jadi: pertimbangan apa yang ada untuk konvensi penamaan, dan ke konvensi mana mereka memimpin?

Bounty atau tidak, sampai batas tertentu pilihan akan selalu menjadi "masalah preferensi" - setelah semua, bagaimana perasaan Anda jika W3C merekomendasikan (atau bahkan memberlakukan) konvensi tertentu yang Anda rasa tidak benar?

Namun, setelah mengatakan itu, saya pribadi lebih suka lowerCamelCasekonvensi, dan saya akan memberikan alasan dan pertimbangan praktis yang saya gunakan untuk mengambil keputusan - saya akan melakukannya dengan proses eliminasi, menggunakan penomoran dari pertanyaan Anda:

(5.) hanya dengan mudah dibaca karena saya tidak tahu kata pengantar mulailah.

(6.) ASABOVEPLUSITSANNOYINGLIKESOMEONESHOUTING.

(4.) historical_incompatibility_plus_see: Dokumentasi Mozilla Dev .

(3.) sedikit-rumit-untuk-menjelaskan ... seperti yang Anda sebutkan, pemilihan dalam editor teks adalah satu masalah (seperti dengan menggarisbawahi, tergantung pada editor), tetapi bagi saya itu juga fakta bahwa itu mengingatkan saya pada sintaks disediakan untuk kata kunci khusus vendor , bahkan jika itu dimulai dengan tanda hubung serta kata-kata yang dipisahkan oleh mereka.

Jadi ini meninggalkan (1.) dan (2.) Anda, UpperCamelCase dan lowerCamelCase, masing-masing. Terlepas dari tautan mental ke kelas Java (yang, oleh konvensi yang lebih jelas, UpperCamelCase), bagi saya, nama kelas CSS lebih baik dimulai dengan huruf kecil. Mungkin itu karena elemen XHTML dan nama atribut , tapi saya kira Anda juga bisa membuat kasus bahwa memiliki kelas CSS menggunakan UpperCamelCase akan membantu membedakannya. Jika Anda membutuhkan alasan lain, lowerCamelCase adalah apa yang W3C gunakan dalam contoh untuk nama kelas yang baik (meskipun URL itu sendiri, secara menyebalkan, tidak setuju dengan saya).

Saya akan menyarankan terhadap (4.), (5.) dan (6.), untuk alasan yang disebutkan di atas, tetapi anggaplah bahwa argumen dapat dibuat untuk salah satu dari tiga lainnya.

Apakah Anda (atau orang lain dalam hal ini) setuju dengan saya tentang masalah ini, itu terserah Anda. Kenyataan bahwa Anda tidak punya pasti jawaban mengutip sumber-sumber otoritatif sekarang dapat diambil sebagai petunjuk bahwa ada tidak hal seperti itu sebagai standar yang pasti tentang masalah ini (lagi kita semua akan menggunakannya). Saya tidak yakin itu hal yang buruk.

Kata-kata dalam nama kelas CSS harus dipisahkan dengan tanda hubung ( class-name), karena itulah bagaimana kata-kata dalam properti CSS dan kelas semu dipisahkan dan sintaksinya didefinisikan oleh spesifikasi CSS .

Kata-kata dalam nama ID juga harus dipisahkan dengan tanda hubung, untuk mencocokkan gaya sintaksis nama kelas dan karena nama ID sering digunakan dalam URL dan tanda hubung adalah pemisah kata asli dan paling umum dalam URL.

Sebagian besar masalah preferensi; tidak ada standar yang ditetapkan, apalagi sumber yang berwenang, tentang masalah ini. Gunakan apa pun yang Anda merasa paling nyaman dengan; konsisten saja.

Secara pribadi, saya menggunakan css-style-with-dashes, tetapi saya mencoba untuk menghindari nama kelas multi-kata dan menggunakan beberapa kelas sedapat mungkin (jadi button important defaultdaripada button-important-default). Dari pengalaman saya, ini juga tampaknya menjadi pilihan paling populer di antara situs web dan kerangka kerja berkualitas tinggi.

Huruf kecil dengan tanda hubung juga lebih mudah diketik daripada opsi lain (tidak termasuk nowordseparatorswhatsoeverkonvensi yang sulit dibaca ), setidaknya pada keyboard AS, karena tidak perlu menggunakan tombol Shift.

Untuk id, ada pertimbangan praktis tambahan bahwa jika Anda ingin mereferensikan elemen dengan ID mereka langsung di javascript (misalnya document.forms[0].btn_ok), tanda hubung tidak akan berfungsi dengan baik - tetapi kemudian, jika Anda menggunakan jQuery, Anda mungkin akan tetap menggunakannya $(), jadi Anda hanya bisa $('#btn-ok'), yang membuat titik ini sebagian besar diperdebatkan.

Sebagai catatan, konvensi lain saya menemukan secara teratur menggunakan kutil Hungaria di ID untuk menunjukkan jenis unsur, terutama untuk kontrol bentuk - sehingga Anda akan memiliki #lblUsername, #tbUsername, #valUsernameuntuk label nama pengguna, masukan, dan validator.

Saya sangat percaya hal yang paling penting adalah konsistensi.

Ada dua cara untuk melihatnya:

1. Argumen yang baik dapat dibuat untuk alllowercaseatau css-style-clauses(mungkin pilihan yang lebih baik) karena mereka akan menjadi yang paling konsisten dengan kode yang akan mereka masuki. Itu akan memberikan aliran yang lebih alami ke kode secara keseluruhan dan tidak ada yang akan menggelegar atau keluar dari tempatnya .

2. Argumen yang sama baiknya dapat dibuat untuk gaya yang berbeda dari nama tag HTML atau klausa CSS, jika itu akan membedakan ID dan kelas dengan cara yang membantu keterbacaan. Misalnya, jika Anda menggunakan UpperCamelCaseID dan kelas, dan tidak menggunakannya untuk konstruk atau tujuan lain, Anda akan tahu bahwa Anda telah menekan satu setiap kali Anda melihat token dalam format itu. Satu batasan yang mungkin diberlakukan adalah bahwa itu akan paling efektif jika setiap ID atau kelas adalah nama 2+ kata, tetapi itu masuk akal dalam banyak kasus.

Dalam menulis jawaban ini saya datang untuk menemukan bahwa saya jauh lebih condong ke pilihan kedua, tetapi saya akan meninggalkan keduanya karena saya pikir kedua kasus itu pantas.

Itu semua benar-benar masalah preferensi, atau masalah kemalasan. CamelCasing lebih mudah untuk diketik, tetapi saya lebih suka menggunakan notasi garis bawah karena menurut saya pribadi lebih mudah untuk membaca dan men-debug daripada CamelCase. Tidak ada aturan konvensi pengkodean yang harus dipatuhi, saya belum pernah bekerja di tempat yang memiliki pedoman pengkodean yang sama dengan tempat sebelumnya.

Sebagian besar perusahaan memiliki pedoman yang harus Anda patuhi dengan cara apa pun untuk menjaga kode tetap bersih dan lebih mudah bagi semua orang untuk mengerjakannya. Jika Anda seorang freelancer, maka Anda dapat keluar karena Anda adalah satu-satunya orang yang mengerjakan kode tersebut. Hanya ada 2 konvensi pengkodean menurut pendapat saya yang harus diikuti: CamelCase atau Underscore notation. Saran saya adalah memilih satu dan tetap menggunakannya.

Anda tampaknya tidak menyadari satu fakta sederhana: sebagian besar CSS tidak dilakukan oleh programmer .

Ini dilakukan oleh desainer grafis.

Mereka tidak peduli tentang perang penyuntingan kami dan tidak peduli tentang apa yang kami lakukan dengan tombol shift.
Mereka bahkan tidak tahu di mana _kunci mewah itu . (atau apa namanya)

Mereka tidak peduli tentang kode estetika , mereka peduli tentang estetika estetika .

(Dan mereka mungkin ada benarnya)

Mereka tidak membaca spek , mereka mendapatkan tutorial.
Dan kemudian periksa referensi di w3schools.

Beberapa dari mereka mungkin percaya mereka tidak dapat menggunakan nama kelas huruf besar karena alasan.
Mereka penuh dengan kesalahpahaman aneh, sebagian besar tidak relevan.