我在团队内部提倡禁用 css margin

新的文章已经写完了，从技术角度详详细细的介绍了我的理由，朋友们在阅读完本文之后，如果还有兴趣可继续深入阅读
juejin.cn/post/747896…

一一一分割线一一一

目前社区也有不少人提倡禁用 margin，大概原因有什么奇怪的边距融合、责任区域划分不明确等等，我今天从另一个角度来说明为什么不要使用 margin

我们现在处于协同化时代，基本都是靠 figma、motiff 这类在线设计工具看设计稿的。这类工具有写特点

• 
  
• 没有 margin 概念
  
• 只有自动布局和约束布局两种方式
  
• 有研发模式
  

自动布局等同于 flex 布局，支持设置主轴方向，主轴辅轴对其方式，间距（gap），边距（padding）等等

下面是我随手画的一个例子，在研发模式下，鼠标 hover 到容器上面，会出现蓝色和粉色区域。蓝色就代表 padding，粉色就代表 gap。

约束就是绝对定位，这个很简单，不详细阐述

所以，由于工具的天然限制，设计师在画稿的时候，不会像写代码一些，条条大路通罗马。比如我想让两个 div 相距 100px，css 起码得有 10 种方式。所以我们作为前端开发，拿到设计稿的时候可以放心的相信设计师的打组结构，设计稿一个框，你就写一个 div。因为他们不会有天马行空的骚操作，两个设计师是有很大概率画出结构一样的设计稿的。

实战
我在 figma 画了一个移动端界面

然后切换到研发模式，从外向内开始选中图层查看细节

可以看到结构是一套四，竖向 flex 布局，间距是 29px padding 是 0

// frame 7
<div class='flex flex-col gap-29px'>

    // frame 8
<div></div>

    // frame 9
<div></div>

    // frame 10
<div></div>

    // frame 10
<div></div>
</div>

然后直接看最后一个图层，前面的简单就不看了

可以一看看出结构是 flex 横向布局，padding 13px 34px，justify-content: space-between
然后可以继续无脑的写代码了

// frame 7
<div class='flex flex-col gap-29px'>

    // frame 8
<div></div>

    // frame 9
<div></div>

    // frame 10
<div></div>

    // frame 10
<div class='flex px-13px py-34px justify-between'>

       // star 3
<div></div>

       // star 4
<div></div>

       // star 5
<div></div>

       // star 6
<div></div>
</div>
</div>

然后增加一个回到顶部的 float button，约束为右、下。

hover 到 button 上

发现出现了两条线，指向右和下，这就代表这是一个相对于父元素的右下角的绝对定位图层。只需要无脑写代码即可

// frame 7
<div class='relative flex flex-col gap-29px'>

.....
<div class='absolute right-xxx bottom-xxx w-10 h-10'></div>
</div>

总结

在使用 figma、motiff 这类的工具的情况下，

确实存在一些情况使用 margin 会更方便，我也真实遇到了一些 case。如果你们有想聊的 case 可以发到评论区