Apa konvensi penamaan standar untuk id dan kelas html / css?

Apakah ini tergantung pada platform yang Anda gunakan, atau adakah konvensi umum yang disarankan / diikuti sebagian besar pengembang?

Ada beberapa opsi:

1. id="someIdentifier"' - terlihat cukup konsisten dengan kode javascript.
2. id="some-identifier" - lebih mirip atribut seperti HTML5 dan hal lain dalam HTML.
3. id="some_identifier" - terlihat cukup konsisten dengan kode ruby ​​dan masih merupakan pengidentifikasi yang sah di dalam Javascript

Saya berpikir # 1 dan # 3 di atas paling masuk akal karena mereka bermain lebih baik dengan Javascript.

Apakah ada jawaban yang tepat untuk ini?

Tidak ada.

Saya menggunakan garis bawah sepanjang waktu, karena tanda hubung mengacaukan penyorotan sintaks editor teks saya (Gedit), tapi itu preferensi pribadi.

Saya telah melihat semua konvensi ini digunakan di semua tempat. Gunakan salah satu yang menurut Anda terbaik - salah satu yang terlihat paling bagus / termudah untuk dibaca untuk Anda, serta paling mudah untuk mengetik karena Anda akan sering menggunakannya. Misalnya, jika Anda memiliki kunci garis bawah di bagian bawah keyboard (tidak mungkin, tetapi sepenuhnya mungkin), maka pertahankan tanda hubung. Pergilah dengan yang terbaik untuk diri sendiri. Selain itu, ketiga konvensi ini mudah dibaca. Jika Anda bekerja dalam tim, ingatlah untuk tetap mengikuti konvensi yang ditentukan tim (jika ada).

Perbarui 2012

Saya telah mengubah cara saya memprogram dari waktu ke waktu. Saya sekarang menggunakan case unta ( thisIsASelector) alih-alih tanda hubung sekarang; Saya menemukan yang terakhir jelek. Gunakan apa pun yang Anda suka, yang dapat dengan mudah berubah seiring waktu.

Perbarui 2013

Sepertinya saya suka mencampur hal-hal tahunan ... Setelah beralih ke Sublime Text dan menggunakan Bootstrap untuk sementara waktu, saya kembali ke tanda hubung. Bagi saya sekarang mereka terlihat jauh lebih bersih daripada un_der_scores atau camelCase. Poin asli saya masih berdiri: tidak ada standar.

Perbarui 2015

Kasus sudut menarik dengan konvensi di sini adalah Rust . Saya sangat suka bahasanya, tetapi kompiler akan memperingatkan Anda jika Anda mendefinisikan hal-hal menggunakan selain underscore_case. Anda dapat mematikan peringatan, tetapi menarik bahwa kompiler sangat menyarankan konvensi secara default. Saya membayangkan dalam proyek yang lebih besar itu mengarah pada kode bersih yang bukan hal buruk.

Perbarui 2016 ( Anda memintanya)

Saya telah mengadopsi standar BEM untuk proyek saya ke depan. Nama-nama kelas akhirnya menjadi sangat verbose, tapi saya pikir itu memberikan struktur yang baik dan dapat digunakan kembali ke kelas dan CSS yang menyertainya. Saya kira BEM sebenarnya adalah standar (jadi saya mungkin nomenjadi yes) tetapi terserah pada Anda apa yang Anda putuskan untuk digunakan dalam suatu proyek. Yang paling penting: konsisten dengan apa yang Anda pilih.

Perbarui 2019 ( Anda memintanya)

Setelah menulis tanpa CSS untuk beberapa waktu, saya mulai bekerja di tempat yang menggunakan OOCSS di salah satu produk mereka. Saya pribadi merasa sangat tidak menyenangkan untuk membuang sampah sembarangan di mana-mana, tetapi tidak harus beralih antara HTML dan CSS sepanjang waktu terasa cukup produktif.

Saya masih memilih BEM. Itu verbose, tetapi namespacing membuatnya bekerja dengannya dalam komponen Bereaksi sangat alami. Ini juga bagus untuk memilih elemen tertentu saat pengujian browser.

OOCSS dan BEM hanyalah beberapa standar CSS di luar sana. Pilih satu yang cocok untuk Anda - semuanya penuh kompromi karena CSS tidak bagus .

Perbarui 2020

Pembaruan yang membosankan tahun ini. Saya masih menggunakan BEM. Posisi saya belum benar-benar berubah dari pembaruan 2019 karena alasan yang tercantum di atas. Gunakan apa yang cocok untuk Anda yang berskala dengan ukuran tim Anda dan menyembunyikan sebanyak mungkin set fitur CSS yang Anda inginkan.

Ada panduan gaya css & html oleh google, yang merekomendasikan untuk selalu menggunakan tanda hubung: https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters .

Saya sarankan Anda menggunakan garis bawah alih-alih tanda hubung (-), karena ...

<form name="myForm">
  <input name="myInput" id="my-Id" value="myValue"/>
</form>

<script>
  var x = document.myForm.my-Id.value;
  alert(x);
</script>

Anda dapat mengakses nilai dengan id dengan mudah seperti itu. Tetapi jika Anda menggunakan tanda hubung itu akan menyebabkan kesalahan sintaksis.

Ini adalah sampel lama, tetapi dapat bekerja tanpa jquery - :)

terima kasih kepada @jean_ralphio, ada cara untuk menghindari dengan

var x = document.myForm['my-Id'].value;

Dash-style akan menjadi gaya kode google, tetapi saya tidak begitu menyukainya. Saya lebih suka TitleCase untuk id dan camelCase untuk kelas.

tl; dr;

Tidak ada satu jawaban yang benar. Anda dapat memilih salah satu dari banyak di luar sana, atau membuat standar Anda sendiri berdasarkan apa yang masuk akal, tergantung pada siapa Anda bekerja. Dan itu 100% tergantung pada platform.

Pos Asli

Hanya satu standar alternatif lagi untuk dipertimbangkan:

<div id="id_name" class="class-name"></div>

Dan dalam skrip Anda:

var variableName = $("#id_name .class-name");

Ini hanya menggunakan camelCase, under_score, dan tanda hubung masing-masing untuk variabel, id, dan kelas. Saya telah membaca tentang standar ini di beberapa situs web yang berbeda. Meskipun sedikit berlebihan dalam penyeleksi css / jquery, redudansi membuatnya lebih mudah untuk menangkap kesalahan. misalnya: Jika Anda melihat .unknown_nameatau #unknownNamedalam file CSS Anda, Anda tahu Anda perlu mencari tahu apa yang sebenarnya merujuk.

PEMBARUAN 2019

(Tanda hubung disebut 'kasus-kebab', garis bawah disebut 'snake_case', dan kemudian Anda memiliki 'TitleCase', 'pascalCase')

Saya pribadi tidak suka tanda hubung. Saya awalnya memposting ini sebagai salah satu alternatif (karena aturannya sederhana). Namun, tanda hubung membuat pintasan pemilihan sangat sulit (klik dua kali, ctrl/ option+ left/ right, dan ctrl/ cmd+ Ddi vsCode. Juga, nama kelas dan nama file adalah satu-satunya tempat di mana tanda hubung bekerja, karena mereka hampir selalu dalam tanda kutip atau dalam css, dll. Tetapi hal pintas masih berlaku.

Selain variabel, nama kelas, dan id, Anda juga ingin melihat konvensi nama file. Dan Cabang Git.

Grup pengkode kantor saya sebenarnya mengadakan pertemuan satu atau dua bulan yang lalu untuk membahas bagaimana kami akan menyebutkan beberapa hal. Untuk cabang git, kami tidak dapat memutuskan antara 321-the_issue_description atau 321_the-issue-description. (Saya ingin 321_theIssueDescription, tapi rekan kerja saya tidak suka itu.)

Contoh, untuk menunjukkan bekerja dengan standar orang lain ...

Vue.js memang memiliki standar. Sebenarnya mereka memiliki dua standar alternatif untuk beberapa item mereka. Saya tidak suka kedua versi mereka untuk nama file. Mereka merekomendasikan "/path/kebab-case.vue"atau "/path/TitleCase.Vue". Yang pertama lebih sulit untuk diganti namanya, kecuali jika Anda secara khusus mencoba untuk mengganti nama bagian dari itu. Yang terakhir ini tidak baik untuk kompatibilitas lintas platform. Saya lebih suka "/path/snake_case.vue". Namun, ketika bekerja dengan orang lain atau proyek yang ada, penting untuk mengikuti standar apa pun yang sudah ditetapkan. Karena itu saya menggunakan case-kebab untuk nama file di Vue, meskipun saya akan benar-benar mengeluh tentang hal itu. Karena tidak mengikuti itu berarti mengubah banyak file yang diatur oleh vue-cli.

Tidak ada kesepakatan penamaan yang disepakati untuk HTML dan CSS. Tetapi Anda dapat menyusun tata nama Anda di sekitar desain objek. Lebih khusus apa yang saya sebut Kepemilikan dan Hubungan.

Kepemilikan

Kata kunci yang menggambarkan objek, dapat dipisahkan dengan tanda hubung.

mobil-baru-belok kanan

Kata kunci yang menggambarkan objek juga dapat jatuh ke dalam empat kategori (yang harus dipesan dari kiri ke kanan): Obyek, Object-Descriptor, Action, dan Action-Descriptor.

car - kata benda, dan objek
baru - kata sifat, dan objek-deskriptor yang menggambarkan objek secara lebih rinci
berubah - kata kerja, dan tindakan yang termasuk dalam objek yang
benar - kata sifat, dan deskriptor tindakan yang menggambarkan tindakan lebih terinci

Catatan: kata kerja (tindakan) harus dalam bentuk past-tense (berbalik, lakukan, berlari, dll).

Hubungan

Objek juga dapat memiliki hubungan seperti orang tua dan anak. Action dan Action-Descriptor adalah milik objek induk, mereka bukan milik objek anak. Untuk hubungan antar objek, Anda dapat menggunakan garis bawah.

car-new-turned-right_wheel-left-belok-kiri

• car-new-belok kanan (mengikuti aturan kepemilikan)
• roda-kiri-belok kiri (mengikuti aturan kepemilikan)
• car-new-turned-right_wheel-left-turned-left (mengikuti aturan hubungan)

Catatan akhir:

• Karena CSS tidak peka huruf besar-kecil, lebih baik menulis semua nama dalam huruf kecil (atau huruf besar); Hindari kasing atau kasing karena dapat menyebabkan nama yang ambigu.
• Ketahui kapan harus menggunakan kelas dan kapan harus menggunakan id. Ini bukan hanya tentang id yang digunakan sekali di halaman web. Sebagian besar waktu, Anda ingin menggunakan kelas dan bukan id. Komponen web seperti (tombol, formulir, panel, ... dll) harus selalu menggunakan kelas. Id dapat dengan mudah mengarah ke konflik penamaan, dan harus digunakan dengan hemat untuk namespacing markup Anda. Konsep kepemilikan dan hubungan di atas berlaku untuk penamaan kelas dan id, dan akan membantu Anda menghindari konflik penamaan.
• Jika Anda tidak menyukai konvensi penamaan CSS saya, ada beberapa yang lain juga: konvensi penamaan struktural, konvensi penamaan presentasional, konvensi penamaan semantik, konvensi penamaan BEM, konvensi penamaan OCSS, dll.

Alasan lain mengapa banyak lebih suka tanda hubung dalam id CSS dan nama kelas adalah fungsi.

Menggunakan pintasan keyboard seperti option+ left/ right(atau ctrl+ left/ rightdi Windows) untuk melintasi kode kata demi kata menghentikan kursor di setiap tanda hubung, yang memungkinkan Anda untuk menelusuri secara tepat id atau nama kelas menggunakan pintasan keyboard. Garis bawah dan camelCase tidak terdeteksi dan kursor akan melayang tepat di atasnya seolah-olah semuanya satu kata.

Saya baru saja mulai belajar XML. Versi garis bawah membantu saya memisahkan semua yang berhubungan dengan XML (DOM, XSD, dll.) Dari bahasa pemrograman seperti Java, JavaScript (case unta). Dan saya setuju dengan Anda bahwa menggunakan pengidentifikasi yang diizinkan dalam bahasa pemrograman terlihat lebih baik.

Sunting: Mungkin tidak terkait, tetapi di sini ada tautan untuk aturan dan rekomendasi tentang penamaan elemen XML yang saya ikuti ketika menamai id (bagian "Aturan Penamaan XML" dan "Praktik Penamaan Terbaik").

http://www.w3schools.com/xml/xml_elements.asp

Saya pikir itu tergantung platform. Ketika mengembangkan .Net MVC, saya menggunakan huruf kecil gaya bootstrap dan tanda hubung untuk nama kelas, tetapi untuk id saya menggunakan PascalCase.

Alasan untuk ini adalah bahwa pandangan saya didukung oleh model tampilan yang sangat diketik. Properti model C # adalah kasus pascal. Demi mengikat model dengan MVC masuk akal bahwa nama-nama elemen HTML yang mengikat model konsisten dengan tampilan model properti yang merupakan kasus pascal. Untuk kesederhanaan id saya menggunakan konvensi penamaan yang sama dengan nama elemen kecuali untuk tombol radio dan kotak centang yang membutuhkan id unik untuk setiap elemen dalam kelompok input bernama.