侧面还原第四届中国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,都是预处理器、变量之类用的很普遍。

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

期待更好的下一届!

因为博客上传图片太繁琐,所以,这里是文字版,想看完整版可以点击这里