推荐序一

推荐序一

回顾一下做过的项目,会发现我们曾经多么忽视CSS!JavaScript有着高大上的设计模式和模块规范,分布在精心设计过的目录里,而CSS仅仅被简单地堆积在一个文件里。它不重要吗?前端开发最基本的任务就是还原设计,离不开用CSS实现那些复杂的布局和绚丽的效果(后面还会提到它在移动Web开发中的重要性)。它简单吗?HttpArchive统计全球Top100网站平均单个页面CSS达到31 KB,在频繁的迭代中维护它们并不轻松。更不要说众所周知的痛点——浏览器兼容性。CSS既然如此重要,又不简单,为什么没有像它的小伙伴JavaScript那样得到重视和发展呢?

种种原因中有一个很明显——它不是语言。CSS开发是基于渲染原理和W3C标准(及事实标准)来设计规则的,这里边没有算法,没有数据结,没有逻辑控制。这让习惯语言开发的程序员无从生成思路。一个好的后端程序员可以很快掌握JavaScript,但面对CSS就会变得茫然无助。于是便会简单粗暴地把所有代码随意写在一起,所有布局都用float实现。表面上看把问题解决了,实际上是在到处“埋雷”,到处补“破窗”。这种慢性后果并没有激发CSS在语言方面更快的发展。保持简单,复杂的效果让Javascript/Flash去干吧,似乎问题就能回避。但很快移动端的崛起打破了秩序,先是把Flash宣判了,JavaScript在手机上的性能和能耗成为瓶颈,CSS3则在GPU的作用下看起来异常完美,于是一下子被推上风囗浪尖。曾经那些尘封的草案又被唤醒。各大浏览器厂商竞相实现最新特征。炫酷的2D/3D动画效果、高端的FlexBox布局……CSS3一夜之间上了头条。随着应用的深入,最初的快感很快退去,新的兼容性问题又来了,浏览器的种种bug,闹心的厂商前缀,刚学到就被废弃的标准......在这种形势下CSS的开发想保持简单也难。

浮华过后,人们开始认真思考如何提高CSS的开发效率和可维护性等工程问题。Sass早在2007年诞生于“工具控”的Ruby社区,开始服务的对象自然是Ruby工程师,是为了让他们能像写Ruby那样写CSS。直到推出SCSS这种语法风格,Sass变得更像是CSS的扩展和增强,可以跟原生CSS混写,很快被前端工程师接纳了。现在在我的项目里,一眼望去都是.scss文件。据我所知,国内各大互联网公司前端团队的CSS开发也都转向Sass或LESS。如果你是前端工程师或有志成为前端工程师,非常有必要把这块纳入到自己的技能体系中。

Sass让CSS变成语言,可以像其他语言那样去组织模块、封装、复用代码,让CSS开发看上去非常有“设计感“。在大规模的网站开发中,Sass的用法变得至关重要。其实任何工具都是双刃剑,用好事半功倍,反之则有破坏性。比如,写Sass很容易就写出多层嵌套,生成的CSS选择器就会有很多级,不仅低效,维护上也很头疼,以至于出现BEM这种用法。在代码设计上,继承和混合器有什么区别,怎么抽象和封装更好,等等这些由用法引申出来问题值得在实践中潜心思考。

在技术社区里经常能看到各种文章介绍Sass的用法或观念或技巧,辨清优劣,吸收精华,前提是要先对它有系统的了解。虽然也能搜到不少中文资料,但很碎片且质量参差不齐。像我这种东看点西看点的人,之前着实走过不少弯路。在一次前端标准化交流会(w3ctech)上,正好碰到李松峰老师,吐槽如今光是引进一些介绍眼下流行的JS库的书,实际上某些JS库虽然流行但在项目中未必适用。反倒像Sass如此普及而且适用面又广的技术,没有一本中文书。没想到松峰老师很快就促成本书的引进,并找到锦江(勾三股四)等有丰富开发经验的人翻译。我对本书的出版充满期待,并相信它一定会把更多人带入CSS的世界。

克军
2014年3月4日

目录