侧面还原第四届中国CSS开发者大会

侧面还原的意思是，我既不是组织者，也不是分享嘉宾，只是一棵无人知晓的小草，所以，发挥空间比较大，嗯~

得知本届大会启动，是欲波在朋友圈发的动态，因为职业原因，每年我最期待的行业会议就两个——“CSS开发者大会”和“前端体验大会（前身是Webrebuild）”，一个跟我的工作紧密相关，另一个是由我的老部门同事主办的，那是一群很低调，但有追求、有创意、有格调的人，出自他们之手的东西，几乎从不让人失望。除二者之外，当然也有质量比较高的会议，我参加的不多，不做评论。

说回本届大会，去年底的时候我就在奇怪，怎么没有第四届了呢？正如欲波自己说的那样，人的精力有限，他去年忙于别的事物无法抽身出来，只好推到今年初。

会议地址在厦门文化艺术中心的一家影院，不是很起眼，有人吐槽说不好找，会场上欲波也说，只要开了导航或者路上随便问一个人，就没那么难找。他向来是这样的风格，比较直接，但说的在理，不过作为参会者，也想说，如果在主要路口立个宣传海报、指示箭头之类的，体验就会好很多了～之前在广州的第三届做得就挺好。

这是我第一次参加在影院的会议，感觉蛮特别的，每次聚在一起的人都差不多，认识的都是明星脸，勾三股四、大漠、贺师俊之类，这次多了一丝、顾轶灵和张鑫旭，不认识的还是不认识～张老师还在现场办起了签售会，各种签名合影，俨然一幅综艺明星范。

很难得这种场合，大家都不认识，不是为了应付和利益，却彼此很懂对方。

铺垫完毕，开始正题。

一、Building Scalable Components

第一位分享嘉宾是个中文不太好的新加坡人，Zell Liew。

讲CSS怎样写更干净、可扩展，怎样做组件化。

以自己学习和工作过程中遇到的问题为主线一路往前，比如：适配方法、相对字体大小、窗口缩放、窗体单位，还有媒体查询打断点。

我其实挺想听他讲打断点的方法和技巧，大家都知道这个痛点，无论是用比例还是具体数字，都可能碰到某些机型出问题的情况，不过，他就举了个简单的例子，没有细说…

他还有讲到使用基类和扩展类制作不同按钮。网页当中看似不同内容，可用相同结构和不同样式加以区分，减少重复代码量，提高复用性。

整体来说，逻辑比较清晰，但不够深入，介绍了一些常规的，正常情况下的方法，未涉及可能存在的“坑”。（或许是时间关系）

另外，感觉他把中文换成英文听起来就更高端些了？ 逃~

二、CSS Houdini 初探

勾股这个人，我还是很钦佩的，我跟他没有过交流，但一直在关注，就此次大会来说，从内容和演讲效果，他都能排在第一位。

说起Houdini，相信不少关注行业动态的人早有耳闻，因为一旦出现新事物都会传播特别快，但现场知道的人还是很少...

勾股把它译成“胡迪尼”，包括后面把“One more thing”音译成“玩毛线”，不得不说，演讲中加入这些小幽默效果还是不错的。

他讲的很多东西暂时都用不上，但却没有感觉假大空，而是一种期盼（能快点实现就好啦~）。总体概括有以下几点：

一、样式脚本化，能够实现更便捷和灵活控制，当然，这里指的不是style属性改变。

二、创建新属性和值，能够设置它可以做什么，不能做什么，相当于把定义CSS的这项工作部分放权给开发者，像定义组件接口一样去定义你需要的样子。

三、CSS变量，应用倒是没有细说，提到它的一个弊端是不支持过渡和动画，可能即将被第二点提到的功能更强大的东西取代。

四、图片变成画布，这个还是蛮大胆的，相当于，把现在只能设置成一个静态图案或图形的东西激活了，把一块画板换成了一块屏幕，Canvas能干什么，它就能干什么，赋予了更强的灵活性和创意空间。

五、更新、更强大的布局方法。现场无法给出demo，但可想象，它能让人更轻松定义瀑布流之类，甚至更杂乱无章的布局，能够打破现存单调的布局模式，呈现更多样化的网页形式。

譬如这样：

当然，对未来的畅想还不止于此，盒模型可能被重新定义，动画的控制比现在更灵活，浏览器能够精确解析字大小等等，都是值得期待的。

整体感觉，将CSS更加编程化，更复杂，也更强大。演讲过程轻快流畅，让人很舒服，各种demo时常引得周围的人次次惊呼：哇，好厉害。

三、组件化开发样式API

知乎上常看到顾轶灵...回答的问题，属于接近规范的那类人~

他从很古老的开发方式开始回顾，一直到现在：标签自带样式——内嵌样式——CSS的诞生——结构、表现、行为分离——组件化、模块化。

讲到CSS这门语言本身的缺陷，从而会出现行业中广泛流传的那些方法论和设计模式，同样也聊到了CSS IN JS，CSS Modules，自定义属性、新的CSS选择器，以及Houdini。

整体相当于发展历史回顾以及对未来的展望，理论较多，代码和demo偏少，细节给人的印象并不深，但如果仔细回味会有收获。

四、领导，我不想写CSS

张鑫旭这个人，我想不必过多介绍了，从第一次看他博客就觉得怎么还有人在用这么low的界面？但还别说，绝大多数比他博客好看的，流量都大不如他，为什么呢？说到底，博客还是内容为王的，人家数年如一日地产出优质文章，有这么多回报也是应该的，这不，刚进门就看到他在那里签名售书，整个前端圈，到现在为止也没有出现过这个情况。

但是，我却偏偏是要给他挑毛病的。

不想写CSS，到底是怎么个不想法。

哦，原来是不想写页面，所以，有人做了设计稿转网页的工具，方便是方便，但设计的灵活性和特异性做不到，无法做到人工那样细致和完善。

然后怎么办呢，有人想到了把常用代码段，做成固定模块，可组装，可编辑，使用是时候按需拼接，这的确是个好方案，我们组正在使用中。

那还要怎样缓解“难受”呢？其实在样式里面，我们也是常用到封装的，把一个具备某种功能的代码块，单独定义成一个类，称为“原子类”，那么，原子类再进一步，我们可以把它做成自定义标签，去替代div，但它也有个局限，只适用于长尾区域。

有其他方法么，有，使用预处理器进行偷懒，写一些带参数的函数，一次书写，反复使用。

代码层面说完了，还有么？我们写代码能更快些么？

当然可以，编辑器本身会自带属性提示，而且我们可以自定义代码段，只需要敲两个字母，就能出来一大段代码。

最后的最后，他介绍了一个脚本，叫Qcss，说得很好用，不过初看是让人有些头大的，实用性也有待考量。

上面这些，我基本上是按照他的调调描述完了，概括一下，就是下面这张图

我......为什么说要给他挑毛病，你们懂了？不懂的我也不啰嗦哈，你觉得有收获就好~

五、探索动效开发模式

这个话题来自大漠，大漠的网站，是前端圈几大名站之一，他对技术的研究算得上勤奋，毕竟一把年纪，哈哈。

据他所说，最近这一年他也没怎么写CSS了，比较多的在做各种动效，从他网站上也看得出，很多JS的文章。（说好的一起走下去呢）

这次的话题，分享了几种不同类型的动画及场景、用途，比如：引流 、氛围 、富交互作用、展示、互动，分别适用的动画形式为：路径、帧、timeline、视频、小游戏。

然后简介了一下动效技术的发展历程，虽然随着CSS3的推出，做动画比以前多了一种简便的方法，但在现有环境下，CSS驱动的动画越来越无法满足需求，故而需要转换到使用JS驱动，比如：精灵动画、路径动画等。

既然开发方式不同了，那么流程和工具都要做出相应改变，于是他给出了这么一张图：

使用设计软件转出json，这样就很方便用JS去控制DOM，甚至于，走到这一步仍然不是很满意，还想到了使用数据驱动，动画环节的大部分工作都交给设计师搞定。

除了传统动画，可使用的动画形式随着技术的更迭和丰富会有更多，比如：AR、陀螺仪、Webgl、各种传感器等。

整体看，首先要有好的动画创意和设计意图，然后找到适合运用的技术，再工具化，提高实现质量，降低制作成本，提高效率。

六、面向设计的CSS

对一丝最初的了解，还是那篇那些年，那时刚从业不久，浮动、居中，这一直是前端圈经久不衰的话题，一看到有什么好文章，或者谁曝光度比较高，就觉得肯定是大牛，说的话肯定有道理，也时不时地去看他的言论和文章，有过两次问题请教。

所以，我对他这次的演讲话题和内容还是相当期待的。

他首先进行了一番调侃式的自我介绍，接着，他讲了CSS书写方式的演变历程，从裸写到预处理器，到Postcss，最后还是说道CSS IN JS。

当然，这些东西放到现在都不再新鲜，已经是大家耳熟能详的，就光会议当天，也都有人已经讲过了，难免让人觉得重复和乏味，但这些都还没到他要讲的正题。

他说，CSS本来是用来做什么的呢？还原设计，那么面向设计，才是需要尽最大努力做好的事情。

这句话说得很在理，接下来，他列了CSS开发者需要具备的三个力：生长力、创造力、灵动力，然后举了三个相关的例子来说明。（具体是什么例子，大家可以看PPT）

例子本身，可以说具备一定的创新和启发性，但很多人没想到的是，三个例子讲完就没了，戛然而止。

另外，在之后的提问环节，他的回答也是差强人意，比如：

问：响应式和自适应的区别？

答：翻译的不同。

问：是运用js去计算进行适配更好，还是使用VW和VH更好？

答：程序员都有洁癖，能用样式解决的，干嘛要引入一个脚本呢。

欲波听完之后都忍不住说：你就这样回答完了？

主要论点：怎样运用技术能不妥协求次，而是高度还原设计，提升体验。

但不足的是，速度稍快，内容稍薄，后半段讲述的才是主要内容，却以三个小例子就“草草”结束，轻松有余，而严肃不足，像欲波说的那样，本可以期待更多内容但没有看到。

七、聊聊CSS中的黑科技

聊这个话题的，是我厂互娱的一位同事，标题是“黑科技”，但在我看来并不黑，而是用来实现某种看似很难做到的效果的思路和技术选型问题。

一个动画，是一棵树，从很小的枝叶慢慢动态长大的过程。

想用Canvas分层绘制，觉得生硬不自然，想用视频，但修改成本高，文件过大，最后，选用了CSS animation+SVG的线条动画来搞定，然后介绍了两个属性，和实现动画的方法，这是几乎每个人都可能有的经历。

接下来，他又提到了很经典的一个div实现某某效果，当然，需要结合伪元素、阴影、渐变、滤镜等技术，还是那个老生常谈，技术只是工具，最神奇的东西从来不在技术，而在创意和思维，现在这些看起来很平常的东西，功劳应该归功于第一个吃螃蟹的人，他才是真的了不起。

整个分享的最高潮部分，是最后现场所写的一个demo，是什么呢？PPT里面没有，这里先卖个关子，我只说，可能过段时间，本届大会的很多内容会被遗忘，这个就会被记住，甚至会后都有不少人忍不住重新敲打了一遍来向本届大会致敬，哈哈，留这么多悬念我也是太坏了，感兴趣的可以再找我~

八、在线图像编辑器中的CSS黑魔法

刚走了个黑科技，又来了个黑魔法。

说实话，内容本身并没有给我太大的惊喜，使用渐变，文字描边，镂空遮罩，这些可能多数人都搞过。

属于实现特殊效果的小技巧，但他通过这些东西向大家传达的理念我还是认同的，充分利用技术和技巧去武装自己，使自己面对各种需求的时候都能更从容。

最后，他还比较取巧的，把本届大会当做素材，讲了个问题，什么问题呢？——一个模版多种样式。

在结构不变的情况下，怎么做到，不同背景、不同字体颜色、不同配图、不同展示顺序。

听起来是否耳熟呢？是的，作者很自然地引出了那个经典案例——CSS禅意花园。

但让我大感意外的是，现场居然还有人不知道这个，这就有点让人搞不懂了，现在的前端新人学习都看啥？信息越多，精力越被分散，视野越窄了吗？

总结

整体感觉，优化、效率、新事物。

但不禁又引起我另外的思考，当这个圈子的话题被讲的越来越多，自适应、布局、单位、好玩儿又有用的属性、设计模式、组件化、快捷编码、还原设计，那么还未讲到的就越来越少，以后还讲什么？

稍微想想，又有了答案，人们参会无非两个目的，学新知识和获得解决问题的方案。先不说他们到底有没有讲完，即使讲了，有一部分也是点到为止，并未深挖。所以，可以从不同纬度去考量，可以在同一个知识点上进一步拓展好的实践方法，以及实际项目中所遇到问题的解决方案，从知识型向问题型转变。比如这一届，好几个话题都让人意犹未尽，可以下次再续。

虽然我给它挑了一些刺儿，内容重复，层次和充实度不够，但总的看来，正如欲波所说，收获肯定比失望更多，哪怕仅有五分钟的内容是有帮助，有启发的，那就值得，听君一席话，胜读十年书嘛。

另外，很明显感觉到，大家都在努力挖掘技术的潜力，以及很积极地实践新技术，不说别的，就没见几段代码是在“老老实实”地写CSS，都是预处理器、变量之类用的很普遍。

举办一届这样的全国性会议很不容易，记得大学时组办一个系的社团活动都不易，这个就更加劳心劳力了。努力不等于优秀，但不努力，就没有变优秀的可能。在这个人人顾己不言他的社会，能有一帮这样的人，还在组织对大家、对行业有益的事，真的难能可贵，所以，我很直接地指出一些问题，是真心希望，在大家的付出和热情之下，它能够更好，也的确代表我本人，再次对所有付出辛劳的人说声，感谢！

期待更好的下一届！