第四届 CSSConf CN 见闻

上周末作为一名分享者参加了 CSSConf CN，在厦门。

其实除了自己的分享内容，这次我是带着很明确的目的参会的，因为有两个主题我特别关注，就是：

  • 第一个：响应式的组件
  • 第三个：从 API 的角度看组件的 CSS

(两个分享的标题都被我稍微“演绎”了一下)

这两件事都是自己工作上正在特别关注的事情，一方面，我们很少从 API 的角度去理解一个组件的 CSS 该如何组织和管理，所以这个标题就特别吸引我，另一方面响应式组件的分享者是来自新加坡的前端工程师 Zell (我个人一直觉得国内的响应式都是在瞎搞，看了很多周围团队都没有认真做这件事，甚至不相信响应式的价值，从设计师到工程师)，因此非常珍惜这个机会能近距离学习一些国外的同行们是怎么看待和实践响应式的。

所以尽管我们团队的差旅经费已经用完了，还是决定自费来厦门近距离交流一下。

现在证明这次真的不虚此行。

当然参加这种线下活动，“面基”的目的是一定有的……恩，这个不值一提。

响应式组件 ​

在谈这次分享内容给我的收获之前，我想说，实际上我不只是从几十分钟的分享中学习了响应式组件的东西。我这次去厦门的行程特地提前了两天，周四就到厦门了，就是希望能多一些分享的准备和现场交流。正好 Zell 也到的比较早，于是乎我在周末的会议之前就跟 Zell 聊了很多。真的是很难得的机会。

回到分享的内容，我听过 Zell 的分享之后简单整理了一些要点：

  1. Proportional scaling：让所有的组件成比例
  • 注意字号：font-size 尽量使用 em 单位，而不是如 px 的绝对单位
  • 注意视口/窗口大小 (viewport)：尽量使用 vw、vh、vmin、vmax 单位，必要的时候可以配合 calc()
  1. Responsive scaling：处理好响应式的断点
  • 善用 media query
  • 尽可能使用 min-width，以小屏幕为基础
  • 必要的时候使用 min-width 和 max-width 的交集，避免样式间不必要的相互干扰
  1. Modular scaling：像乐高一样拼合模块时的注意事项
  • 不要在子元素上直接设置外边距
  • 取而代之的是在父元素上整体设置每个子元素的边距
    • 巧用 + 选择器处理最后一个元素多余的边距
  • 在需要对其的地方使用 rem 作为边距的单位以避免被组件的字号影响布局
  1. Morphable blocks：尽可能透过不同的表象提炼相同结构的组件，以达到尽可能的复用和组件数最小化
  • 找出相同点和不同点
  • 得出最佳的 HTML 结构
  • 通过设置不同的样式展示出不同的效果
  • 让 modifier (BEM 中的 M) 的数量尽可能的少
  1. 额外的小贴士：命名规范和约定、避免在选择器上使用 ID 从而使得选择器的权重失控

实际上每一条都不是很难，也不是没有见到过，但是总结的非常有系统性，给了大家一些很好开始的着手点。

另外 Zell 在聊天过程中也提到了很多我非常认同的观点和细节，想分享给大家：

  • 前端工程师是真正用户体验的“最后一道门”，身为前端工程师一定要有意识捍卫用户体验 (这句话后来跟 裕波 聊天的时候他说了一模一样的话，可见大家都十分认同)。
  • 前端工程师一定要跟设计师“坐在一起”工作，一定要强沟通，才能把工作做好。
  • 跟 Zell 聊到响应式在自己的工作中遇到很多困难的时候，Zell 出乎意料的大方对我说“你找我就对了”，即大方又自信。看得出来响应式在 Zell 看来已经是吃饭喝水一样了，我们自己包括周围的人却连一步都还没走出来，真是觉得惭愧。

从 API 的角度看组件的 CSS ​

我记录了一些要点和自己的理解：

  • 首先，通过 CSS 的发展史来看，我们一直试图通过一种特定的语法 (CSS) 来描述网页的样式，但在 web page -> web app 的划时代趋势下，我们组织代码的方式也发生了变化，尤其是 CSS 的部分容易被人们忽视。
  • 分享者 E0 把今天的 CSS 设计问题，从 API 的角度划分成了三个层次：
    1. 对于组件的维护者来说：要把一部分 CSS 样式封装起来，供自己维护，同时也要避免被组件的使用者误修改或滥修改，通常这些样式会被内联或编译为无语义不可编辑的 CSS class
    2. 对于组件的使用者来说：要把一部分 CSS 用法暴露出来，供开发者灵活配置或修改，很多组件库会在文档中列出可以配置和修改的 CSS class，但除此之外，还有一些库做了很巧妙的不一样的封装，比如通过扩展的伪类或伪元素。这种方式我之前没有留意到过，有点开眼界
    3. 对于浏览器插件作者：这个角度也是我之前没有认真思考过的，就是说还有这样一群开发者，希望通过浏览器插件处理一些不同用户的特定需求。如果我们的组件希望对这些人友好，那么就多了一层考量。这时我们就想到了一些更加通用或规范化的，和具体工具、库、编译方式无关的设计，比如 CSS 自定义属性、无权重的选择器等

听过之后非常受启发。

这两份 slides 我也第一时间分享给了我们团队组件库的同学们了解学习了：）

关于自己分享的 CSS Houdini ​

这些内容可能真的是有一点“超前”了，因为很多浏览器都还没实现，而且规范本身也没有稳定下来。但是我迫不及待的想分享出来，是因为我也听到了一些说法，说“CSS 很久没有什么新闻了”。那 CSS Houdini 绝对是一个可以让 CSS 更上一层楼的“重量级”的东西。希望可以通过分享 CSS Houdini 让大家对 CSS 更有信心和期待。

同时很多技术的“风向”都是由最底层的东西决定的，我们从规范层面对 CSS 有更多的了解，一定会对我们的实际工作有很多指导和借鉴的价值。如果你同时还是一个有开源精神的人，那么你可以从今天开始就构思一些基于 CSS Houdini 的工具和库了对吧，用这些工具和库加速 CSS Houdini 的落地，同时也尽快把一些之前没有 CSS Houdini 的时候大家用起来很别扭很勉强的东西汰换掉，更在这个过程中体会 web 带给我们的乐趣：）

其它 ​

另外几个分享也各有特色，总体上，我觉得这次 CSSConf CN 同时包含了 CSS 的规范、理念、工具、技巧、动画、八卦、吐槽各个方面，应该是尽可能照顾到了大家的兴趣和需求了。还是觉得这样的会议非常的棒。

我觉得 CSS 和动画、SVG、字体设计、3D 图形学、可访问性、语义化的 web 等话题有着非常紧密的联系，有很多有意义的延伸，并且这些话题也很难有独立的 Conf 了吧我估计。再加上 CSSConf 的主办者们，尤其是 裕波，是非常懂前端开发者们的，他们经营 CSSConf 的理念和方式我一直非常认同和欣赏，所以也许未来有一天，CSSConf 会比 JSConf 更受人关注。

以上