用於jQuery選擇器的CSS類命名的最佳實踐

Question

構建一個Javascript重載的Web應用程序時，命名CSS類以保持Javascript代碼和CSS樣式表清潔並且UI結構靈活的最佳做法是什麼？

---

選項1：名稱的每一個唯一地元件。

例如，

// HTML 
<div id="list"> 
    <button class="list-delete" /> 
    <div class="list-items"> 
    <div class="item"> 
     <button class="item-delete" /> 
     <h1 class="item-name">Item 1</h1> 
    </div> 
    </div> 
</div> 

// CSS 
.list-delete { 
    color: black; 
} 

.item-delete { 
    color: blue; 
} 

// Javascript 
$(".list-delete").show(); 
$(".item-delete").hide(); 

優點：

• 選擇了造型或JS操作的項目是很容易

缺點：

• 元素名稱開始變得雷爾Ÿ漫長而艱難的跟蹤
• 更改HTML結構需要大量的重命名

---

方案二：名稱的每一個元素語義，並選擇要素分層。

例如，

// HTML 
<div id="list"> 
    <button class="delete" /> 
    <div class="items"> 
    <div class="item"> 
     <button class="delete" /> 
     <h1 class="name">Item 1</h1> 
    </div> 
    </div> 
</div> 

// CSS 
#list > .delete { 
    color: black; 
} 

#list > .items > .item > .delete { 
    color: blue; 
} 

// Javascript 
$("#list > .delete").show(); 
$("#list > .items > .item > .delete").hide(); 

優點：

• 命名感覺更自然，而且名稱是簡短明瞭

缺點：

• 選擇元素爲styl ING或操縱笨重
• 更改HTML結構需要改變很多選擇的，因爲名字是綁層次結構

---

選項3，...，N：一些混合的方法？完全不同的方法？

請注意將來添加更多元素時名稱衝突的問題，特別是當您有嵌套元素時。另外，理想的解決方案可以很容易地改變現有元素的HTML結構，而不會在其他地方造成過多的中斷。

Answer 1

試圖處理獨特的名稱可以很好地適用於小型項目，但是越大越有可能發生衝突。

這就是爲什麼我喜歡第二種方法。

但是，爲了更容易，您可以使用SASS來預處理您的css文件。然後你可以做這樣的嵌套：

#list { 
    .delete { 
    } 
    .items { 
     .item { 
     } 
    } 
} 

而且你會得到類似於你的第二個例子的代碼，而不必寫出全部。

至於jQuery選擇器，如果你想這樣做，仍然需要寫出這些選擇器，但如此複雜的選擇器往往被認爲是一個糟糕的設計的標誌。

Answer 2

我建議在向您的HTML添加類和ID時儘可能保守。在大多數情況下，爲內容的主要部分使用ID和使用標籤選擇器將會像在所有內容上放置類一樣工作。在您的示例中的HTML可以更簡潔地被改寫爲：

<div id="list"> 
    <button class="delete" /> 
    <div class="items"> 
    <div> 
     <button class="delete" /> 
     <h1>Item 1</h1> 
    </div> 
    </div> 
</div> 

然後是jQuery選擇是：

$("#list > .delete").show(); 
$(".items .delete").hide(); 

（你可以使用更多的語義HTML5標記，因此依靠更少的但我會認爲這超出了問題的範圍。）

Answer 3

這實際上取決於你的頁面的結構和大小。

某些情況下，會更好地發揮使用選項1，有的會更好地與方案2

我通常以「無論是最適合這種特定情況下」

Answer 4

方案1走：命名每一個元素 唯一。

這幾乎是不可能的，絕對不是最佳實踐。我認爲如果可以通過對相關樣式和屬性進行分組來使用有意義的類，那會更好。

選項2：以語義方式命名每個元素 ，並分層次選擇元素 。

我更喜歡這一個。至少你知道流量和事情。

選項3 ... n：一些混合方法？ A 完全不同的方法？

總有一種混合方法和完全不同的方法。我認爲每個開發人員都有自己的編碼風格。如果它的字面正確和結構良好，那將是最好的方法。

Answer 5

這是一個非常好的問題。我想你的第一個選項（名稱每一個元素唯一）是正確的，這是因爲：

• 元素類（沒有名字）不那麼長，
• 強調的是小組提出的總之，所以該組的HTML結構不應該經常變化，並且這種方式可以更容易地發現UI結構中的缺陷。

這就是說，我會用一個稍微不同的標記：

<div id="list"> 
    <button class="delete" /> 
    <div class="list-items"> 
     <div class="list-item"> 
      <button class="delete" /> 
      <h1 class="list-item-name">Item 1</h1> 
     </div> 
    </div> 
</div> 

Answer 6

最乾淨的解決辦法是脫鉤的一切：HTML - CSS - JS。爲此，您可以使用第一種方法（單個命名允許將CSS類應用於任何HTML元素），但另外還要爲JS添加專門命名的類。就像這樣，你不必害怕打破你的JS，如果他們刪除一個CSS類，反之亦然。

一個好的閱讀有關如何最好地實現這樣的命名約定： http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

// HTML 
<div id="list"> 
    <button class="list-delete js-list-delete" /> 
    <div class="list-items"> 
    <div class="item"> 
     <button class="item-delete js-item-delete" /> 
     <h1 class="item-name">Item 1</h1> 
    </div> 
    </div> 
</div> 

// CSS 
.list-delete { 
    color: black; 
} 

.item-delete { 
    color: blue; 
} 

// Javascript 
$(".js-list-delete").show(); 
$(".js-item-delete").hide();