Soru Çizgiler neden CSS seçicileri / HTML özellikleri için tercih edilir?


Geçmişte tanımlamak için her zaman alt çizgi kullanmıştım sınıf ve İD HTML'deki özellikler. Son birkaç yılda, çoğunlukla kendimi toplumdaki eğilim, zorunlu değil çünkü benim için mantıklı.

Her zaman çizgi daha fazla sakıncaları olduğunu düşündüm ve faydaları göremiyorum:

Kod tamamlama ve düzenleme

Çoğu editör, tire işaretlerini kelime ayırıcıları olarak kullanır, böylece istediğim simgeye bağlanamıyorum. Sınıfı söyle "featured-product"Otomatik tamamladım"featured", bir tire girin ve tamamlayın"product".

Alt çizgilerle "featured_product"tek kelime olarak kabul edilir, bu yüzden bir adımda doldurulabilir.

Aynı şey belgede gezinmek için de geçerlidir. Sözcüklerle atlama ya da sınıf adlarına çift tıklamak tire ile kesilir.

(Daha genel olarak, sınıfları ve kimlikleri belirteçleriBu yüzden bana bir sembolün kısa bir sürede tire üzerinde kolayca ayrılabilmesi gerektiğini anlamıyorum.)

Aritmetik operatör ile belirsizlik

Çizgileri kullanarak nesne özelliğini kırıyor form öğelerine erişim JavaScript’te Bu sadece alt çizgi ile mümkündür:

form.first_name.value='Stormageddon';

(Şüphesiz, form öğelerine bu yoldan erişemiyorum, ancak genel bir kural olarak altı çizgilere karar verirken, başka birinin de olabileceğini düşünün.)

Dil gibi şımarıklık (özellikle Pusula çerçeve) değişken isimler için bile standart olarak tire üzerinde yerleşti. Başlangıçta başlangıçta alt çizgiler kullandılar. Bunun ayrıştırıldığı gerçeği beni tuhaf olarak vurdu:

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

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

Gün içine, eskiden yazdım underscored_names PHP, ruby, HTML / CSS ve JavaScript değişkenleri için. Bu uygun ve tutarlı, ama yine de "uyum" 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 neden bu kadar huylu hale geldiğini merak ediyorum. En azından alt çizgilerle tutarlılığı sağlamak mümkün oldu:

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

Farklılıklar, zorunda olduğumuz durumlar yaratıyor çeviri dizeleri Gereksiz olarak, hata potansiyeli ile birlikte.

Bu yüzden soruyorum: Topluluk niçin neredeyse evrensel olarak dizginlere oturdu ve alttan ağır basan nedenler var mı?

Var ilgili soru Bu başladığı zaman etrafında, ama ben (ya da değil ki) olmamalı sadece bir tadı meselesiydi. Gerçekten sadece bir lezzet meselesi olsaydı neden hepimiz bu kongreye yerleştiğimizi anlamak isterim.


187
2017-09-26 20:18


Menşei


Tire kullanıyorum çünkü vardiya anahtarına basmam gerekmiyor. - Jrod
Bunun neden kapatıldığına meraklı olsaydı ... kapatmak için oy toplandı mı? Bu sorudaki görüşleri istemiyorum. Çizgilerin kullanılmasına karşı belirli nedenler verdim, ancak herkes bu eğilime katılıyorsa, onlar için iyi sebepler olmalı. Burada bazı iyi cevaplar ve iyi bilgiler var. Soruyu geliştirebilir miyim? - Andrew Vit
Yeniden açılma konusundaki sorumu aday gösteriyorum: Aşağıdaki tüm cevaplar “gerçekler, referanslar veya özel uzmanlık” ı içerir ... bu yüzden nasıl “yapıcı” olmadığını göremiyorum. - Andrew Vit
Bu konuyu yapıcı olmayan bir şekilde aptalca bir karar olarak görüyorum. Tercih dışında bir şeyden dolayı tercih edilen bir kodlama tarzı varsa (IDE'lerin ele alması için daha kolay, daha kolay kod tamamlama, araçlarla daha iyi entegrasyon) oldukça yapıcı bir soru / cevap / tartışma olacağını düşünüyorum. - Jake Wilson
@AndrewVit: Bu çok iyi bir soru, iyi biçimlendirilmiş, bilgilendirici ve birçok yönü vurgulamaktadır. Bunun için +1. Btw., Bu konuyu kapatmak için anlamsız olduğunu kabul ediyorum. "yapıcı değil". Aslında yapıcıdır. - Sk8erPeter


Cevaplar:


Kod tamamlama

Çizgi işareti noktalama işareti olarak mı yoksa opak bir tanımlayıcı olarak mı yorumlanır, seçim editörüne bağlıdır. Bununla birlikte, kişisel bir tercih olarak, bir CSS dosyasındaki her kelime arasında sekme yapabilmeyi ve alt çizgi ile ayrılmış olsaydı ve hiçbir duraklama olmadığında can sıkıcı bulabilirim.

Ayrıca, tire kullanmak, | = özellik seçiciisteğe bağlı olarak bir çizgi izleyen metni içeren herhangi bir öğeyi seçer:

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

JavaScript'teki nokta işaretleme yoluyla HTML öğelerine erişimin, bir özellikten ziyade bir hata olduğunu söyleyebilirim. Bu, korkunç JavaScript uygulamalarının ilk günlerinden korkunç bir yapı ve gerçekten harika bir uygulama değil. Bugünlerde JavaScript’le yaptığınız çoğu şey için kullanmak istiyorsunuz CSS Seçiciler Neyse, DOM'den elemanlar almak için, tüm nokta notasyonunu 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;

Özellikle ilk iki seçeneği çok daha fazla tercih ederim. '#first-name' bir JavaScript değişkeni ile değiştirilebilir ve dinamik olarak oluşturulabilir. Onları gözlerinde daha hoş buluyorum.

Sass'in CSS'ye uzantısında aritmetiği mümkün kıldığı gerçeği gerçekten CSS'nin kendisi için geçerli değildir, fakat Sass'ın CSS'nin dil stilini takip ettiği gerçeğini anlıyorum (ve kucaklıyorum). $ elbette olmalıydı değişkenlerin öneki @). Sass belgeleri CSS belgeleri gibi görünmek ve hissetmekse, bir sınırlayıcı olarak tire kullanan CSS ile aynı stili izlemelidirler. CSS3'te, aritmetik sınırlı calc CSS'nin kendisinde olduğunu gösteren bir işlev değildir.

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

Tüm diller, biçimlendirme dilleri, programlama dilleri, stil dilleri veya komut dosyası dilleri, kendi stiline sahiptir. Bunu, XML gibi dil gruplarının alt dillerinde bulabilirsiniz. XSLT tire sınırlayıcıları ile küçük harf kullanır ve XML Şeması deve-muhafaza kullanır.

Genel olarak, yazdığınız dile en çok "doğal" olan ve en çok benzeyen stilin benimsenmesi, kendi tarzınızı her farklı dile çevirmeye çalışmaktan daha iyidir. Yerel kütüphaneleri ve dil yapılarını kullanmaktan kaçınamayacağınız için, tarzınız ister sevdiğiniz ister olmasın, yerel stil tarafından "kirletilecek", bu yüzden denemek bile imkansız.

Benim tavsiyem, dillerin arasında favori bir stil bulmak değil, bunun yerine her dilin içinde kendinizi evinizde hissettirmek ve tüm tuhaflıklarını sevmeyi öğrenmek. CSS'nin sıkıntılarından biri, anahtar kelimelerin ve tanımlayıcıların küçük harfle yazılmasının ve tire ile ayrılmasının olmasıdır. Kişisel olarak, bunu görsel olarak çekici buluyorum ve küçük harfle (no-tire olsa da) uygun olduğunu düşünüyorum. HTML.


119
2017-09-26 21:07



"Çizgi, noktalama işareti olarak veya opak bir tanımlayıcı olarak yorumlanıp yorumlanılmayacağı, seçim editörüne bağlıdır" Bazı istisnai editörler olsa da bunun genel olarak doğru olmadığını düşünüyorum. Hecelenmiş bir kelimeye çift tıklamak, yalnızca bir parçasını seçer, tüm belirteci değil: Bu, işletim sistemi genelinde görünür. - Andrew Vit
Hakkında iyi bir nokta |= seçici, diğer cevapta bunu gördüm ve bu adil bir nokta. Bu etrafında veya başka bir şekilde tasarlanan dil sözleşmesi miydi? (Evrensel bir eğilim olarak Tire'ler nispeten yeni görünmektedir, bunlar aynı zamanda ortaya çıkmış olabilir.) - Andrew Vit
@AndrewVit, çift tıklamanın uygun olmadığı (genellikle fare olmadığı için) ve bu tür davranışlara sahip olacak şekilde yapılandırılabilen CLI tabanlı düzenleyiciler vardır. Ama genelde haklısın. |= öznitelik seçici özellikle için yapılır lang öznitelik, ancak kullanımı uzatılabilir. CSS'mde her zaman tire kullandım, bu yüzden genel halk için konuşamıyorum, ama kesinlikle pascal vakası, deve vakası ve alt çizgilerden gelen klişelere doğru bir yakınlaşma oldu. |= Ancak sınırlayıcı olarak selektör ve tire, ilişkisiz olduğunu söyleyebilirim. - Asbjørn Ulsberg
Nokta notasyonu bir hata olarak görmüyorum, tire kullanmamalı olan CSS. Ayrıca, gözler için hoş olan şey değişkendir. - vivek
@ KamilKiełczewski Bu yararlı, ama biraz farklı çalışır. - gcampbell


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

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

1996 yılında son haliyle yayınlanan CSS1 belirtimi,   sınıf ve kimlik adlarında alt çizgi kullanılmasına izin vermedikçe   "kaçtı" Kaçan bir alt çizgi şöyle bir şey olurdu:

    p.urgent\_note {color: maroon;}

Ancak bu, tarayıcılar tarafından iyi bir şekilde desteklenmedi ve   Uygulama hiç yakalanmadı. 1998 yılında yayınlanan CSS2, ayrıca yasakladı   Sınıf ve ID isimlerinde alt çizgi kullanımı. Ancak, errata için   2001 yılı başlarında yayınlanan şartname için yasal altını çizdi   İlk kez. Bu maalesef zaten karmaşık bir komplekstir   manzara.

Genelde alt çizgilerden hoşlanıyorum ama ters eğik çizgi, o zamanın o zamanki az sayıdaki desteğinden bahsetmek değil, umutsuzluğun ötesine geçiyor. Geliştiricilerin niçin veba gibi niçin kaçtığını anlayabiliyorum. Tabi ki, günümüzde ters eğik çizgiye ihtiyacımız yok, ancak çizgi alameti zaten sağlam bir şekilde kurulmuş.


48
2017-11-27 21:01



Teşekkürler! Böyle bir sözleşmenin 'etimolojisini' bulmayı çok seviyorum. Dili, onunla ilişkilendirebildiğimden beri, kongreyi kullanmayı hatırlamama yardımcı olur. Derneğime sahip olmak, bilinçaltımı bilinçlendirmek için bana kongreyi kullanmamda yardımcı oluyor. - Ape-inago
Bu doğru cevap olması muhtemel görünüyor - steampowered


Kimsenin bunu kesin olarak cevaplayabileceğini sanmıyorum, ama benim eğitimli tahminlerim:

  1. Alt çizgiler, Shift tuşuna basılmasını gerektirir ve bu nedenle yazmak daha zordur.

  2. Resmi CSS özelliklerinin bir parçası olan CSS seçicileri, alt çizgi değil, tire gibi (sözde-sınıflar gibi: ilk-çocuk ve sözde-ögeler: ilk satır) kullanır. Özellikler için aynı şey, ör. metin dekorasyon, arka plan rengi vb. Programcılar alışkanlık yaratıklarıdır. Olmaması için iyi bir neden yoksa, standardın tarzını takip etmeleri mantıklıdır.

  3. Bu bir çıkıntıya daha da yaklaşıyor, ama ... Efsane mi yoksa gerçek mi? Google'ın altçizgi ile ayrılmış kelimeleri tek bir kelime olarak ele aldığı ve tire ile ayrı kelimeler olarak ayrılmış kelimeler gibi uzun bir düşünce var. (Alttan Sıçanlara ve Kesiklere Sıvılar.) Bu nedenle, sayfa URL'leri oluşturmama tercihim, kelimelerle-tire kullanmaktır ve en azından benim için CSS seçicileri gibi başka şeyler için benim adlandırma kurallarına isabet ettiğimi biliyorum.


37
2017-09-26 21:16



URL'lerde ve semantik işaretlemede tire ile ilgili olarak iyi bir nokta (bunun gerçekten de doğru olup olmadığı) ... Hangi "CSS özelliklerinin resmi CSS özelliklerinin parçası olan tire işaretlerini kullandığını" açıklayabilir misiniz? - Andrew Vit
Birkaç örnek vermek için cevabımda 2. noktaya kadar genişledim, ancak "seçmenler" yerine CSS özellikleri hakkında daha çok düşünmekteydim, bu yüzden bir kaç yazım hatası olsa da yukarıda not edildi. - Mason G. Zhwiti
Teşekkürler @albert, bu kendi başına iyi bir cevap verirdi ... en azından tarihsel bağlam için. Orijinal özelliklerin alt çizgilere izin vermediğini bilmiyordum! (Ama neden izin verilmemesi gerektiğini anlamamıştır.) - Andrew Vit
2 numaralı nokta, özellikle arka plan rengi, metin-dekorasyon, vb. Özellikleriyle beni ikna etti. - David Kennedy
FYI meraklı için, @ albert'in yukarıdaki yorumunda atıfta bulunulan deved-temp url (devedge-temp.mozilla.org/viewsource/2001/css-underscores) şu anda developer.mozilla.org/en-US/docs/... - aponzani


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

Belirtildiği gibi, farklı bağlamlarda farklı bağlamlarda farklı sözleşmeler hüküm sürmüş, ancak bunlar genellikle herhangi bir protokolün veya çerçevenin resmi bir parçası değildir.

Öyleyse, hipotezim, Google'ın konumunun bu modeli bir anahtar bağlamda (SEO) tutturmasıdır ve bu modeli sınıf, kimlik ve özellik adlarında kullanma eğilimi, bu genel yönde yavaşça hareket eden sürütdür.


11
2017-09-26 22:16





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

bence bu Makale kapsamlı bir şekilde açıklar.

CSS, tire ile sınırlandırılmış bir sözdizimidir. Bununla demek istediğim, font-size, line-height, border-bottom vb.

Yani:

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


3
2018-03-22 09:39





Sanırım programcıya bağımlı bir şey. Someonlar tire kullanmayı sever, diğerleri alt çizgi kullanır.
Kişisel olarak alt çizgiler kullanıyorum (_) çünkü başka yerlerde de kullanıyorum. Gibi:
- JavaScript değişkenleri (var my_name);
- Denetleyici eylemlerim (public function view_detail)
Alt çizgileri kullanmamın bir başka nedeni de, çoğu IDE'de altçizgi ile ayrılmış iki kelimenin 1 kelime olduğu düşünülmektedir. (ve double_click ile seçmek mümkündür).


2
2018-06-29 07:43