聊聊CSS postproccessors

  • 时间:
  • 浏览:0

阿里妈妈 @一丝 准备发布其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等要能了 强大的预外理器暂且是必需品。