標記Html元素，更少與更多

標記更少的元素（CSS中更多的後代選擇器，效率低下）和使用更多的類與更簡單和更高效的選擇器（只有類和id，它們之間的折衷和好處是什麼更高效的），特別是使用CMS（曄CMS400 V8大型網站）標記Html元素，更少與更多

到目前爲止，我想出了只有少數的範圍內：

使用較少的類，它更容易編輯文本與CMS（或任何）所見即所得：

<div id='someSection'> 
    <h2>SECTION TITLE</h2> 
    <ul> 
     <li><a href='...'>ITEM</a></li> 
     <li><a href='...'>ITEM</a></li> 
     ... 
    </ul> 
    <img src='...' /> 
    ... 
</div> 
... 
<style> 
    #someSection { ... } 
    #someSection h2 { ... } 
    #someSection ul { ... } 
    #someSection li { ... } 
    #someSection ul a { ... } 
    #someSection img { ... } 
</style>

使用更多的類和id的，我們得到了更有效的選擇，但略顯臃腫的標記：

<div id='someSection'> 
    <h2 class='heading'>Section Title</h2> 
    <ul class='featureList'> 
     <li class='feature'><a class='featureLink' href='...'>A</a></li> 
     <li class='feature'><a class='featureLink' href='...'>A</a></li> 
     ... 
    </ul> 
    <img class='inlineImage' src='...' /> 
    ... 
</div> 

<style> 
    #someSection { ... } 
    .heading { ... } 
    .featureList { ... } 
    .feature { ... } 
    .featureLink { ... } 
    .inlineImage { ... } 
</style>

，因爲很大一部分我傾向於更傾向於使用較少的班級，更復雜的選擇將手工編碼的CMS或鍵入所見即所得。

有沒有其他的選擇，或問題在這裏考慮？

參考文獻：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

http://csswizardry.com/2011/09/writing-efficient-css-selectors/

來源

2013-11-22 xst

編輯縮小問題的範圍 – xst