防止程序猿和前端狗打架的几条约定

  一个项目或者产品的出生，往往包含需求、开发、测试再到生产，不是前端一个人在战斗，而是一个团队，少则3-4人，多则十几人，那么问题来了，开发人员需要遵守哪些约定，才能不让程序猿和前端狗不打起来呢？
  那么前端人员在项目合作过程中应遵守的最基础的规范是什么？

---

与程序猿约定的事 （事儿虽不多，但是效果立竿见影，好处多多～）：

• min文件不要去改动

.min.css、.min.js 都是外部引进文件，都是封装好的，牵一发动全身，为免意外，还是不要去动的好哦～

• css样式不要在页面上直接写，样式表不要随意改动

有些开发人员为图省事直接在div里写样式，如：

<div style="margin:0 auto;"></div>
或者写在head 头文件里：
<style> .myCss{margin:0 auto; }</style>
这种写法都是不可取的，应该尽量避免。

这样一来维护不方便，页面混乱，降低可读性，还会拖累加载速度。
样式应该统一在css样式表里维护，还有一个问题是开发人员随意更改可能还会引起样式冲突，命名不正确也会造成冲突，如果真的要改，需要把更改的样式内容告知相关的前端。

所以改样式的活还是交给前端妹子吧，以免造成伤害 /摊手/摊手～

• css引入放在head，js放在页面底部

虽然js放在head里面也一样不影响效果（也许是的），看控制台timeline后就会发现对加载速度影响很大哦！
建议css文件放在页面顶部，js文件放在底部，也就是说加载完html后再请求加载js文件！

• 配色请不要随意主张

一个产品一个风格，而配色不一的话这个产品就相当没有水准了， 有些开发人员并没有意识去取色，很多时候随便设置一个相近的颜色，于是项目中不同模块同样一组标题就会出现有些浅蓝，有些深蓝，有些藏蓝。。。

遇到取色障碍时候，用PS吧，更方便的一种方法 F12，谷歌里是可以直接取色的，如果设计没提供就问问前端吧～

• 图标或小图片尽可能使用图片精灵合成一张（不会的话可以找前端或者设计）

用图片精灵明显比一个一个引进效率高多了，遇到小图片小图标比较密集的时候一定要用图片精灵哦！

• 熟悉项目结构，尽可能使页面 、样式、脚本 三者分离

有看到过不同的目录下存在同一个样式文件的，引用的时候 也是很混乱的用不同的引用地址，造成冗余原因 肯定是这是个转手多次的项目或者是开发人员在整合的时候没有注意，以致重复的将文件加入到项目里面，给后期维护造成困难。 所以熟悉项目结构很有必要！

谷歌审计 Audits，查看页面冗余文件 （头文件引用但是没有引用到的css/js文件）

• DIV宽度的设置，多用百分比

多个容器嵌套的时候，如果需要固定宽度，值写最外层容器的宽度，里面的用百分比。如：

左右排版的页面，右边内容是另外链接的页面，只需将框架固定值如800px；里面也需要800px的话，width:100%;

• 产品相关

告知需要适配的设备，PC还是手机？告知用户主要用的PC的分辨率，以便做兼容。

---

前端狗要注意的事：

• 需求下来后确定下要做哪些适配
• Tip：谷歌审计 Audits

• Css写法建议：
  ①　合理情况下请尽可能合并css文件或js文件以减少http请求
  ②　尽量不要用id写样式
  ③　三无原则 ：无ID，无标签，无层级。尽可能做到样式分离

  · · · · · ·