克军

——OceanBase 体验技术团队负责人

写好 CSS 是需要经验的。有时候觉得少写几行似乎也没问题，有时候又为了稳妥，写了一堆上去。甭说真实用户，内部测试就会测出一堆“意想不到”的样式问题。反正测出来就打补丁吧，项目的 CSS 就是这么慢慢腐化的。

究其原因，还是用户的使用环境完全不受控。除了大多数人会注意到的不同分辨率、不同浏览器的问题，还有更多跟产品使用相关的问题。

像我一直做 toB 的技术类型产品，我们的用户是开发者。工程师平时工作一般会用比较大的外接显示器，数据上看到的分辨率是 2440px、1920px 占比较多，于是设计师就按大屏设计。但实际上，很多用户不会全屏看，一般会排列窗囗，还有人喜欢竖着看显示器，或者是觉得字号太小放大页面。

你可以简单测一测，打开一个页面放大三级或缩小三级，看看页面会不会乱掉。当时我们定过一个规范，页面要支持三级缩放。比如像一些含有复杂表格的页面，为了防止乱掉，我们会做自动锁列的处理，至少加一个横向的滚动条。如果去看微软 Fluent 的表格组件，他们是用 div 实现的，这么做是为了响应性更强。追求这种灵活的适配性为了什么？根本上就是为了防御在不同分辨率下页面布局被破坏。

除了分辨率问题，从防御性的角度看，可以预防的问题有很多，比如兼容性问题、响应性问题、可访问性和无障碍相关问题等等，最终都是为了实现一个高可用的 UI。可以说，CSS 是否具有防御性，是影响产品体验的基本问题之一，同时也是体现前端工程师专业性的地方。

防御性 CSS 与防御性编程（Defensive Programming）一脉相承。来自维基的解释：“防御性编程是防御式设计的一种具体体现，它是为了保证对程序的不可预见的使用，不会造成程序功能上的损坏。它可以被看作是为了减少或消除墨菲定律效力的想法。”

防御性 CSS 同样可以简单解释为：它是为了保证对 UI 的不可预见的使用，不会造成 UI 被破坏，始终保持友好的展现形式和使用体验。

只不过防御式 CSS 近几年一直被忽视。究其原因，一是也许认为 CSS 的高级用法是为了实现一些复杂的动效，工作中这样的需求不多。二是有很多 UI 组件库和 CSS 基础库可供选择，不想花精力追究实现细节。三是 CSS 写的好与不好似乎影响不大。

当然，这些实用主义的想法无可厚非，但是 CSS 是基础技术，基础技术不会轻易过时，值得花精力研究。无论你是初学者，还是有多年开发经验的人，从防御性 CSS 这个角度切入学习，一定能学到很多实用的东西。

我想，可能更多人的困惑在于找不好学习防御式 CSS 的角度：编写 CSS 代码，要面对的不可控的因素这么多，怎么保证写出来的 CSS 代码面面俱到？

关于这个问题，我曾和大漠老师深入的讨论过。目前一些成熟的 CSS 库其实是填过很多坑之后，将这些经验沉淀在代码里了，只不过一般人不太能 get 到。大漠对 CSS 的语法和渲染上的实际表现非常了解，像 Flexbox、 Grids 高级玩法中很小的细节他都知道（自叹不如～），而大漠老师从他过往的经验中，将这些东西提炼出来，形成简明易懂的原则。

相信看了大漠老师的这本小册之后，会扭转一些人的想法，真切地意识到防御式 CSS 的价值。同时，这本小册中讲解的都是很实用的东西，可以直接应用于工作中，快速提升自己产品的品质和体验。就像大漠自己说的那样，这是一本“CSS 魔法集合”！