元素中有多個類是一個好的（或最好的）練習？

-3

在單個元素中有多個類是一種好的做法？像這樣：元素中有多個類是一個好的（或最好的）練習？

<div class ="panel panel-primary panel-hide text-center">

或者是更好地做到這一點：

<div class ="panel"> 
    <div class="panel-primary"> 
     <div class="panel-hide"> 
      <div class="text-center"> 
      <!-- content here -->

或者是更好的類限制爲2或3每格？

還是它甚至重要？

來源

2015-02-06 raneshu

使用很多，你有太多和需要更少。 – 2015-02-06 23:54:06

謝謝@claudiu。你的意思是儘可能少的divs？所以基本上試圖把所有類放在1個div中？ – raneshu 2015-02-06 23:57:05

根據[spec]（http://www.w3.org/TR/html5/dom.html#classes），類應該描述內容的性質，而不是描述所需內容呈現的值。所以'文字中心'是一個糟糕的類。並根據內容將所有類添加到相同的元素或不同的元素。 – Oriol 2015-02-06 23:58:31

您是否從Bootstrap網站獲得了部分這些類和代碼段？

有時類需要在單獨的嵌套div上，因爲它們使用：before和：after或margin，爲該div填充或定位。當你將所有類粘貼到一個div中時，這可能不起作用，並且類可能會覆蓋彼此。

來源

2015-02-07 00:02:41

取決於項目，你正在努力完成什麼，以及你正在使用的預先存在的助手。

如果您使用的是Twitter Bootstrap之類的東西，請使用您提供的內容以最少的代碼完成所需的工作。

如果您正在構建自定義類的東西，請堅持使用一種模式並遵循。你想知道你爲什麼要添加一個類，否則你可能會遇到特定問題，然後再添加更多的東西來確定一個特定的元素。

如果添加一個類將保存10行重複代碼，因爲您使用類似的項目重複相同的樣式，絕對是爲了它。但是，我喜歡儘可能使課程保持精簡。

一個非常歸結例如：

本

<div class="one"> 
    <p> 
     <h1>Hi there!</h1> 
    </p> 
</div> 

.one { 
    /* css here */ 
} 

.one > p { 
    /* more css here */ 
} 

.one > p > h1 { 
    /* even more css here */ 
}

可以改爲工作這一切的

<div class="one"> 
    <p class="one-p"> 
     <h1 class="one-header">Hi there!</h1> 
    </p> 
</div> 

.one { 
    /* css here */ 
} 

.one .one-p { 
    /* more css here */ 
} 

.one .one-p .one-header { 
    /* even more css here */ 
}

來源

2015-02-07 01:32:31

元素中有多個類是一個好的（或最好的）練習？

回答

相關問題