Question

假设我要创建一些可以在整个项目中扩展和重用的类：

例如，一个类可以是：

 //common boilerplate for most of my parent divs
 .scaffold
  {
    position: relative;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }

//or a typical clearfix

.group:after {
  content: "";
  display: table;
  clear: both;
}

假设我在属性中有十几个具有各种目的和/或差异的类。在什么时候扩展课程会对性能造成伤害？例如 - 如果这个班级有50个不同类别的逗号

SCSS类之一的书面示例

   .site-header
      {
        @extend .group;
        @extend .scaffold;
        background: papayawhip;
        border-bottom: 1px #ccc solid;
      }

示例编译的clearfix可以是CSS

.group:after, .site-header, .route-nav, .main-article, .article-header, .side-bar, .site-footer 
 //this could go on for a while
{ 
  content: "";
  display: table;
  clear: both;
}

示例HTML

<!DOCTYPE html>
<html lang="en">

<body>
    <header class="site-header">
    <nav class="route-nav">

    <nav>
    </header>
    <article class="main-article">
        <header class="article-header"></header>
    </article>
    <aside class="side-bar">
    </aside>
    <footer class="site-footer">
    </footer>
</body>
</html>

我觉得这可能是编写CSS的最干燥方法之一。我觉得在编写一个页面的几个部分后，这种方法可以变得非常有效和成功。此外，大多数这些类可以通过许多项目进行改进和使用。我真的想尝试一下但我担心从长远来看会导致一些性能问题，尤其是当类开始使用伪类时：例如：after：before。

与仅仅添加课程或编写混音相比，是否会有性能影响？有没有人有任何统计数据来备份最佳路线？

Answer 1

我喜欢制作scss占位符并通过@extend重新使用它们的想法。这被一些人称为“OOSCSS”方法，如果你谷歌那么你可以找到更多相关信息。它有助于编写DRY代码并促进重用和一致性。我认为你的想法一般都在正确的轨道上，但特别是你的脚手架类似乎可能更好：

 .scaffold
  {
    position: relative;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }

边距，填充可以使用CSS重置方法全局设置为0，因此无需每次都设置它们。可以使用*选择器设置Box-sizing，因为我不确定您是否想要在同一页面上混合使用不同的盒子模型。让每个元素的位置相对可能会导致问题，我不确定我会这样做，除非有充分的理由。对于块级元素，100％宽度是默认值，对于内联元素不会执行任何操作。根据我的经验，100％的高度很少是一个令人满意的解决方案。

所以我真的认为根本不需要那个班级。这只是一个例子，一般来说，如果你在构建HTML和CSS时要小心，那么你可以从@extend中获得大量的重用，而不会在生成的CSS中有很多行逗号。我发现如果@ extend'ed类很小且具体，它们的效果最好，例如：站点颜色方案中的不同颜色的类，然后根据需要将它们包含在各种更具体的类中。它需要一些规则（例如，不要在colors.scss中的任何其他地方定义颜色，并且如果有更好的方法，每次你扩展它时都要考虑），但最后会给出非常一致的DRY代码。

在表现方面，我认为这基本上不是问题，不值得担心。调试是一个更大的问题，因为太多扩展单个类将使用巨大的选择器“垃圾”Chrome / FF CSS开发人员工具，这使得更难以追踪问题。有关统计信息，请查看http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

最大的惊喜是delta从基线到最复杂，性能最差的测试页面的小小。平均放缓所有浏览器都是50毫秒，如果我们看一下大的浏览器（IE 6＆amp; 7， FF3），平均增量仅为20 ms。今天的70％或更多用户，改进这些CSS选择器只需要20毫秒改善。

优化您的选择器最多只能提供50ms的性能提升 - 这是4年前的数据，所以差异可能比现在差。编写专为可维护性，一致性和重用而设计的CSS是一个更高优先级的IMO，因为它对性能的微优化获得的收益几乎不可察觉。

Answer 2

选择器的解析与性能无关。这是如何跟踪匹配的一切。 *很明显，你必须更新每个元素。长查询需要大量遍历来确定元素是否与查询匹配。逗号？它们并不重要，重要的是每个选择器的内容

Answer 3

它不是强制你可以嵌套或分组的课程数量，但我不理解你背后的逻辑。让我用例子来解释。

.a{
color:white;
}

.b{
font-size:10px;
}

.c{
background-color:red;
}

HTML中的

<div class="a b c">TEST</div>

你为什么要这样做？

你实际上可以这样做

.a{
color:white;
font-size:10px;
background-color:red;
}

HTML中的

<div class="a">TEST</div>

您的CSS文件是由浏览器下载的，因此如果非常的CSS样式文件需要更多时间加载，请记住这一点。您可以随意在分组中添加更多类，但是更多无用的类将在那里加载网站的速度越慢。它会降低你的表现。

更新

如果你担心一遍又一遍地混合类，那么你不应该担心，因为我们为什么要在代码中的任何地方使用CSS及其类，并在顶部声明一次。它类似于php中的函数，你可以在任何地方使用函数，但你可以使用不同参数的函数，因此结果会有所不同。

例如在CSS中，

.hidden{
display:none;
overflow:hidden;
}

.text{
font-size:10px;
color:black;
}

#id .text{
font-size:20px;
color:green;
}

现在在HTML中

如果我们将使用

<diiv id="id">
<div class="text">Text</div>
</div>

和

<div class="text">Text</div>

结果不一样.. :)

CSS中有多少逗号是逗号太多

3 个答案:

更新