css命名約定討論（jqueryui）

Question

我正在處理涉及大量客戶端代碼的項目。我們正在討論css類和元素ID的命名約定，我很驚訝沒有關於這個的在線材料。

我注意到，jquery ui使用了一個約定風格命名平鋪（如ui-widgetname-classname- [subclassname]），而不是根據它們的層次結構命名這些類（.ui .widget .classname）。我想這使得它更少依賴於DOM結構，但創建了非常長的名字。

根據您的經驗，您是否具有命名css樣式的樣式指導？任何Dos和Donts以及避免的陷阱？

希望聽到來自你

Answer 1

使用.ui-widget-classname代替.ui .widget .classname是由於對傳統瀏覽器（即IE6/7）支持。儘管能夠一次選擇多個類將使您的CSS更具可讀性和可維護性，但IE6/7的行爲並不像預期的那樣。

例如，瞄準，準確的元素，你將需要連鎖的樣式，像這樣：

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

會什麼元素在IE6/7 .classname匹配。像.ui-widget-classname這樣的類爲您提供了一個非常具體的選擇器，以冗長的代價爲目標。

另一種解決方案是嵌套divs，就像這樣：

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

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

在這種情況下，您的樣式將在所有瀏覽器。

在這兩個選項之間，我想象一下，jQuery UI選擇儘可能少地修改DOM，只需一個div，同時仍然可以輕鬆訪問樣式。