标记 Html 元素，少与多 [关闭]答案

【问题标题】：Tagging Html Elements, Less vs More [closed]标记 Html 元素，少与多 [关闭]
【发布时间】：2013-11-22 19:27:39
【问题描述】：

标记更少的元素（CSS 中更多的后代选择器，效率低下）和使用更多的类和更简单、更有效的选择器（只有类和 id，效率更高）之间的权衡和好处是什么，特别是在使用 CMS (Ektron CMS400 v8) 的大型网站的上下文

到目前为止，我只提出了一些：

使用更少的类，使用 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 中手动编码或输入到 WYSIWYG 中。

这里还有其他选择或需要考虑的问题吗？

参考资料：

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

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

【问题讨论】：

编辑以缩小问题范围

标签： css content-management-system ektron

【解决方案1】：

我总是这样看。

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

因此，我使用后代。

【讨论】：