css adlandırma kuralı tartışması (jqueryui)

Question

Çok sayıda istemci taraf kodu içeren bir proje üzerinde çalışıyorum. Biz css sınıfları ve eleman kimlikleri için adlandırma kuralları tartışıyorduk ve bu konuda hiçbir malzeme online şaşırdım.

JQuery ui'nin, hiyerarşisine (.ui .widget .classname) dayalı olarak bu sınıfları adlandırma yerine, düzleştirilmiş stilin (ui-widgetname-classname- [subclassname] gibi) bir kuralı kullandığını fark ettim. Bu, DOM yapısına daha az bağımlı hale getirdiğini, ancak oldukça uzun isimler oluşturduğunu sanırım.

Deneyimlerinize dayanarak, css stillerini adlandırmak için stil kılavuzunuz var mı? önlemek için herhangi bir Dos ve Donts ve tuzaklar? Eğer

Answer 1

.ui-widget-classname kullanma yerine .ui .widget .classname mirası tarayıcılar (yani IE6/7) desteği nedeniyle gelen

Umut duymak. Aynı anda birden fazla sınıf seçebilmek CSS'nizi daha okunabilir ve sürdürülebilir kılarken, IE6/7 beklendiği gibi davranmayacaktır.

Örneğin

, bunu böyle zincire stilleri gerekir, o kesin elemanı hedef:

.ui.widget.classname { 
    background: red; 
} 

IE6/7'de .classname ile şey elemanını maç olurdu. .ui-widget-classname gibi sınıflar, size, belirli bir maliyetle, hedefleme maliyeti sağlar.

diğer çözüm şöyle, divs yuvalama: En stilleri tüm tarayıcılarda çalışacak

<div class="ui"> 
    <div class="widget"> 
    <div class="classname"> 
    </div> 
    </div> 
</div> 

.ui .widget .classname { 
    background: red; 
} 

Hangi durumda.

Bu iki seçenek arasında, jQuery UI ürününün DOM için tek bir div ürününü olabildiğince az değiştirmeyi ve stil için kolay erişim sağlamayı seçtiğini hayal ediyorum.