Css 标记Html元素，少与多

标记更少的元素（CSS中更多的后代选择器，效率较低）和使用更多类和更简单、更高效的选择器（仅类和id，效率更高），特别是在使用CMS（Ektron CMS400 v8）的大型网站环境中，两者之间的权衡和好处是什么

到目前为止，我只提出了几个：

使用较少的类，使用CMS（或任何）WYSIWYG编辑文本更容易：

章节标题



...

...
...
#部分{…}
#部分h2{…}
#某些部分ul{…}
#某处{…}
#某一节ula{…}
#部分img{…}

使用更多的类和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>

章节标题



...

...
#部分{…}
.标题{…}
.featureList{…}
.feature{…}
.featureLink{…}
.inlineImage{…}

我更倾向于使用更少的类，使用更复杂的选择器，因为很大一部分将在CMS中手工编码或输入WYSIWYG

<> P>还有其他的选择或问题要考虑吗？ 参考资料：

---

我总是用以下方式看待它

CSS表中的代码通常只加载一次并缓存。 HTML中的代码加载到每个页面上。因此，减少类的数量可以减少每次请求所需加载的代码量

---

因此，我使用后代。

编辑以缩小问题的范围

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