web前端佈局篇（切圖）

web前端佈局篇（切圖）

這裡的切圖不是指ps裡面的切圖，而是指web前端工程師將設計圖轉化為靜態頁面的過程。

在佈局的時候，我們通常會以設計圖為藍本，然後將設計圖拆分，變成一個一個的HTML標籤，搭配上css樣式，實現靜態頁面的佈局。

web前端新手在佈局的時候出現的問題

1.只注重結果，忽略程式碼結構。
2.程式碼的重構性很差，稍微一加減板塊，整個頁面全部癱瘓。
3.CSS冗餘樣式很多。
4.標籤使用不準確，不考慮標籤對瀏覽器的友好程度。
5.不注意程式碼分離，喜歡把樣式寫在頁面裡，甚至寫行內樣式。
6.不注意程式碼格式，不換行不縮排。
7.命名不規範。
……

問題很多，這裡就不一一列舉了。

怎麼解決這些問題？

1.將設計圖歸類，把同類的塊和元素歸成一類，便於編寫公共樣式。
2.程式碼注意清除浮動和寬高的計算，避免標籤超出父類元素的範圍。
3.CSS合理的使用選擇器，將重複的程式碼合併。
4.儘量減少使用對瀏覽器不友好的標籤，例如（table、h1）等。
5.在寫頁面之前，建好大致的資料夾，便於存放不同的檔案，進行程式碼分離。
6.建立良好程式碼的編寫習慣。
7.使用英文命名，駝峰命名法。

其實呢，道理人人都懂，但是做起來是很難的。因此，為了養成良好的編碼習慣，其實最主要的在於，自己沒有意識到這樣寫出來的程式碼會帶來什麼樣的後果。

為什麼要注意這些問題呢，其實原因很簡單。因為程式碼和頁面都是不固定的。當你編寫程式碼的時候，有可能設計需求也在時時刻刻的改變，因此，在編寫程式碼的時候，如果不注意一些規範和經驗，就會造成後期維護困難等問題，而在團隊開發中，假設一個人的程式碼寫的很亂，也會導致在別人修改你的程式碼時，需要更多的溝通，降低效率。