小册上新｜防御式 CSS 精讲

随着技术不断的革新，开发者面对的场景越来越复杂，比如复杂的交互、各式各样的终端、丰富的 UI 效果等，才慢慢演化出了“前端”的说法。

不管是之前的重构工程师，还是现在的前端工程师，他们面对的都是用户和设计师两个群体，将设计师的意图还原出来，以最好的一面呈现给用户。

设计师提供的设计稿是一种静态的产物，虽然优秀的设计师会在他的设计稿中展示出 UI 多态下的形态（表现形式），但他无法把动态数据完美地在设计稿中展示出来。

而 Web 页面在客户端中展示时，面对的情况会很复杂，比如数据是动态的、设备是多样的等等，这些变化都会增加 CSS 出问题的概率，如果 Web 开发者在还原 UI 的时候，仅仅是按照一比一还原设计稿的话，就会产生很多问题（埋雷）。

面上展现出来的问题是最容易发现的，比如说，布局乱了、UI 不对、没有展示出来等等，还有一些问题是 Web 开发者无法定位和排除的，甚至有很多 Web 应用会带着“病态”上线，这些都非常影响用户体验。

@克军老师曾经这样说过：

从前端技术的根本价值出发，实现高可用性的产品用户界面，是用户体验的第一道关，这就跟 CSS 开发者的专业性紧密相关了。我认为体现 CSS 开发专业性看的就是防御式 CSS 开发。

如何使自己构建的 UI 或编写的 CSS 代码更具防御性（健壮性），确保还原的 UI 在不同的条件下都能工作， 不打破 Web 布局或 Web UI，是每个专业的 Web 前端开发者必备的技能。

往往好和坏的区别，就是一行代码的问题。所以需要我们遵循“万一”心态，提前考虑一些特殊情况，比如在元素盒子上同时设置了 box-shadow 和 overflow: hidden 时，部分盒子阴影会丢失，我们需要多考虑组合使用 CSS 属性时会触发的潜在问题。再比如多思考一些边缘情况，像标题超长应该怎么处理？直接裁切，还是末尾添加三个点？数据没吐出呢？不处理还是将空白容器隐藏，等等。

一直对简单代码保持警惕，会让你的 CSS 变得更健壮，更具防御性。

当然，大多数 Web 开发者并非不重视这些问题，只是不知道问题会出在哪，只有不断地踩坑和填坑，甚至很多时候会使自己陷入到很多想不到的问题中，苦不堪言。

基于此，大漠老师设计了这门课，他结合自己在 CSS 领域多年深耕的经验，总结出容易出现特殊情况的几种场景，包括：布局、UI 效果、媒体对象、交互体验等。

在这本小册中，大漠老师会把每个角度细化出来，保持上一本《现代 Web 布局》小册的图文加案例实战风格进行精讲，解析其中的原因和规避问题的方法。

大家在学习这个课程时，可以随机挑选学习，因为每篇都是 CSS 中独立的知识点，它可以帮助你快速定位和排查 CSS 相关的问题，大家可以把这本小册当作是 CSS 技巧集合或 CSS 魔法集合！

现在购买，特惠 6 折

原价 49.9，上新期 6 折特惠，赶紧点击下方图片开始学习吧！