聊聊CSS postproccessors

  • 时间:
  • 浏览:0
  • 来源:幸运快3_快3手机版_幸运快3手机版

阿里妈妈 @一丝 准备发布其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等这么强大的预处置器我不要 是必需品。