切圖仔的一點工做經驗

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啦！

慢慢補充

結尾