2

供参考： 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 相比，性能会受到影响吗？有没有人有任何统计数据来备份最佳路线？

4

3 回答 3

4

我喜欢制作 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 类在小而具体的情况下效果最好，例如，在您的站点配色方案中使用不同颜色的类，然后根据需要将它们包含在各种更具体的类中。它需要一点纪律（例如，不要在颜色.scss 之外的其他任何地方定义颜色，并且每次@extend 时都要考虑是否有更好的方法），但最终会给出非常一致且 DRY 的代码。

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

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

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

于 2013-07-27T09:20:08.527 回答
1

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

于 2013-07-27T09:04:59.917 回答
0

Its not mandatory how much classes you can nest or group but I don't understand your logic behind it. Let me explain with example.

.a{
color:white;
}

.b{
font-size:10px;
}

.c{
background-color:red;
}

in HTML

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

Why you wanna do this???

You can actually do this

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

in HTML

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

Your CSS file is downloaded by the browser so if very hugh CSS style file would take more time to load, please do take it in mind. You are free to add more classes in grouping as you like but the more useless classes will be there the more slower the site will load. It will decrease your performance.

UPDATE

If you are worried about mixing classes over and over again then you should not be worried because that why we have CSS and its classes to use anywhere in the code and declared once at the top. It something like function in php, you can use function anywhere but you can use function with different arguments and hence the result will be difference.

For example in CSS,

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

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

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

So now in HTML

if we will use

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

and

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

the results are not same.. :)

于 2013-07-27T08:29:48.757 回答