聊聊CSS postproccessors

  • 时间:
  • 浏览:1

阿里妈妈 @一丝 准备发布其CSSGrace,即CSS后处置插件,于是顺便聊聊CSS postprocessors。

从Rework说起

Rework是TJ大神开发的CSS预处置框架。但为你什儿 会总出 呢?TJ大神那么回答:

The simple answer is that Rework caters to a different audience, and provide you the flexibility to craft the preprocessor you want, not the choices the author(s) have force on you.

Our goal with Rework contrasts the others, as it does not provide a higher level language within the CSS documents, Rework’s goal is to make those constructs unnecessary, being the most transparent CSS pre-processor out there.

简单地说,假如从后后的特定CSS预处置器,转而成为通用式CSS预处置框架,通过插件,可自定义扩展功能。

我用compass用得正爽,凭你什儿 用你?

  • 工程师喜欢瞎折腾,满足其DIY乐趣
  • 现代前端,多端多屏、时要不同兼容场景下清况 下,CSS预处置器时要高度定制,来看看我们都 那么高度定制的后果:
    1. 我们都 无缘无故使用@include border-radius;,可你知道compass你什儿 mixin有啥问题图片图片么?
      .btn-default { -webkit-border-radius: 2px } // 仅在 android 2.1, chrome 4, ios_saf 3.2, safari 4 或更早期版本适用
      .btn-default { -moz-border-radius: 2px } // 仅在 firefox 3.6 后后版本适用
      .btn-default { -ms-border-radius: 2px } // 根本不占据
      
       -ms-border-radius
      .btn-default { -o-border-radius: 2px } // 这玩意早就淘汰了
      
    2. 我们都 也无缘无故用@include transition();,但:
      .course-card .course-agency { -moz-transition: .3s } // 仅在 firefox 15 后后版本适用
      .course-card .course-agency { -o-transition: .3s } // 仅在 opera 12 后后版本适用
      
  • 嵌套很强大,但有些后后也是灾难
    1. 多层嵌套,代码维护的灾难

    2. 多层嵌套意味着的单页应用代码性能问题图片图片,有些有些Github的CSS规范明确指明Sass嵌套不允有些余三层(后后我们都 以为仅仅是维护性意味着),有兴趣还时要围观下 GitHub's CSS Performance

Autoprefixer革命

在我看来真正带来革命的都是postcss,恰恰是他的核心组件Autoprefixer。让我们都 看看他到底干了你什儿 ?

Working with Autoprefixer is simple: just forget about vendor prefixes and write normal CSS according to the latest W3C specs. You don’t need a special language (like Sass) or remember, where you must use mixins.

Just write normal CSS according to the latest W3C specs and Autoprefixer will produce the code for old browsers.

有些有些呢?意味着我们都 写了:

a {
    display: flex;
}

则经过Autoprefixer,会变成:

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

因此你什儿 hack数据是从caniuse获取的,有些有些能根据你的时要设置你时要兼容的浏览器。Sounds good!这更像polyfill,我们都 只用按照标准写就好了,polyfill会帮忙处置兼容性,后后意味着不不兼容,其会自动去除。

CSSGrace

Make it better!

CSSGrace在我看来主要意味着AST的介入,其意味着分挥发后后preproccessors分析没了来的css错误问题图片图片,什儿 csslint的有些静态分析,以及一丝所说的CSS常见错误,什儿 :float: left/right 意味着 position: absolute 后还写上 display: block,具体参见:http://www.zhihu.com/question/20979831

最后随想

另一方感觉未来Web会Web Component化,无论是以W3C标准以HTML为核心的Web Component,还是什儿 React以Javascript为核心的Web Component,在纵向力度足够细的后后,css样式将趋近与足够简单。

在你什儿 背景下,当处置好作用域的清况 下(目前没你什儿 好法律方式,意味着那么将class name写长有些),未来嵌套场景将大大减少,从你什儿 点来看,后后的Sass、LESS等那么强大的预处置器暂且是必需品。