[CSS] 防御型编程 in CSS

[PeterChen1997]

原文：https://ishadeed.com/article/defensive-css/

• flex 布局：
  • 可以加上 flex-wrap: wrap; 来避免内容溢出
  • 使用 gap 代替 space-between
• 溢出：
  • 使用 min-height 代替 height
    • min-height: 100px;
  • 使用 min-width 代替 width
    • min-width: 100px;
• 文本排版：可以给文本溢出加上安全 space
  • margin-right: 10px;
• 文本排版：定宽定高的文本展示区域，加上不换行的限制
  • white-space: nowrap;
  • overflow: hidden;
  • text-overflow: ellipsis;
• 图片排版：使用 object-fit 来避免拉伸
  • object-fit: cover;
• 图片排版：给所有包含 img 的元素设置 background-color
  • 可以在图片加载失败时正常展示背景色
• 交互：文本滚动溢出
  • 限制仅滑动当前元素，不影响父元素
    • overscroll-behavior-y: contain;
    • overflow-y: auto;
• CSS 变量：考虑 fallback场景
  • max-width: calc(100% - var(—actions-width, 70px));
• background 属性：考虑设置 background-repeat: no-repeat，避免图片重复展示