CV工程师
2022-07-23 09:30:14 阅读:501
虽然 CSS 开发看起来很容易,但作为开发人员,我们倾向于通过设计脆弱的结构来使自己的工作更加困难。我们该如何改进呢?
遵循一个简单的规则,您可以使团队中的每个开发人员在 CSS 中进行调试变得更加容易。该规则规定 margin
用于底部和右侧,而 padding
用于顶部和左侧。
它不仅使间距更可预测,而且不用担心垂直间距中的边距重叠问题。事实上,这不应该盲目地遵循,当你需要水平间距时,你会使用 margin
左右两侧。此规则主要适用于元素之间的间距。
在开发诸如卡片或类似组件之类的组件时,这些组件通常是分组的并且在它们之间有一些间距,可能很容易将这些元素之间的间距定义为组件本身的一部分,例如:
.card {
padding: 20px;
border-radius: 15px;
margin-right: 20px; // <-- 这里
border: 1px solid #eee;
}
然而,这使得这个元素很脆弱,因为我们可能需要在其他地方使用它,因此必须覆盖这个样式。一段时间后,我们可能会更改组件的间距,从而破坏我们所有的最终用户(其他组件/页面)。我们永远不应该那样做。
相反,渲染这些组件的主机应附加其所需的间距配置。这样,所有用法都是独立的,并且可以毫无顾忌地更新间距。
想象一下,我们有这种常见的情况,连续 3 张卡片,我们需要在它们之间留一些间距。
开发人员已经使用了一段时间的天真方法是在父容器上使用 flexbox,在卡片上使用 margin-right 并为父容器添加负边距:
虽然这可行,但还有一个更好的解决方案——网格。
虽然新 CSS 功能的采用速度并不快,但网格已经存在了一段时间,现在已经超过了 90% 的全球支持,因此我们可以使用它。
我们需要简单地将父容器定义为网格并设置一个间隙:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
这样,我们将始终在卡片垂直和水平之间留出 20px 的间隙,而无需使用诸如负边距之类的变通方法。如果没有足够的元素,它也不会增加任何间隙!
评论
扫描二维码获取文章详情
更多精彩内容尽在:WWW.ZNGG.NET