切圖總結

前些日子仿了優酷的首頁，中間遇到一些問題，積累了點經驗，作個總結。

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:// 就行了。