切图总结

前些日子仿了优酷的首页，中间遇到一些问题，积累了点经验，做个总结。

1. 需要最先明白的两点

不要只是无脑的切图，要去体会设计师的意图，不仅仅是还原设计稿，而且要尽可能去还原设计师的设计理念。

切图的时候就提前想好需求可能会有变化，这要求我们提前做点工作，减少需求变化时的工作量，一般是提取页面中的公共组件。如何提取公共组件，可以参考《编写高质量代码》。

2. 流程

仔细看PSD文件！！！！复杂些的PSD图，起码先看3个小时吧。看不好的话，后面推倒重来简直麻烦死！看PSD的时候主要是注意三个地方：

1. 确认好骨架设计，比如主要的布局方式（是浮动啊，普通流啊，还是绝对定位啊等等），分层设计并赋予相应的z-index值（可以在FW里标注上）。骨架设计好之后写出整理骨架的代码。

2. 提取共有的组件，一方面可以减少工作量，另一方面使得CSS文件的弹性更好，更好的应对需求的变化。提取组件的原则是：模块与模块与模块之间尽量不要包含相同的部分，如果有相同的部分尽量提取出来做成一个独立的模块。为了方便重用，每一个模块的结构都不应该太复杂。并且模块不应该太多，在模块尽可能少的原则下，做到尽可能简单，提高重用性。

3. 全局样式，比如字体样式，链接样式等，这样就不用见到一个字体就写一个样式了。

开始切图了，一次把图切完最省事。某些图标需要用雪碧图合成，减少HTTP请求。

从页首开始做，完全做完（不要留下一部分等到最后在做）一部分之后测试。

开始测量的时候，骨架部分（长宽，间距，背景颜色）可以尝试使用马克鳗来测量标注，比FW方便。具体细节，比如文字颜色，种类什么的，可以使用FW。

测试的时候一方面是测试浏览器兼容性，另一方面是测量像素对齐，推荐使用perfectpixel这个Chrome扩展，功能太强大！！！

3. 其他

选择器命名：

按照功能命名，而不是样式。

驼峰大小写区分单词，分割线区分层次。这样的两级命名法基本不会出现命名重复。

如何组织CSS文件：

可以按照功能划分，比如layout，font，color等。可以按照分区划分，比如header，footer，sidebar等。都可以，没有放之四海皆准的，按照实际的情况。这次我就尝试了base+common+page的结构。但是，在page层，在文件内部我又按照layout，font，color，header，footer，sidebar混合分类的结构。

在page层的文件中，我先把每一部分的注释写上，这样确定了CSS的结构，然后再一部分一部分的填充。

优先使用class，如果某个元素要在JS中添加动态效果并且只在页面中出现了一次，那么可以选择使用id标签，而不是class，这样在写JS的时候选择器的效率更高。

4. 遇到的问题

1. 不指明图片大小，IE8甚至不能显示图片。
2. 某个样式无效，一种可能是拼写错误，更可能的原因是选择器的权重太低，增加一加权重就好啦。只要打开调试器定位到元素，很容易找到出错的地方。
3. 如果想要a链接链接到某个具体的万维网页，在链接前面加上http:// 就好了。