CSS seçicileri / HTML özellikleri için tire işaretleri neden tercih ediliyor?

Geçmişte her zaman HTML'deki sınıf ve kimlik özelliklerini tanımlamak için alt çizgi kullandım . Son birkaç yılda, çoğunlukla kendimi toplumdaki trendle hizalamak için kesiklere geçtim, bana mantıklı geldiği için değil.

Her zaman tire işaretlerinin daha fazla dezavantajı olduğunu düşündüm ve faydalarını görmüyorum:

Kod tamamlama ve Düzenleme

Çoğu editör, tire işaretlerini sözcük ayırıcısı olarak görür, bu yüzden istediğim simgeye geçemiyorum. Sınıfın " featured-product" olduğunu, " " otomatik olarak tamamlamam featured, kısa çizgi girmem ve " " tamamlamam gerektiğini söyleyin product.

Alt çizgilerle " featured_product" tek bir sözcük olarak ele alınır, böylece bir adımda doldurulabilir.

Aynı şey belgede gezinmek için de geçerlidir. Kelimelere göre atlama ya da sınıf isimlerine çift tıklama tire işareti ile kesilir.

(Daha genel olarak, sınıfları ve kimlikleri jeton olarak düşünüyorum , bu yüzden bir jetonun tireler üzerinde kolayca bölünebilmesi bana mantıklı değil.)

Aritmetik operatör ile belirsizlik

Kısa çizgiler kullanmak , JavaScript'teki form öğelerine nesne özelliği erişimini keser . Bu yalnızca alt çizgi ile mümkündür:

form.first_name.value='Stormageddon';

(Kuşkusuz, form öğelerine kendim bu şekilde erişemiyorum, ancak evrensel bir kural olarak tire ve alt çizgi üzerinde karar verirken, birinin yapabileceğini düşünün.)

Sass gibi diller (özellikle Pusula çerçevesi boyunca ), değişken isimler için bile standart olarak tirelere yerleşmiştir. Başlangıçta da alt çizgi kullandılar. Bunun ayrıştırılması bana garip geldi:

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

Diller arasında değişken adlandırma ile tutarsızlık

Eskiden underscored_namesPHP, ruby, HTML / CSS ve JavaScript değişkenleri için yazıyordum. Bu kullanışlı ve tutarlı, ama yine "kullanmak" için şimdi kullanıyorum:

• dash-case HTML / CSS'de
• camelCase JavaScript'te
• underscore_case PHP ve Ruby'de

Bu beni çok fazla rahatsız etmiyor, ama bunların neden böylesine yanlış hizalandığını, görünüşte bilerek amaçlandığını merak ediyorum. En azından alt çizgilerle tutarlılığı korumak mümkün oldu:

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

Farklılıklar , dizeleri gereksiz yere ve hata potansiyeli ile çevirmemiz gereken durumlar yaratır .

Öyleyse soruyorum: Topluluk neden neredeyse evrensel olarak çizgilere yerleşti ve alt çizgileri aşan nedenler var mı?

Orada bir olan ilgili soru başlattın zamanlarda arkasından, ama değil (veya bu görüşünde değilim olmamalıdır olmuştur) sadece zevk meselesi. Gerçekten sadece bir zevk meselesiyse neden hepimiz bu konvansiyona yerleştiğimizi anlamak istiyorum.

Kod tamamlama

Kısa çizgi noktalama işareti olarak mı yoksa opak bir tanımlayıcı olarak mı yorumlanır, seçim düzenleyicisine bağlıdır sanırım. Ancak, kişisel bir tercih olarak, bir CSS dosyasındaki her kelime arasında sekme yapabilmeyi tercih ediyorum ve alt çizgi ile ayrıldıysa ve durak yoksa, sinir bozucu bulabilirdim.

Ayrıca, kısa çizgiler kullanmak , metni içeren herhangi bir öğeyi seçen ve isteğe bağlı olarak bir tire izleyen | = öznitelik seçiciden yararlanmanıza olanak tanır :

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

Bu, aşağıdaki HTML öğelerinin italik yazı tipi stiline sahip olmasını sağlar:

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

Aritmetik operatör ile belirsizlik

HTML öğelerine JavaScript'te nokta gösterimi yoluyla erişimin bir özellik yerine bir hata olduğunu söyleyebilirim. Korkunç JavaScript uygulamalarının ilk günlerinden beri korkunç bir yapı ve gerçekten harika bir uygulama değil. Bu günlerde JavaScript ile yaptığınız çoğu şey için, yine de DOM'dan öğeleri almak için CSS Seçicilerini kullanmak istersiniz , bu da tüm nokta gösterimini oldukça işe yaramaz hale getirir. Hangisini tercih edersiniz?

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

İlk iki seçeneği daha çok tercih edilir buluyorum, özellikle '#first-name'de JavaScript değişkeniyle değiştirilebildiğinden ve dinamik olarak oluşturulduğundan. Onları da gözler üzerinde daha hoş buluyorum.

Sass'ın CSS uzantılarında aritmetiği etkinleştirmesi gerçeği CSS'nin kendisi için geçerli değildir, ancak Sass'ın CSS'nin dil stilini izlediğini ( $ve elbette olması gereken değişkenlerin öneki hariç) anlıyorum (ve kucaklıyorum) olmuştur @). Sass belgeleri CSS belgeleri gibi görünecek ve hissedilecekse, sınırlayıcı olarak tire kullanan CSS ile aynı stili izlemeleri gerekir. CSS3'te, aritmetik CSS'in calckendisinde bu bir sorun olmadığını gösteren fonksiyonla sınırlıdır .

Diller arasında değişken adlandırma ile tutarsızlık

Biçimlendirme dilleri, programlama dilleri, stil dilleri veya komut dosyası dilleri olan tüm diller kendi stiline sahiptir. Bunu, XML gibi dil gruplarının alt dillerinde bulacaksınız; örneğin, XSLT kısa çizgi sınırlayıcıları ile küçük harf kullanır ve XML Şeması deve gövdesi kullanır.

Genel olarak, yazdığınız dile en "doğal" hissi veren ve ona benzeyen stili benimsemenin, kendi tarzınızı her farklı dile ayakkabı kornasıyla denemekten daha iyi olduğunu göreceksiniz. Yerel kütüphaneleri ve dil yapılarını kullanmaktan kaçınamayacağınız için, stiliniz ister beğenip beğenmeseniz de yerel stil tarafından "kirlenecektir", bu yüzden denemek bile neredeyse nafiledir.

Benim tavsiyem, diller arasında favori bir stil bulmak değil, bunun yerine kendinizi her dilde evde yapmak ve tüm tuhaflıklarını sevmeyi öğrenmek. CSS'nin tuhaflıklarından biri, anahtar kelimelerin ve tanımlayıcıların küçük harfle yazılmış ve tire ile ayrılmış olmasıdır. Şahsen, bunu çok görsel olarak çekici buluyorum ve küçük harfli olmasına rağmen (küçük harfli olmasa da) HTML'ye uyduğunu düşünüyorum .

Belki de HTML / CSS topluluğunun alt çizgi yerine tire ile hizalanmasının önemli bir nedeni, teknik özelliklerde ve tarayıcı uygulamalarındaki tarihsel eksikliklerden kaynaklanmaktadır.

Mart 2001'de yayınlanan bir Mozilla belgesinden @ https://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Names

1996 yılında son haliyle yayınlanan CSS1 spesifikasyonu, "kaçmadan" sınıf ve kimlik adlarında alt çizgi kullanımına izin vermedi. Kaçan bir alt çizgi şöyle görünecektir:

    p.urgent\_note {color: maroon;}

Ancak bu, tarayıcılar tarafından iyi bir şekilde desteklenmedi ve uygulama hiç yakalanmadı. 1998'de yayınlanan CSS2, sınıf ve kimlik adlarında alt çizgi kullanımını da yasakladı. Ancak, 2001 başlarında yayınlanan spesifikasyondaki hatalar, alt çizgileri ilk kez yasal hale getirdi. Bu ne yazık ki zaten karmaşık bir manzarayı karmaşık hale getirdi.

Genelde alt çizgileri severim, ancak ters eğik çizgi onu umudun ötesinde çirkin hale getirir, o zaman kıt destekten bahsetmiyorum. Geliştiricilerin neden veba gibi kaçındığını anlayabiliyorum. Tabii ki, bugünlerde ters eğik çizgiye ihtiyacımız yok, ancak çizgi görgü kuralları zaten sağlam bir şekilde oluşturuldu.

Kimsenin buna kesin olarak cevap verebileceğini sanmıyorum, ama işte benim eğitimli tahminlerim:

1. Alt çizgiler Shift tuşuna basmayı gerektirir ve bu nedenle yazmak daha zordur.

2. Resmi CSS spesifikasyonlarının bir parçası olan CSS seçicileri, alt çizgi değil, tire kullanır (örneğin, ilk çocuk ve sözde elemanlar: ilk satır gibi). Metin dekorasyonu, arka plan rengi, vb. Özellikler için de aynı şey programcılar alışkanlık yaratıklarıdır. Yapmamak için iyi bir neden yoksa standardın stilini takip etmeleri mantıklıdır.

3. Bu çıkıntının üzerinde, ama ... İster efsane ister gerçek olsun, Google'ın alt çizgi ile ayrılmış kelimeleri tek bir kelime ve tire ile ayrılmış kelimeleri ayrı kelime olarak ele aldığı uzun zamandır devam eden bir fikir var. (Alt Çizgiler ve Kısa Çizgiler Üzerine Matt Cutts.) Bu nedenle, şimdi sayfa URL'leri oluşturma tercihimin tire işaretleri olan kelimeleri kullanmak olduğunu biliyorum ve en azından benim için bu, diğer şeyler için adlandırma kurallarımda yer aldı , CSS seçicileri gibi.

Birçok nedeni var, ama en önemli şeylerden biri tutarlılığı korumak .

Bu makalenin kapsamlı bir şekilde açıkladığını düşünüyorum .

CSS, tire ile sınırlandırılmış bir sözdizimidir. Bununla biz gibi şeyler yazmak demek font-size, line-height, border-bottomvb

Yani:

Sadece sözdizimlerini karıştırmamalısınız: tutarsız .

Son yıllarda URL'lerin tire ile ayrılmış, tam kelime URL segmentlerinde belirgin bir artış oldu. Bu SEO en iyi uygulamaları tarafından teşvik edilir. Google açıkça "URL'lerinizde alt çizgi (_) yerine tire (-) kullanmanızı öneririz": http://www.google.com/support/webmasters/bin/answer.py?answer=76329 .

Belirtildiği gibi, farklı bağlamlar farklı bağlamlarda farklı zamanlarda hakim olmuştur, ancak bunlar tipik olarak herhangi bir protokolün veya çerçevenin resmi bir parçası değildir.

Benim hipotezim, Google'ın konumunun bu kalıbı tek bir temel bağlamda (SEO) tutturması ve bu kalıbı sınıf, kimlik ve nitelik adlarında kullanma eğilimi, sürünün bu genel yönde yavaş hareket etmesidir.

Programcıya bağımlı bir şey olduğunu düşünüyorum. Bazıları tire işareti kullanmayı sever, diğerleri alt çizgi kullanır.
Şahsen undercores ( _) kullanıyorum çünkü başka yerlerde de kullanıyorum. Örneğin:
- JavaScript değişkenleri ( var my_name);
- Denetleyicimin eylemleri ( public function view_detail)
Alt çizgi kullanmamın bir başka nedeni, çoğu IDE'de alt çizgiyle ayrılmış iki kelimenin 1 kelime olarak kabul edilmesidir. (ve double_click ile seçim yapmak mümkündür).