Question

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

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

使用更少的类，使用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>

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

Answer 1

我总是以下面的方式看待它。

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

因此，我使用后代。

标记Html元素，减少与更多

1 个答案: