FE.UX-常见CSS边界情况防御处理

遵循这种心态至少会减少您可能遇到的问题。

对于这个组件，标题可以是一个词，也可以是多个词。为避免标题卡在右侧的图标上，最好添加margin-right: 1rem，以防标题变长。

如果一个按钮与另一个按钮相邻，则为第二个按钮添加一个左边距，以防万一

.button + .button {
  margin-left: 1rem;
}

第一个解决方案是使用文本截断 & max-width。第二个只使用max-width，但如果标签有很长的文本，它可能会失败。

图像默认背景

img {
  background-color: #525252;
}

object-fit: cover避免头像拉伸

flex-wrap以避免元素溢出

文本截断+右边距

overscroll-behavior-y: contain;避免父元素一起滚动

css变量设置兜底值,如calc(100% - var(--actions-width, 70px))

使用min-height代替height

同理替换width为min-width.

不要遗忘background-repeat

当标题有一个很长的词时，它不会换行。即使我们使用overflow-wrap: break-word，它也不起作用。要更改该默认行为，我们需要min-width将 flex 项的 设置为0。那是因为min-width默认值是auto，就会发生溢出。同样的事情适用于列 flex 包装器，我们使用min-height: 0。

.card {
    display: flex;
}
.card__title {
    overflow-wrap: break-word;
    min-width: 0;
}

分开选择器下方无效

/* Don't do this, please */
input::-webkit-input-placeholder,
input:-moz-placeholder {
    color: #222;
}

正确写法

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

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

一些渐进增强：

• gap
• @media
• scrollbar-gutter
• minmax()
• sticky

参考资料

• Defensive CSS
• The Just in Case Mindset in CSS