防御式CSS是什么？这几点属性重点防御！

1. 1. Flexbox 包裹
2. 2. 间距
3. 3. 长内容
4. 4. 防止图像被拉伸或压缩
5. 5. 锁定滚动链接
6. 6. CSS 变量回退
7. 7. 使用固定宽度或高度
• 固定高度
• 固定宽度
8. 8. 忘记 background-Repeat
9. 9. 垂直媒体查询
10. 10. 使用 justify-content:space-between
11. 11. 图片上的文字
12. 12. 小心 CSS 网格中的固定值
13. 13. 只在需要的时候显示滚动条
14. 14. Scrollbar Gutter
15. 15. CSS Flexbox 中的最小内容尺寸
16. 16. CSS 网格中的最小内容尺寸
17. 17. Auto Fit Vs Auto Fill
18. 18. 图像最大宽度
19. 19. 位置：粘性 CSS 网格
20. 20. 分组选择器
21. 总结

很多时候，我们希望有一种方法可以避免某种 CSS 问题或行为的发生。我们知道，网页内容是动态的，网页上的东西可以改变，从而增加了出现 CSS 问题或奇怪行为的可能性。

防御式 CSS 是一个片段的集合，可以帮助我编写受保护的 CSS。换句话说，就是将来会有更 bug 出现。

1. Flexbox 包裹

CSS flexbox 是目前最有用的 CSS 布局功能之一。在一个包装器上添加 display: flex，让子项挨着排序。

问题是，当空间不足时，那些子项默认不会被包裹成一个新的行。我们需要用 flex-wrap: wrap 来改变这一行为。

下面是一个典型的例子。

.options-list {
    display: flex;
}

20. 分组选择器

不建议对用于不同浏览器的选择器进行分组。例如，为每个浏览器设置输入占位符的样式需要多个选择器。根据 w3c，如果我们对选择器进行分组，则整个规则将无效。

/* 请不要这样做 */
input::-webkit-input-placeholder,
input:-moz-placeholder {
    color: #222;
}

相反，请执行此操作。

input::-webkit-input-placeholder {
    color: #222;
}

input:-moz-placeholder {
    color: #222;
}

总结

这是我个人根据我正在从事的项目使用的防御性 CSS 技术的持续列表总结，希望对大家有用。

译文：原文链接