聊聊CSS postproccessors

阿里妈妈 @一丝 准备发布其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. 多层嵌套,代码维护的灾难
    1. 多层嵌套导致的单页应用代码性能问题,所以Github的CSS规范明确指明Sass嵌套不允许多余三层(之前我们以为仅仅是维护性原因),有兴趣可以围观下 GitHub's CSS Performance

Autoprefixer革命

在我看来真正带来革命的不是postcss,恰恰是他的核心组件Autoprefixer。让我们看看他到底干了什么?[1]

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等如此强大的预处理器未必是必需品。

[1] 在我的记忆里Autoprefixer是rework的插件(因为当时Autoprefixer是rework的主打功能之一),所以我开挖掘机挖了下,发现的确如此,实际上Autoprefixer在1.0脱离了rework,独立出postcss,具体原因见下:

CSS parser was changed to PostCSS. It allows to add prefixes inside some new or custom at-rules and fix issue with comment in property name. Also it clean Autoprefixer code by moving some common CSS processor code to PostCSS.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏琯琯博客

awesome-css-cn命名习惯和方式参考其他资源原文链接

CSS 资源列表,内容包括:CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。 预处理器 更快地编译 C...

3668
来自专栏Python小屋

Python+tkinter实现任意多层级关系的组合框

正好自己要用,就想了个简单思路实现了一下,假设现在需要一个组合框来显示多个层级关系的单位名称供用户选择,如果只有固定的两级关系当然可以使用两个组合框联动来实现,...

3275
来自专栏Java学习网

程序员对美工的五大抱怨

  就像猫和狗、该隐和亚伯一样,程序员和美工也是对死对头。程序员和美工就像来自不同星球的两种完全不同的人,他们脑袋所关心的事情也完全不同。 程序员希望网站运行起...

3225
来自专栏恰同学骚年

Unity3D游戏开发初探—1.跨平台的游戏引擎让.NET程序员新生

  Unity是由Unity Technologies开发的一个让轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具,...

623
来自专栏腾讯IVWEB团队的专栏

[译]Top JavaScript Frameworks & Topics to Learn in 2017

JavaScript 的普及导致了一个非常活跃的技术,框架和类库的生态系统。 随着这充满令人惊叹的多样性和能量的生态圈的到来,许多人的烦恼也变得越来越多。

960
来自专栏知晓程序

海量高清二次元壁纸!快来把老婆抱回家吧

今天,知晓程序(微信号 zxcx0101)要给广大动漫迷们,推荐一款名叫「Soda 壁纸」小程序,导航用的是颜文字,图库里全是高清壁纸,十分带感。

552
来自专栏编程

GitHub上11 月份最热门的开源项目

链接:www.itcodemonkey.com/article/1468.html 转载请注明来源作者 2017 年 11 月份 GitHub 上最热门的开源项...

1930
来自专栏GopherCoder

『Go 语言学习专栏』-- 第十三期

1732
来自专栏coding for love

CSS入门

大家都知道,学习前端,有三大神器,html+css+js。如果用武学来比喻,html就好像骨架身躯,学习html就是习武之人所谓的打熬身体,身体底子好,习武才能...

652
来自专栏互联网杂技

一份超详细的「iOS 10 UI Kit」使用手册(附源文件)

前言 Apple 早先于 WWDC 2016 发表了 iOS 10,而 Sketch 也推出了第 39 版,其中包含了一系列令人兴奋的新功能;我认为这对很多有意...

3008

扫码关注云+社区