Маркировка элементов HTML, меньше и больше

Question

Каковы компромиссы и преимущества между разметкой меньшего количества элементов (больше селекторов с потоками в CSS, которые являются неэффективными) и использование большего количества классов с более простыми и более эффективными селекторами (только класс и идентификатор, которые являются более эффективными), в частности, в контексте большого сайта с помощью v8 CMS (Ektron CMS400)

до сих пор я придумал несколько только:

Использование меньшего количества классов, это легче редактировать текст с CMS (или любой) WYSIWYG:

<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> 

Использование большего количества классов и идентификаторов, мы получаем более эффективные селекторы, но немного раздутый разметки:

<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 или набрал в WYSIWYG.

Есть ли какие-либо другие варианты или вопросы, которые следует учитывать здесь?

Ссылки:

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

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

Answer 1

Я всегда смотрю на это следующим образом.

Код в листе CSS обычно загружается один раз и кэшируется. Код в HTML загружается на каждую страницу. Таким образом, уменьшение количества классов уменьшает количество кода, которое необходимо загрузить при каждом запросе.

Поэтому я использую потомков.