参加 CSS Conf 的一些总结和感受
发布在Clear Design2015年8月12日view:2573
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

参加 CSS Conf 的一些总结和感受

昨天参加了中国第二届 CSS 开发者大会,也就是 CSS Conf,首先还是要感谢 @裕波 等等大神在背后的努力及付出才能这么顺利的举办 CSS Conf,感触还是非常深的,不仅开拓了眼界,也认识到了自己的无知,同时也非常迫切的想要提升自己的能力。下面是本次大会本人所记得的一些总结。

首先大会的第一场主题是 @勾三股四 的「手机淘宝CSS实践启示录」,有一点印象比较深的是大家平时适配移动端的时候只根据宽度来设置断点的,而他却从另一个角度来思考了这个问题,就是在高度上也设置断点,这样一来在不同高度的设备中所需展示的内容不会被截断或者底部留有大片空白。还有就是在布局上才用相对大小,比如 rem 等等。当然还讲了一些其他方面的内容,由于听的也不是很懂所以就不写了。

接下来上场的是 W3C 副总监、 HTML 标准计划负责人 Mike Smith,还好全程有翻译才能听懂 Mike 在讲什么,Mike 的主题是 New W3C CSS Checker,首先提到的是「Catch mistakes in your CSS」:

  • Catch syntax errors

  • Catch typos in CSS property names

  • Catch values with the wrong datatype

并给出了个简单的例子:

.ok {
    color: green;
    font-size: bold;
.alert {
    color: red
    background-color: white;
    font-size: bold;
}

Mike 在这部分主要讲的是我们在平时在 CSS 中可能会遇到的一些错误,比如语法错误、属性名错误或者填写了错误的值。提到了如何利用现有的工具来检测 CSS 中可能会遇到的一些错误,并提供了一个网址 https://jigsaw.w3.org/css-validator

接下来 Mike 有吐槽了下现有的 CSS 校验器:

  • Very old; started in 2002

  • Not actively maintained any more

  • Written in Java

  • Hard to extend with new CSS properties

Mike 还是很幽默的,首先用很鄙视的口气提到了现有的 CSS 校验器是用 Java 写的,后来又一脸茫然的表情说到其实他也不知道为什么 W3C 提供的 CSS 校验器网址这么奇怪。接下来又提到现有 CSS 校验器的一些问题,比如它非常的古老了、开发者社区也不在活跃和难以拓展。最后又介绍了新一代的 CSS 校验器是用 Rust 语言写的,并且给出了 Rust 语言的一些优势:

  • New, modern language (2010~)

  • Pure functional

  • High-concurrency/parallelization (to take full advantage of multi-core CPUs)

首先 Rust 是一款非常新的语言,其次 Rust 是纯函数式语言,最后提到 Rust 是高并发的(充分利用多核 CPU 的优势)。

最后给出了新一代 CSS 校验器托管在 Github 上的网址 https://github.com/w3c/css-checker,然而进去后发现是这样的(台下笑声一片):

!

接下来上场的是蚂蚁金服的展新,印象比较深的是他说的利用属性选择器可以精炼选择器的组织,有一个片段好像是这样的(不懂有没有记错):

<!-- 原本 -->
<div class="progress-46"></div>
.progress-46 {}

<!-- 他的想法 -->
<div progress="46"></div>
[progress="46"] {}

大概是这个意思吧好像。

接下来是来自网易郑海波的「CSS预处理器老调新弹」,其中提到了 mixin 和 @extend 的特点:

  1. 两者本质都是块的抽象

  2. mixin 有参数上的灵活性,但会输出冗余声明

  3. @extend 可以避免冗余,但是可能会出现错误

  4. 新人完全可以暂时不使用 @extend

  5. 使用 mixin 与 @extend,仍要谨记 BEM 等 CSS 组织策略

同时也重点提到了 PostCSS,遗憾的是我没听太懂,所以这里也不好总结。

再接下来上场的是来自 360 奇舞团的黄薇,介绍了「Web 高性能动画」,主要讲了如何利用开发者工具来提高网页动画的性能以及网页渲染的过程,比如:

  • 渲染的三个阶段:Layout、 Paint、 Composite

  • 修改不同的 CSS 属性会触发不同阶段

  • 出发的阶段越前,渲染的代价越高

Layer 创建标准:

  • 拥有 3d transiform

  • 使用 animation、 transition 实现 opacity、 transform 的动画

  • Video

  • Canvas

  • Flash

  • 使用 CSS filters 的元素

  • z-index 大于某个相邻节点的 Layer 的元素

并且提到了触发 Layout 的条件:

  • 改变 width、 height 等和大小、位置相关的属性

  • 读取 size、 position 相关属性

也就是说不但改变 CSS 可能导致 Layout,读取位置大小相关的属性也会导致 Layout。

接下来介绍的是触发 Paint 的条件:

  • 当修改 border-radius、 box-shadow、 color 等展示相关属性时,会触发 Paint

并且提到减少不必要的绘制:

  • gif 图片即使被其他 Layer 盖住不可见,也可能导致 Paint,不需要时应该将 gif 图片的 display 的属性值设为 none。

减少绘制区域:

  • 为引起大范围的 Paint 的元素生成独立的 Layer 以减小 Paint 的范围。

避免以外生成 Layer :

  • z-index 高于 Layer 的元素,也会生成单独的 Layer

当然还讲了很多其他的干货,由于能力有限并不能更详细的去总结了。

再接下来上场的是来自百姓网的 @CSS魔法 ,他的主题是「重拾 CSS 的乐趣」,并且介绍了 3 本 CSS 好书,分别是《CSS 权威指南》、《精通 CSS》和《CSS Secret》,其中《CSS 权威指南》很多人推荐,所以今天也在当当网入了一本,准备好好看看,《精通 CSS》前两个月入的,看过一遍感觉非常不错,至于最后一本《CSS Secret》也是 @CSS魔法 正在翻译且极力推荐的一本书,遗憾的是它还没在国内正是上市,也是本人非常期待的一本书吧。

@CSS魔法 主要讲了两个平时人们觉得不可能用 CSS 画出来的 Demo,让我们看出了他对于一件事的热爱,并且能从中获得乐趣,我之前也用 CSS 画过一些图标,但却没能像他那样能用 CSS 画出如此不可思议的图标来,我觉得我缺少的应该是他那种对一件事情真正的热爱吧。

再接下来是来自一号店的施丰丰的「移动下的CSS布局」,其实说实话我并没有听太懂他在说什么,感觉主线不清晰,可能是前面 @CSS魔法 讲的太好了我还没缓过来吧。

最后一个上场的是 W3C 中文排版特邀专家、编辑刘庆,他带来的是「中文排版需求」,非常遗憾的是由于当时临时有事情,所以并没有完整的听完刘庆的分享,后来听说这个分享非常的棒,所以现在正在期待 @裕波 大神整理的大会分享资料。

最后挺开心的一件事就是见了一直很想见的 @情封 大神还有上月在 iWeb 峰会认识的 @Triste爱吃大西瓜 妹子。

说到这里其实我也不懂我在说什么,最后一个感受是,学好英语真的非常的重要,不仅能够在第一时间了解到国外最新技术,而且能够给你带来更多的机会。

评论
发表评论
暂无评论
WRITTEN BY
大板栗
一枚喜欢设计的前端。
TA的新浪微博
PUBLISHED IN
Clear Design

分享一些学习的笔记和经验

友情链接 大搜车前端团队博客
我的收藏