Html / css kimlikleri ve sınıfları için standart adlandırma kuralı nedir?

Kullandığınız platforma mı bağlı veya çoğu geliştiricinin önerdiği / takip ettiği ortak bir kural var mı?

Birkaç seçenek vardır:

1. id="someIdentifier"' - javascript kodu ile oldukça tutarlı görünüyor.
2. id="some-identifier" - html5 benzeri özelliklere ve html'deki diğer şeylere benziyor.
3. id="some_identifier" - ruby ​​koduyla oldukça tutarlı görünüyor ve Javascript içinde hala geçerli bir tanımlayıcı

Javascript ile daha iyi oynadıkları için yukarıdaki # 1 ve # 3 en anlamlı olduğunu düşünüyordum.

Buna doğru bir cevap var mı?

Bir tane yok.

Metin düzenleyicimin (Gedit) sözdizimi vurgulamasını bozan tireler nedeniyle her zaman alt çizgi kullanıyorum, ancak bu kişisel tercih.

Tüm bu sözleşmelerin her yerde kullanıldığını gördüm. En iyi olduğunu düşündüğünüzü kullanın - sizin için okunması en güzel / en kolay ve en kolay yazılanı kullanın çünkü çok kullanacaksınız. Örneğin, alt çizgi anahtarınızı klavyenin alt tarafında (olası değil, ancak tamamen mümkün) varsa, kısa çizgilere sadık kalın. Sadece kendiniz için en iyisini yapın. Ayrıca, bu sözleşmelerin 3ü de kolayca okunabilir. Bir ekipte çalışıyorsanız, ekip tarafından belirlenmiş sözleşmeye (varsa) uymayı unutmayın.

2012 Güncellemesi

Zamanla nasıl programladığımı değiştirdim. Şimdi thisIsASelectortireler yerine deve kasası ( ) kullanıyorum; İkincisini oldukça çirkin buluyorum. Zaman içinde kolayca değişebilen, tercih ettiğiniz her şeyi kullanın .

2013 Güncellemesi

Görünüşe göre işleri her yıl karıştırmaktan hoşlanıyorum ... Sublime Text'e geçtikten ve bir süre Bootstrap kullandıktan sonra kısa çizgilere geri döndüm. Şimdi bana göre un_der_scores veya camelCase'den çok daha temiz görünüyorlar. Orada: My orijinal nokta hala olsa duruyor değil standart.

2015 Güncellemesi

Burada sözleşmelerle ilginç bir köşe davası Rust . Dili çok seviyorum, ancak başka bir şey kullanarak bir şeyler tanımlarsanız derleyici sizi uyaracaktır underscore_case. Uyarıyı kapatabilirsiniz, ancak derleyici varsayılan olarak bir kural önermektedir. Daha büyük projelerde, kötü bir şey olmayan daha temiz kodlara yol açtığını hayal ediyorum.

Güncelleme 2016 ( siz istediniz)

Gelecek projelerim için BEM standardını benimsedim . Sınıf isimleri son derece ayrıntılı olur, ancak sanırım onlarla birlikte gelen sınıflara ve CSS'ye iyi bir yapı ve yeniden kullanılabilirlik kazandırır. Sanırım BEM aslında bir standart (bu yüzden belki de benim noolur yes) ama bir projede kullanmaya karar verdiğiniz şey hala size kalmış. En önemlisi: seçtiklerinizle tutarlı olun.

Güncelleme 2019 ( siz istediniz)

Bir süre CSS yazmadıktan sonra, ürünlerinden birinde OOCSS kullanan bir yerde çalışmaya başladım . Ben şahsen her yerde çöp sınıfları için oldukça tatsız buluyorum, ancak HTML ve CSS arasında atlamak zorunda kalmamak her zaman oldukça üretken hissediyor.

Yine de BEM'e yerleştim. Bu ayrıntılı, ancak ad alanı React bileşenlerinde onunla çalışmayı çok doğal hale getiriyor. Tarayıcı testi sırasında belirli öğeleri seçmek için de harikadır.

OOCSS ve BEM, mevcut CSS standartlarından sadece birkaçı. Sizin için uygun olanı seçin - hepsi uzlaşmalarla dolu çünkü CSS o kadar iyi değil .

2020 Güncellemesi

Bu yıl sıkıcı bir güncelleme. Hala BEM kullanıyorum. Yukarıda listelenen nedenlerden dolayı konumum 2019 güncellemesinden gerçekten değişmedi. Sizin için uygun olanı, takım boyutunuzla ölçeklenen ve CSS'nin zayıf özellik kümesini istediğiniz kadar gizleyin.

Google tarafından her zaman bir tire işareti kullanılmasını öneren css & html stil kılavuzu vardır: https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters .

Kısa çizgi (-) yerine alt çizgi kullanmanızı öneririm, çünkü ...

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

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

bu şekilde id ile değere kolayca erişebilirsiniz. Ancak kısa çizgi kullanırsanız sözdizimi hatasına neden olur.

Bu eski bir örnektir, ancak jquery olmadan çalışabilir - :)

@jean_ralphio sayesinde, kaçınmak için yol etrafında çalışma var

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

Dash tarzı bir google kod stili olurdu, ama gerçekten sevmiyorum. ID için TitleCase ve sınıf için camelCase tercih ederim.

tl; dr;

Gerçek bir cevap yok. Kiminle çalıştığınıza bağlı olarak, orada bulunanlardan birini seçebilir veya mantıklı olana göre kendi standartlarınızı oluşturabilirsiniz. Ve% 100 platforma bağlıdır.

Orijinal Mesaj

Dikkate alınması gereken sadece bir alternatif standart daha:

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

Ve senaryonuzda:

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

Bu, değişkenler, kimlikler ve sınıflar için sırasıyla bir camelCase, under_score ve tireleme kullanır. Bu standart hakkında birkaç farklı web sitesinde okudum. Css / jquery seçicilerinde biraz gereksiz olsa da, fazlalıklar hataları yakalamayı kolaylaştırır. Örn: CSS dosyanızı görürseniz .unknown_nameveya bu #unknownNamedosyada neyle ilgili olduğunu anlamanız gerektiğini bilirsiniz.

GÜNCELLEME 2019

(Tirelere 'kebab-case', altçizgilere 'snake_case' denir ve sonra 'TitleCase', 'pascalCase' yazarsınız)

Kişisel olarak kısa çizgileri sevmiyorum. Başlangıçta bunu bir alternatif olarak gönderdim (çünkü kurallar basittir). Bununla birlikte, Tireler seçim kısayollarını çok zorlaştırır ( vsCode'da çift ​​tıklama, ctrl/ option+ left/ rightve ctrl/ cmd+ D. Ayrıca, sınıf adlarının ve dosya adlarının kısa çizgilerin çalıştığı tek yerdir, çünkü neredeyse her zaman tırnak işaretleri veya css, vb. Ancak kısayol hala geçerli.

Değişkenlere, sınıf adlarına ve kimliklere ek olarak, dosya adı kurallarına da bakmak istersiniz. Ve Git Şubeleri.

Ofisimin kodlama grubu aslında bir ya da iki ay önce bir şeyleri nasıl isimlendireceğimizi tartışmak için bir toplantı yaptı. Git şubeleri için 321-the_issue_description veya 321_the-issue-description arasında karar veremedik. (321_theIssueDescription istedim, ancak iş arkadaşlarım bundan hoşlanmadı.)

Diğer insanların standartlarıyla çalışmayı göstermek için bir örnek ...

Vue.js'nin bir standardı var. Aslında, öğelerinin birçoğu için iki alternatif standart var. Dosya adları için her iki versiyonundan da hoşlanmıyorum. Ya "/path/kebab-case.vue"da önerirler "/path/TitleCase.Vue". Özellikle bir kısmını yeniden adlandırmaya çalışmadığınız sürece, eskisinin adını değiştirmek daha zordur. İkincisi, platformlar arası uyumluluk için iyi değildir. Ben tercih ederim "/path/snake_case.vue". Bununla birlikte, diğer insanlarla veya mevcut projelerle çalışırken, önceden belirlenmiş olan standartlara uymak önemlidir. Bu nedenle, tamamen şikayet etmeme rağmen Vue'daki dosya adları için kebap davası ile gidiyorum. Çünkü bunu takip etmemek, vue-cli'nin kurduğu birçok dosyayı değiştirmek anlamına gelir.

HTML ve CSS için adlandırma kuralı üzerinde anlaşmaya varılamamıştır. Ancak isimlendirmenizi nesne tasarımı etrafında yapılandırabilirsiniz. Daha spesifik olarak Sahiplik ve İlişki diyorum.

sahiplik

Nesneyi tanımlayan anahtar kelimeler tire ile ayrılabilir.

araba yeni-açık-sağ

Nesneyi tanımlayan anahtar kelimeler de dört kategoriye ayrılabilir (soldan sağa doğru sıralanmalıdır): Nesne, Nesne Tanımlayıcı, Eylem ve Eylem Tanımlayıcı.

araba - bir isim ve
yeni bir nesne - bir sıfat ve nesneyi daha ayrıntılı olarak açıklayan bir nesne tanımlayıcı
- bir fiil ve
sağ nesneye ait bir eylem - bir sıfat ve açıklayan bir eylem tanımlayıcı eylem daha ayrıntılı olarak

Not: fiiller (eylemler) geçmiş zamanda olmalıdır (döndü, yaptı, koştu, vb.).

ilişki

Nesnelerin ebeveyn ve çocuk gibi ilişkileri de olabilir. Eylem ve Eylem Tanımlayıcı üst nesneye aittir, alt nesneye ait değildir. Nesneler arasındaki ilişkiler için alt çizgi kullanabilirsiniz.

araba yeni-açık-right_wheel-sola dönük sol

• car-new-turn-right (sahiplik kuralını izler)
• tekerlek-sola-sola-sola (mülkiyet kuralına uyar)
• car-new-dönük-sağ_wheel-sola döndü-sola (ilişki kuralını izler)

Son notlar:

• CSS büyük / küçük harfe duyarlı olmadığından, tüm adları küçük harf (veya büyük harf) yazmak daha iyidir; belirsiz isimlere yol açabileceğinden deve veya pascal-durumdan kaçının.
• Ne zaman bir sınıf kullanacağınızı ve ne zaman bir kimlik kullanacağınızı bilin. Sadece web sayfasında bir kez kullanılan bir kimlikle ilgili değil. Çoğu zaman, bir kimlik değil, bir sınıf kullanmak istersiniz. Web düğmeleri (düğmeler, formlar, paneller, vb.) Her zaman bir sınıf kullanmalıdır. Kimlikler kolayca adlandırma çakışmalarına yol açabilir ve işaretlemenizi adlandırma için az miktarda kullanılmalıdır. Yukarıdaki sahiplik ve ilişki kavramları hem sınıfları hem de kimlikleri adlandırmak için geçerlidir ve çakışmaları adlandırmaktan kaçınmanıza yardımcı olacaktır.
• CSS adlandırma kuralımı beğenmediyseniz, başka birkaç tane daha vardır: Yapısal adlandırma kuralı, Sunum adlandırma kuralı, Anlamsal adlandırma kuralı, BEM adlandırma kuralı, OCSS adlandırma kuralı, vb.

Birçoğunun CSS id ve sınıf isimlerinde tireleri tercih etmesinin bir başka nedeni işlevselliktir.

Kod sözcüğünü sözcükler arasında gezinmek için option+ left/ right(veya Windows'ta ctrl+ left/ gibi) klavye kısayollarını kullanmak right, imleci her tireda durdurur ve klavye kısayollarını kullanarak kimliği veya sınıf adını tam olarak değiştirmenize olanak tanır. Alt çizgiler ve camelCase algılanmaz ve imleç sanki tek bir kelimeymiş gibi sürüklenir.

Kısa süre önce XML öğrenmeye başladım. Alt çizgi sürümü, XML ile ilgili her şeyi (DOM, XSD, vb.) Java, JavaScript (deve örneği) gibi programlama dillerinden ayırmama yardımcı olur. Programlama dillerinde izin verilen tanımlayıcıların kullanılmasının daha iyi göründüğünü kabul ediyorum.

Düzenleme: İlgisiz olabilir, ancak burada kimlikleri adlandırırken izlediğim XML öğelerini adlandırmayla ilgili kurallar ve öneriler için bir bağlantı ("XML Adlandırma Kuralları" ve "En İyi Adlandırma Uygulamaları" bölümleri).

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

Bence platforma bağımlı. Net MVC'de geliştirirken, sınıf adları için bootstrap stili küçük harf ve kısa çizgiler kullanıyorum, ancak ids için PascalCase kullanıyorum.

Bunun nedeni, görüşlerimin güçlü yazılan görünüm modelleri tarafından desteklenmesidir. C # modellerinin özellikleri pascal durumdur. MVC ile model bağlama uğruna, modele bağlanan HTML öğelerinin adlarının pascal durum olan görünüm modeli özellikleri ile tutarlı olması mantıklıdır. Basit olması için kimliklerim, adlandırılmış giriş grubundaki her öğe için benzersiz kimlikler gerektiren radyo düğmeleri ve onay kutuları dışında öğe adlarıyla aynı adlandırma kuralını kullanmaktadır.