CSS 工具

CSS 预处理工具 #

在写CSS时，如果有两个选择器是：.content div和.content p，如果每个选择器都加.content，势必会造成写代码的复杂度，所以出现了CSS预处理器。因此，我们可以更简便的写CSS，再使用CSS预处理器帮我们处理为规范的格式。

常见的CSS预处理有：

• LESS（Leaner Style Sheets）：更精简的CSS样式；
• Sass；
• PostCSS：这是一个比较大而全的转换CSS的工具，支持CSS预处理；
• stylus：主要特点是在NodeJs中使用。

Sass 有一个专门的工具集Bourbon，提供一些mixins和functions，使代码编写更有效率。

CSS Lint工具 #

Lint检查，可以帮助我们统一代码风格，甚至发现一些问题。常见的CSS Lint工具有：

• CSSLint；
• stylelint；
• CSSNano；
• Dirty Markup；

CSS 解析器 #

CSS 解析器，是把样式文件根据CSS Object Model（CSS对象模型）解析成一个对象。例如：CSSOM 是一个使用JavaScript写的CSS解析器，CSSOM.parse("body {color: black}") 这条语句返回如下的对象：

{
  cssRules: [
    {
      selectorText: "body",
      style: {
        0: "color",
        color: "black",
        length: 1
      }
    }
  ]
}

CSS解析器，最常用的场景是浏览器CSS文件解析，只是浏览器封装好了，我们一般情况下不感知；另一个使用场景是CSS LINT，只有能够解析CSS代码，才能检测是否符合规则。

常见的CSS解析器有：

• PostCSS：这是一个比较大而全的转换CSS的工具，支持解析功能；
• CSSOM：纯JavaScript中实现的CSS对象模型；
• ParserLib：CSSLint中使用的解析器；

CSS Polyfills #

Polyfill，是Remy Sharp拍脑袋想出来的，当时想用一个词来形容用JavaScript来实现一些浏览器不支持的原生API，作为一个补充存在。在这里，CSS Polyfills代表一些使得旧浏览器也能支持比如CSS新特性的一些library。

值得注意的，因为现在浏览器更新迭代的速度比较快，旧浏览器的占比越来越低，大部分 Polyfill 已经停止维护，因为已经没有维护的必要了。