做網(wǎng)頁(yè)重構(gòu)需要：
還原設(shè)計(jì)稿視覺(jué)效果，并通過(guò)標(biāo)準(zhǔn)驗(yàn)證（HTML）
在1的基礎(chǔ)上，實(shí)現(xiàn)多瀏覽器的兼容（HTML）
在2的基礎(chǔ)上，標(biāo)簽語(yǔ)義化（HTML）
在3的基礎(chǔ)上，選擇較優(yōu)的實(shí)現(xiàn)方式（包括模塊化結(jié)構(gòu)，方便程序腳本使用，HTML和CSS）
在4的基礎(chǔ)上，考慮到擴(kuò)展性、復(fù)用性和可維護(hù)性（HTML和CSS）
在5的基礎(chǔ)上，考慮到整站的樣式分布（包括如何實(shí)現(xiàn)分布）
在6的基礎(chǔ)上，樣式寫(xiě)法的優(yōu)化（包括技巧的應(yīng)用）
通俗的講，我們大約需要做到以下幾點(diǎn)：
- 更改之前不合理的標(biāo)簽，使之語(yǔ)義化
- SASS、LESS嵌套層次不超過(guò)三層，過(guò)了就要改或者at root
- 類名，id名做到行為層和樣式層分離，加各自的前綴區(qū)分
- 加足規(guī)范注釋
- 盡量減少標(biāo)簽數(shù)量，自閉合標(biāo)簽無(wú)需閉合，如
input、br、img、br、hr - HTML5規(guī)范中 disabled、checked、selected等屬性不用設(shè)置值
- 避免過(guò)分重排，常見(jiàn)重排屬性：
- width
- height
- padding
- margin
- display
- border-width
- position
- top
- left
- right
- bottom
- font-size
- float
- text-align
- overflow-y
- font-weight
- overflow
- font-family
- line-height
- vertical-align
- clear
- white-space
- min-height
6.Display 屬性會(huì)影響頁(yè)面的渲染，合理使用。
- display: inline后不應(yīng)該再使用 width、height、margin、padding 以及 float；
- display: inline-block 后不應(yīng)該再使用 float；
- display: block 后不應(yīng)該再使用 vertical-align；
- display: table-* 后不應(yīng)該再使用 margin 或者 float；
7.優(yōu)化CSS選擇器，盡量避免使用消耗更多匹配時(shí)間的選擇器，CSS 選擇器是從右到左進(jìn)行規(guī)則匹配。 - 避免使用標(biāo)簽或 class 選擇器限制 id 選擇器
- 避免使用通用選擇器
- 避免使用多層標(biāo)簽選擇器。使用 class 選擇器替換，減少css查找
- 避免使用子選擇器
- 使用繼承
重構(gòu)目標(biāo)
- 標(biāo)簽語(yǔ)義化（HTML5）。
- sass嵌套層次過(guò)多（不能超過(guò)三層)，消除多余的id class等無(wú)用的css代碼
- 樣式層（.container），行為層(J_container)分離 eg: J_SiteFooter J_Module 參考淘寶
- 左右浮動(dòng)分離（左邊的向左浮動(dòng)，右邊的向右浮動(dòng)），防止頁(yè)面崩掉。電腦安裝主流瀏覽器，測(cè)試每個(gè)頁(yè)面是否崩掉。
- scss規(guī)范(看群里的scss全站設(shè)計(jì)PPT)重點(diǎn)
- 瀏覽器版本過(guò)低添加提升“升級(jí)您的瀏覽器”。
- css注釋，所有需要導(dǎo)入的css加下劃線前綴，看ppt規(guī)范。
- 鼠標(biāo)手型。
- 圖片的alt解釋信息。
- 因設(shè)計(jì)或排版而沒(méi)有完全顯示出來(lái)的文字信息的title提示
- 網(wǎng)站logo的權(quán)重設(shè)置H1、網(wǎng)站主要標(biāo)題、標(biāo)識(shí)的權(quán)重設(shè)置H2-H6、stong、em、b等(對(duì)搜索引擎的友好可讀性)
參考資料 http://ued.sina.com.cn/?p=868
http://ued.sina.com.cn/?p=726
http://ued.sina.com.cn/?cat=7
http://mxd.tencent.com/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB%EF%BC%9A%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E4%B8%8E%E9%87%8D%E6%9E%84%E9%82%A3%E4%BA%9B%E4%BA%8B%E5%84%BF%E3%80%90%E5%9F%BA%E7%A1%80%E7%AF%87%E3%80%91%E5%8E%9F
http://#baidu.com/data/browser
