现在的开发都提倡合作，以便提高开发效率，个人的单枪匹马肯定比不上一个团队的开发效率。重构也是如此。因此当我们从设计师那里拿到了设计稿之后，重构人员就需要开始分工，约定好命名规则，比如那些html中的class名是用哪种命名方式，文件名采用哪种命名方式，单词之间怎样连接，是用驼峰命名<code>myHeader</code>，还是用下划线连接<code>my_header</code>，还是用连字符连接<code>my-header</code>，各个目录之间的相对关系，因为我们引入文件时需要用到，还有对于那些页面有可能有命名冲突的地方，尤其是有几个地方可能会使用相同的命名的时候，一定要在开发之前解商量好命名，我想谁也不想自己的代码在合并之后发现被覆盖吧。另外非常重要的一点就是版本控制，如果这个网站需要基本定下来了，网站规模也不大，难度不大，同时团队成员又是在一起同时进行开发，可能这时候就没有必要用git，只需要在自己不确定的情况下以及合并代码前做一次简单的备份即可，但是如果团队成员不是在一起开发，没有办法及时反馈信息，存在信息不对称的情况，网站规模也较大，那么利用git进行版本管理，同时利用gulp进行自动化处理就非常有必要了。
命名约定做好之后，我们就需要开始商量一些公共的东西，首先最常见的就是我们开发人员肯定是需要用同一套css reset代码的，然后就是响应式的处理了，我们需要商量好响应式的断点在哪里，最低需要兼容到多少像素，（因为很多情况下，设计人员并没有提供响应式的设计稿，或者就是提供不全），工作室一般断点是在1200px、960px、720px，最低兼容到480px。在1024px、768px也是有可能的。商量完响应式的断点之后，我们就需要将响应式公共部分的css代码确定下来。同时如果这时候可以确定一些交互的效果，一些公共的交互效果代码也可以这时候确定，当然后面开发的时候也可以继续添加，如这次我们给很多图片添加上hover放大的效果，
我们商量好在需要这种效果的地方，给图片添加一个盒子，并为这个盒子添加上scale-img-container的class值就可以了。
.scale-img-container { overflow: hidden; }
.scale-img-container img { -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
商量完这些，差不多就可以开始开工了，个人开发完后，在团队进行合并代码的时候最好都在场，因为没有人会比自己更清楚自己写的代码，合并过程有问题的话，可以及时快速解决问题，另外css代码做响应式的时候也是应该从大屏幕兼容到小屏幕，应该把同一个断点的css代码存放在一起，当然除了一些公共盒子的响应式处理，从大到小，以下是一份合并之后css代码的推荐顺序
/******** CSS Reset -S ********/
这里存放css reset部分代码
/******** CSS Reset -E ********/
/******** CSS Public -S ********/
这里存放css的公共部分
/******** CSS Public -E ********/
以下存放最大屏幕断点下（如：大于1200）下的代码，这里也应该分好类，例如哪些是header部分，哪些是footer部分
/******** screen max-width：960px -S ********/
@media screen and ( max-width:960px){
这里存放屏幕最大为960px的css代码
}
/******** screen max-width：960px -E ********/
/******** screen max-width：720px -S ********/
@media screen and ( max-width:720px){
这里存放屏幕最大为720px的css代码
}
/******** screen max-width：720px -E ********/
/******** screen max-width：480px -S ********/
@media screen and ( max-width:720px){
这里存放屏幕最大为480px的css代码
}
/******** screen max-width：480px -E ********/
另外js代码为了防止污染全局最好是用一个自执行函数包起来，想想如果两个人都开发了一个和scroll事件有关的效果，很可能两个成员之间都会有一个名字为scroll的函数，这很可能就会造成覆盖。
(function(){
这里是我的js代码
})(window)
碎碎念完这些后我就开始总结一下开发遇到的一些代码问题吧。
1、图片底部有默认的margin间隙，(这个margin每个浏览器还不一样，我测的是chrome是3px，火狐是5px，IE11是4.14px，最奇葩)代码如下：
<style>
.color{
background:red;
width:100%;
height:20px;
}
</style>
<div>
<img src="img.png" alt="">
</div>
<div class="color"></div>
这个问题是因为img是一个介于inine-block和block之间的标签，解决这个问题的方法当然有也很简单，如下
方法一：
img{display:block;}
方法二：
img{vertical:top;}
方法三：
如果img有一个盒子的话，我们假设盒子class为img-container
.img-container{font-size:0;}
问题是我们有没有必要呢，我个人认为如果这个网站这这几像素会影响效果就应该去掉，甚至可以直接写在reset部分，但是如果影响不大，而且有很多的图片下是介绍的文字这种类型，我建议可以不用去除，在项目中我使用的是像上面提到的hover效果，我是去除了这几像素，因为这会影响我的hover效果，而那些图片下是文字的则没有，当然，这只是我个人的看法。
2、如下图，我们经常会遇到一边是图片，另一边是文字的情况
对于这种情况我们要想到的是一般处理方式就是固定这个盒子的高度，图片不变，文字部分变宽度。我会想到两种处理方法，一种是利用简化版的圣杯布局，另一种是为文字部分设置一个margin-left，
一般简单但是完整的圣杯布局代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>圣杯布局</title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<div class="header">
</div>
<div class="main-container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.header {
background: #000;
height: 200px;
}
.main-container {
height: 500px;
margin: 0 150px;
}
.main, .left, .right {
float: left;
position: relative;
}
.main {
width: 100%;
background: blue;
height: 100%;
}
.left {
width: 150px;
background: red;
height: 100%;
left: -150px;
margin-left: -100%;
}
.right {
width: 150px;
height: 100%;
background: yellow;
right: -150px;
margin-left: -150px;
}
.footer {
height: 100px;
background: green;
}
我们只需要将右边部分去掉即可。但是圣杯布局的缺点就是，当main的宽度小于left的宽度的时候，left部分会飘向左边我们看不到的地方。
另一种利用margin处理方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>margin处理</title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<div class="container">
<div class="imgcontainer">
我是图片
</div>
<div class="word">
我是文字
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
color: #fff;
}
.container {
height: 200px;
width: 100%;
}
.imgcontainer {
width: 200px;
height: 100%;
}
.imgcontainer {
float: left;
width: 200px;
background: #000;
}
.word {
margin-left: 200px;
background: red;
height: 100%;
}
我们首先要知道，小屏处理这种形式的方法一般如下几种：
1、将图片和文字均缩小，布局不变
2、图片消失
3、文字消失
4、文字在图片下方显示
当然这些具体的效果都应该参考设计稿，如果没有设计稿，当然就是要和设计师商量了。
这些效果各异，应该依据所需效果处理，我建议是采用margin处理，也就是后一种，这种方法在处理sidebar上也常用到。
3、一种导航下拉菜单效果
以下是这次的导航下拉菜单效果
这是之前研发部制作的大气科学院的效果，自己利用css3仿的，一开始本来是想用css3仿工作室的slider逐渐下拉展开的效果的，但是一开始我认为因为每个菜单的子栏目数目不一样，无法用一个统一的动画，单个添加又嫌麻烦。但是后来我又想到其实我们可以将子栏目的背景色放在li下，而不是ul，ul背景设置为透明，然后利用css3动画设置高度为最高的那个即可用一个动画解决，这些导航条的源码可以在这里找到点我点我这是我收集的一个hover效果合集，还没收集完，之后会持续更新，欢迎来这里逛一逛。
4、接下来就是当一个页面很长时，也就是高度很高时，可以考虑采用懒加载的形式，因为还是有一部分人看到一个很长的网页顿时就没有看下去的欲望了（比如说我），这也就是长的文章会分页的原因，懒加载可以加上一些效果或许会更吸引人呢。
5、现在通栏布局下经常会看到给导航条给一个fixed布局如下
如果你想要是实现，首先应该知道的是fixed布局会脱离文档流，因此，此时不管是块级元素还是行内元素，并不会占满整个屏幕，此时应该大盒子这加上
</code>width:100%</code>这一属性
最后的话分享两个用于切图的工具：pxcook和assistor ps，这两个都是郑亮师兄推荐的，这两个工具真的很强。
网友评论