【问题标题】:LESS/SASS CSS opposite from minification/optimizations?LESS/SASS CSS 与缩小/优化相反?
【发布时间】:2011-03-31 22:19:42
【问题描述】:

我想知道 LESS/SASS CSS“预处理器(我认为它们被称为?)”与缩小等优化相反吗?我想知道是否会有任何明显的性能影响?还是您认为易于开发更重要?

我问这个是因为 LESS CSS 生成的东西类似于

body #div1 #div2 p
body #div1 #div2 p a:link, body #div1 #div2 p a:visited
...

而且我认为它确实会使我的 CSS 膨胀不少。如您所见,这种特殊性不是必需的,它使阅读 CSS 变得困难(至少我在 firebug 中看到的)。

【问题讨论】:

  • or do you think easy of development is more important? 告诉我,更重要的是:一台机器解析 CSS 的时间为 5 毫秒(至少在现代浏览器中,这是准确的),考虑到 CPU 时间非常便宜,几乎是免费的,还是开发人员一天多出十分钟,这是人类的时间?

标签: css sass less


【解决方案1】:

在 Sass 中,您可以通过了解 nesting 的工作原理来控制“特异性膨胀”。如果你不想要,你根本不需要做任何嵌套——这是你可以控制的。

使用新的@extend directive,您实际上可以通过应用OOCSS 的原理减少 CSS 中的冗余,从而提高 性能。这是get you started with @extend的一篇好文章。还有一些 OOCSS 资源:

@extend 在 Sass 中的巨大优势在于,它在应用 OOCSS 时需要手动操作,并且非常轻松和容易。

最后,正如 Andrea 指出的那样,Sass 有多种缩小 CSS 的选项(请参阅 :compressed style),因此总体而言,您实际上拥有了一个非常强大的工具包,不仅可以提高您作为开发人员的表现,还可以提高 CSS 的性能。有关此操作的示例,请参阅 Compass 的作者和 Sass 的核心贡献者 refactors the Digg stylesheet Chris Eppstein 如何将 125 行代码减少到 85 行代码(减少 32%)。

【讨论】:

    【解决方案2】:

    您会感到惊讶,但是具有重复代码块的 gzip 压缩 CSS 文件不应比具有较短选择器的文件大太多。

    这要归功于压缩算法如何处理文件中的重复字符串。它不是两次包含相同的字符串,而是用对第一个的引用替换第二次出现,因此该字符串仅在压缩文件中出现一次。看看生成的 CSS 文件中的选择器有多重复 - 这应该使它们压缩得相当好。

    当然,这样做的关键是确保您的 CSS 文件是 gzip 压缩的 - 不压缩它们肯定会增加文件大小。

    【讨论】:

      【解决方案3】:

      根据options,SASS 可以给出不同样式的输出。对于生产,您需要将输出样式设置为“紧凑”。

      【讨论】:

        【解决方案4】:

        有一个用于 sass 的 firebug 插件,它应该使事情更容易阅读。无论如何,您实际上并不需要直接读取输出。

        Sass、less 和 xCSS 会产生更多的输出,但我不会称之为膨胀。

        由于开发人员在代码的生命周期中将名称空间堆积在其他名称空间之上,手写的 CSS 具有许多冗余和重复,因此会迅速退化。软件维护、设计或编写不善的症状之一是臃肿。而且由于 CSS 从一开始就存在一些设计缺陷,即使是最好的 CSS 编码器也会受到这种限制的影响。

        因此,您必须权衡格式良好的 sass/less 文件与经过多次编辑的手写 CSS 文件的初始占用空间。

        sass 的另一个好处是您的 HTML 变得更精简。您不需要在整个代码中附加类名来弥补 CSS 的扁平、全局结构。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-03-27
          • 2013-01-20
          • 2012-07-29
          • 2013-12-24
          相关资源
          最近更新 更多