提升UI走查效率：开发阶段的布局与CSS技巧

一个很复杂的系统，我们在开发阶段，即便是有设计稿的参考也不能做到百分百还原，所以一般来说都有在上线前的，UI走查的阶段。

UI 走查虽然不难但是很麻烦，为了让这种技术含量不高的工作不要占用我们过多的时间，我们在最开始写 html 代码布局的时候，以及在写 css 样式的时候就要设计好。尤其是布局，非常重要，如果布局使用不当的话，如果 UI 想改一点边距，我们就要大规模的改动是很不科学的。而且一般UI 走查是在我们的功能已经测试完成，准备开始上线了，如果我们为了改 UI 改出了新 bug 可就大事不妙了。

一、html 布局

1.1 确认好布局

一个页面在开发开始前，我们就要跟 UI 确定好这个页面是如何布局的，要确认屏幕尺寸很大、很小、正常的情况下，如何展示？

1.1.1 弹框如何布局

假如说有下面一个简单的弹框，我们在开发前就有很多点需要和 ui 确认：

1. 弹框是否是固定宽高
2. 如果固定宽高，在内容超出的时候如何展示，隐藏还是滚动
3. title 和内容是如何布局的，是整体居中，还是一个在上面，一个在下面
4. 如何布局，决定了下面内容文案很多的时候，我们是否要保证 title 和内容的距离
5. 当内容很长，达到了弹框的宽度时，是否要给左右留一些 padding

1.1.2 按钮相关的注意事项

在开发按钮、输入框等小组件的时候，要确认

1. 是否有 hover 等状态
   1. 假设一个 icon 按钮在鼠标 hover 的时候上下左右有一个边距为 4px 的背景色，且不 hover 的时候不展示，那我们在布局的时候就要给这个 icon 套一层元素
2. 按钮的宽高，是否有最大最小高度
   1. 一般来说，按钮的高度控制有两种方式，一种是固定高度 height: 44px；第二种是使用padding 和内容的 line-height 撑起高度；我一般使用后者，这是因为按钮的内容文字往往是不固定的，所以按钮一般都有左右 padding，然后让宽度自适应，所以在设置左右padding 的时候随手设置一下上下padding ，只需要写一行 css 代码；最多再加一个 min-height 和 min-width。
3. 一组并排的按钮的间距使用 flex + gap
   1. 使用 flex 布局的好处就不说了，加上 flex-wrap: wrap 在按钮很多一行放不下的时候可以折行展示，也很方便。
   2. 按钮之间的间距实现有两种方法，方法一：水平间距 使用margin-left / right ，垂直间距使用 margin-top / bottom ，这种方法一般是按照下面的例子写，或者使用一些伪类，这是因为第一个或者最后一个是不需要设置的，但是这样很麻烦，如果有折行的情况，第二行的第一个也不该设置 margin-left 。

   3.  .btn + .btn {margin-left: 10px;}

   4. 所以推荐使用 gap: 5px 10px; 一行代码解决两个间距的问题，5px 代码垂直间距，10px 代表水平间距，根本不需要对任何一个 flex 项目做单独处理。
4. 一组类似的按钮设置公共的类名，再给独特的按钮设置单独的额外类名

1.1.3 菜单的布局

再比如有下面这样一个简单的菜单，我们需要确认的点有：

1. 鼠标 hover 的时候背景色是否占满整行
2. 第一条 / 最后一条，鼠标hover 的时候要不要留上下边距

有的时候设计稿不够全面，我们只能自己多注意，多问，避免无效开发。

1.2 永远优先使用 flex 布局

在你写了一个 dom 之后，请第一个就把 flex 布局加上好吗，除了必须是 inline 布局的元素，选择 flex / inline-flex 总是没错的

1.3 不同组件的类名不要重复

所有组件的最外层的类名不要重复，即便你在 vue 组件中的 style 标签中加上了 scoped 也不要重复！组件内部的小 dom ，如 btn 倒是可以重复。

假如你要改一个弹框的样式，你从开发者工具找到了需要改的 class ，你一搜项目中有很多，很难快速的定位这个要改的样式在哪个组件中。你就得一层一层往外找，直到找到独一无二的 class，很浪费时间。所以至少保证一个组件的最外层的 class 类型独一无二。

所以朋友们，在复制粘贴完一个现有功能组件之后，第一件事就是把它的 class 改掉，最好改成和【业务逻辑】相关的，比如一个登录弹框，可以叫 login-modal 而不是 new-modal

二、css 相关

css 写的好，ui 改的更快

2.1 css 属性书写规则

1. 在写样式的时候从上向下顺序要求，布局(display)、内外边距、宽高、字体颜色、背景色、其他        
2. 先写布局属性，再写样式属性，能简化就简化，追求最大简化原则
   1. 如 margin-left: 10px; margin-bottom: 5px; 要写成 margin: 0 0 5px 10px;
   2. 如果在一堆 css 属性中，最上面有一个 margin-left: 10px，最下面一个 margin-bottm: 5px；在改样式的时候很麻烦，找半天原来下面还有一个，至少要把相同的属性聚拢在一堆！
3. 写 css 的时候要把子类使用 scss 中花括号的嵌套语法写在父类中
4. 关于颜色的属性不要使用 white 等关键字，要使用十六进制或者 rgba / rgb，如 #ffff;
5. css 的单位使用 px
6. 不要随便用百分比，要搞清楚当前场景下百分比代表了什么再用
   1. 比如说一个 div 的margin / padding 的百分比，是相对父元素的【宽度】
   2. border-radius 的百分比，是相对自身的宽高
   3. transform / translte  的百分比，是相对自身尺寸
   4. width / height 的百分比，是相对父元素的
   5. background-position 的百分比，是相对背景定位区域的
7. 最小改动原则，如改变边框颜色的时候只改变 color
   1. 比如一个按钮正常状态 border: 1px solid red; hover 的之后边框变成蓝色，要写成这样 border-color: blue; 而不是把 1px solid 都重新 copy 一遍
   2. 这样写不进代码看起来简洁，也会减少浏览器的计算成本
8. 宁愿多嵌套几层也少用 !important
9. 永远使用 border-box

2.2 开发技巧

1. 使用 opacity 隐藏元素，代替 diaplay: none 可以防止一些页面布局的抖动
2. 一些场景使用 transform 定位，代替 top / left 可以更加精确，因为 transform 是亚像素级的
3. 使用 unset 重置某个元素的样式
4. 使用 width: 0 代替 v-if 防止组件重新初始化

2.3 开启 sourcemap

你是不是也一直都知道 sourcemap 这么个东西，但是从来没用过，现在可以用起来。

就 css 来说，在一个 vue+vite的项目中，在vite.config.ts 中如果你不配置 sourceMap相关的配置，在开发环境，组件内的样式，会被打包成内联的 style 标签放在 index.html 的头部，如下图所示：

在一堆 style 标签中，你根本就无法快速定位，是哪个组件打包而成的，这个时候你点击某个样式，也是会定位到某个 style 标签，你只能根据 style 标签内的内容来判断是哪个组件。

但是如果我们在开发环境开启一下sourceMap，就大不相同了，在 Styles 里面会展示行号和对应的组件名称，并且点击会跳转到 Sources 标签页下面具体的 vue 文件，只需要在 vite.config.ts 中配置即可。但是注意，只配置开发环境的，生产环境一般防止别人破解源码都不会配置，安全起见。

// https://vitejs.dev/config/
export default defineConfig({// 其他配置css: {devSourcemap: true}
})

三、生产力工具

在改 ui 的时候有一个很麻烦的点就是关于颜色的，比如一个颜色 #ffffff ，ui 说太白了，给我加 90% 的不透明度吧，总不能直接来个 opactiy: 0.9，这样 会导致整个元素都变了。

这个时候就要靠我们自己了，你可以把十六进制的 #ffffff 转成 rgba(255,255,255, 0.9)

但是白色还好说如果是其他颜色，我们根本就不知道怎么转，UI 还没有时间给我们确切的色值，这个时候就要靠我们自己了。

虽然有很多转换颜色的网站，但是都多多少少缺点东西。所以我自己搞了一个颜色转换工具，涵盖了十六进制各种透明度到 rgb / rgba 各种透明度的转换，如下图

从此之后，任何带有透明度的颜色都难不倒我了，各种颜色的转换，大家可以让 AI 写一下，总之非常的方便。

这样我们就可以省下来更多的时间摸鱼了～～