CSS中有多少逗号是太多的逗号[关闭]答案

【问题标题】：How many commas are too many commas in CSS [closed]CSS中有多少逗号是太多的逗号[关闭]
【发布时间】：2013-07-27 13:35:36
【问题描述】：

供参考： SCSS .extend()

关于这个问题的类似帖子： Using extend for 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 相比，性能会受到影响吗？有没有人有任何统计数据可以备份最佳路线？

【问题讨论】：

除非您有真正的理由担心性能，否则不要担心性能，是吗？任何地方都有那么多逗号是代码的味道。
以 clearfix 为例：我有两个选项将它写在 html 中，这对可重用性很好，但在 html 方面很难看。或使用将多次重写代码的混合。 “代码气味”是什么意思？我只是好奇我会注意到这条路线的缓慢吗？
为了便于阅读，我更喜欢clearfix，以了解 html 元素上有一个 clearfix。如果您在一个绝对可行的团队中工作，或者如果另一个开发人员曾经离开过这个项目。
@MatthewHarwood，那就去吧。我认为它没有性能问题。
在我看来你有你的 A 和你的 B，所以去做一个基准测试。

标签： html css sass less extend

【解决方案1】：

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

【讨论】：

我能相信你吗？！哈哈，如果我有一个包含 50 个不同类的 clearfix 与一个将代码重写 50 次的 mixin……扩展更好，是吗？我可以将这个理论应用到我所做的任何课程中。
不保证，这在我的脑海中是有道理的。你必须测试它:)
我完全想...你知道如何测试吗？这是我真正想知道的问题。我完全认为我可以仅使用少数这些类型的类来构建一个网站。
如果你不能计时，你不应该偏执，这就是我不担心的原因。我可以，但不幸的是，这并不容易，我认为这不值得付出努力

【解决方案2】：

我喜欢制作 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;
  }

Margin, padding 可以通过 CSS 重置方法全局设置为 0，因此无需每次都设置。 Box-sizing 可以使用 * 选择器设置，因为我不确定您是否想在同一页面上混合不同的盒子模型。使每个元素位置相对可能会导致问题，除非也有充分的理由，否则我不确定我是否会这样做。无论如何，100% 宽度是块级元素的默认值，并且不会对内联元素做任何事情。根据我的经验，100% 的高度很少是令人满意的解决方案。

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

在性能方面，我认为这基本上不是问题，不值得担心。调试是一个更大的问题，因为过多地扩展单个类会“垃圾”Chrome/FF CSS 开发人员工具，其中包含巨大的选择器，这使得追踪问题变得更加困难。如需统计，请查看http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

最大的惊喜是从基线到最复杂、性能最差的测试页面的增量有多小。平均减速所有浏览器都是 50 毫秒，如果我们看一下大浏览器（IE 6&7， FF3)，平均增量仅为 20 毫秒。对于今天的 70% 或更多用户，改进这些 CSS 选择器只会使 20 毫秒改进。

优化您的选择器最多只能提高 50 毫秒的性能 - 这是 4 年前的数据，因此差异可能比现在要小。编写专为可维护性、一致性和重用性而设计的 CSS 是 IMO 的优先级更高，因为对其性能进行微优化所带来的收益几乎不明显。

【讨论】：

就像我对马修说的那样，不要对性能抱有偏执，感谢您提供的信息和链接。关于改进课程本身的好点，我想到了，但在床上用手机打字......

【解决方案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>

结果不一样.. :)

【讨论】：

这不是我的意图。我的意图是编写一个类并在许多 html 节点之间使用该类。我现在会解决这个问题以参考这个想法。
操作不希望总是想要 a、b、c 的所有属性。有时只是a，有时a和c等等。它们是混入。该操作正在询问实施 mixins 的最佳策略
好的，让我再回答一遍：)