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

供参考：SCSS.extend（）

关于这个问题的类似帖子：对clearfix 使用扩展

假设我要创建几个类，这些类可以在整个项目中进行扩展和重用：

例如，一个类可以是：

 //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的DRY-est方法之一。我觉得在写了一页的几个部分之后，这种方法可能会变得非常高效和成功。此外，这些类中的大多数可以通过许多项目进行细化和使用。我真的很想试用它，但我担心从长远来看，它可能会导致一些性能问题，尤其是当类开始使用伪类时，比如：after:before。

与仅仅添加类或编写mixin相比，性能会受到影响吗？有人有任何统计数据来备份最佳路线吗

我喜欢制作scs占位符并通过@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;
  }

Margin，padding可以通过CSS重置方法全局设置为0，因此不需要每次都设置它们。盒子大小可以用*选择器设置，因为我不确定你是否想在同一页上混合不同的盒子型号。使每个元素的位置相对可能会引起问题，除非有充分的理由，否则我不确定我会这么做。100%宽度是块级元素的默认值，对内联元素没有任何作用。根据我的经验，100%的身高很少是一个令人满意的解决方案。

所以我真的不认为有必要上那门课。不过，这只是一个例子，总的来说，如果你在构建HTML和CSS时很小心，那么你可以从@extend中获得大量重用，而不会在生成的CSS中有很多逗号。我发现@extend'ed类在小而特定的情况下效果最好，例如，在你的网站配色方案中针对不同颜色的类，然后根据需要将它们包含在各种更特定的类中。它需要一点纪律（例如，除了在colors.scs中，不要在其他地方定义颜色，每次都要考虑是否有更好的方法来扩展它），但最终会给出非常一致和DRY的代码。

就性能而言，我认为这基本上不是一个问题，不值得担心。调试是一个更大的问题，因为过多地扩展一个类会给Chrome/FF CSS开发工具带来巨大的选择器，从而使跟踪问题变得更加困难。有关统计信息，请查看http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

最大的惊喜是，从基线到最复杂、性能最差的测试页面，delta是多么的小。平均减速在所有浏览器中是50ms，FF3），平均delta仅为20ms。对于今天的70%或更多用户，改进这些CSS选择器只会使改善

优化选择器最多只能提高50ms的性能，而这是4年前的数据，所以差异可能比现在小。编写为可维护性、一致性和重用而设计的CSS是一个更高优先级的IMO，因为从性能的微观优化中获得的收益几乎是不明显的。

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

你可以嵌套或分组多少类并不是强制性的，但我不理解你背后的逻辑。让我用例子解释一下。

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

结果不一样..：）

更新

相关内容

最新更新

热门标签：