切图仔的一点工作经验

[ccchangkong]

blog

切图仔的一点工作经验

0 磨刀不误砍柴功

一个趁手的编辑器（比如自己调教好的st3）或IDE（如Hbuilder、webstorm），可以极大的提高自己的工作效率。

调试功能强大、实现规范标准的浏览器（Chrome！）。

明确浏览器兼容要求，能用啥该用啥想想清楚。

一台足够快的电脑。

多学多做，代码基础扎实。

1 PSD到手之后

从美工那拿到PSD文件后，先别急着敲，仔细看一遍，想想html结构该怎么建，哪些元素可以重用，一些效果该怎么实现。

如果美工做图的时候能把什么命名字体行距内外边距标注清楚，能省切图仔多少事

2 编写HTML

先创建好模板，常用的meta标签、重置css这些先带上。

接下来写页面的框架，定好几个大的区块，往里面填具体的结构，注意结构要清晰明确语义化。

3 编写CSS

类名

我个人倾向于BEM命名法，当然，我现在水平不够，不太纯

写css的时候，靠着IDE智能提示，那感觉，特爽！

伪元素

装饰性元素可以尽量用伪元素来实现，什么小图标小线段序号（使用css计数器）之类的东西，可以有效减小HTML文档的复杂度。

杂七杂八的一些技巧

高宽不定死

减少计算量，方便更改

少用浮动

如果不是非要兼容IE7，那使用inline-block可以替掉很多需要使用float的场景。

少用浮动，那由浮动引起的一些问题也就没有了，像什么破坏DOM流。

必要的回退

/*先写回退，再写高级样式*/
background-color: #fff;
background-color: rgba(256, 256, 256, 0.48);

使用高级选择器

很多情况下都不用js啦！

慢慢补充

结尾