錦上添花——多個細節幫助你更優雅地書寫頁面

咱們常以「整齊」，「易讀」，「親切」，「易於維護」，「複用性強」等來形容一些優秀的開發者所寫的代碼。如今，對代碼的好評還有一個更爲時尚的詞「優雅」，是否是聽起來以爲很親切呢？ css

頁面是互聯網產品的表現層面，不只講求外觀，並且會應對更新迅速的互聯網產品需求。要成爲一名優秀的開發者，經驗積累是必不可少的，而一部分經驗概括起來正是在工做過程當中的細節。下文介紹的便是在頁面開發流程中的多方面的細節內容，但願對這些細節內容的探討，能夠幫助各位頁面開發者作得更出色，以更優雅的姿態來書寫頁面。 html

從Photoshop開始

從UI設計稿到靜態頁面通常都稱做「切圖」。這個詞很容易使人聯想到Photoshop中的「切片工具」，但如今切片工具用得並很少，大部分在頁面中須要用到的視覺元素，都須要拼合到一個或多個單獨的圖片中。 前端

視覺元素的分離和拼合 瀏覽器

快速更新的互聯網產品需求使得UI設計師須要優先保證UI設計稿的視覺效果，也所以有時候沒有時間整理UI設計稿源文件。因此，拿到手邊的UI設計稿，可能存在圖層缺乏命名，分組混亂等問題。 架構

如何快速找到須要分離的視覺元素所在的圖層？這時候應該使用的是Photoshop的「自動選擇」。另外要注意的是，某些邊緣陰影及高光是由圖層樣式生成的，在選取這些部分時應選取旁邊的實際繪圖內容。 工具

Photoshop的「移動工具「，在使用時勾選一個「自動選擇」的複選框便可。此外能夠設置是自動選擇圖層仍是圖層所在的分組。 編碼

拼合是在一個新創建的psd源文件上進行，命名應當與最後輸出的圖片命名相同。拼合時應當使用網格作整齊的排列（快捷鍵Ctrl + ‘ 切換網格顯示）。整齊的拼圖不只方便多人編輯，並且css代碼中的背景座標定位會更加快捷（誰都喜歡有規律的數字）。 spa

在Photoshop的編輯→首選項中能夠設置合適的網格尺寸。 設計

爲方便後續編輯，拼圖源文件應適當保留原UI設計稿圖層（如保留文本圖層，不作圖層合併，方便之後的文本更改），同時作好圖層命名和分組。此外，推薦在底部增長2個圖層：底色層和網格尺寸描述層。 htm

底色層：Photoshop默認的表示透明區域的網格背景（和前面的尺寸標識的「網格」不一樣）中，子網格的邊線不容易看清。而加上一個鋪滿全畫布的底色，網格線就很容易辨識了。底色通常用純白色便可，對於部分顏色偏白的UI元素，能夠填充黑色做爲底色。底色層只是方便排列元素，在輸出圖片時，底色層設置爲不可見再輸出。

網格尺寸描述層：空白圖層，採用「20×20」這種格式的命名，說明使用的網格尺寸大小。這樣，多人編輯時，能夠方便別人很快的設置出適合編輯此拼圖源文件的的網格尺寸。

拼圖源文件必定要保存到開發目錄中，能夠在images目錄中，單獨創建命名爲_psd的目錄，而後相關的拼圖源文件都保存在這個目錄中。

對應的，在靜態頁中用做圖片佔位和示意的臨時圖片（如用戶頭像），能夠保存在命名爲_temp的目錄中。

gif與png-8圖片的雜邊

爲何gif和png-8格式的圖片存在雜邊？這是由於，gif和png-8格式的圖片使用的是索引顏色編碼，而索引顏色中，只存在全透明索引顏色（用來繪製全透明的像素點，也即空白點），而不存在半透明索引顏色。可是，通常的視覺元素的邊緣都存在半透明的像素點以造成視覺上的平滑過渡，這些半透明點要保留到gif和png-8，就必須指定用一種實色替代。這也就是Photoshop中的雜邊選項的意義。

Photoshop的這個顏色表中能夠看到，只有這一個全透明索引色。

Photoshop中也能夠選擇雜邊爲「無」，這時半透明點會被丟棄，再也不保留到輸出的圖像中。因爲邊緣缺乏用做過渡的像素點，這樣的圖像可能會有明顯的鋸齒，多數狀況下效果不佳。

點擊「雜邊」旁邊的小箭頭，下拉菜單中便可以選擇「無」。

若是選擇一個顏色做爲雜邊色，Photoshop在生成索引顏色表時會把圖像中的半透明像素點也考慮進去，並用合適的索引顏色（參考選定的雜邊色）替換這些半透明像素點。存在雜邊色的gif和png-8圖中的視覺元素，處於和雜邊色相同的背景色中的時候，效果最佳，因此雜邊色的選取應參考最終元素所在的背景。

若是有多種類別的背景而沒法保證效果，應使用png-24。這裏的png-24實際上基本都是png-32，即應包含透明度alpha通道。這樣表述也是由於在Photoshop中，只用了一個複選框的設置來區分png-24和png-32。

勾選「透明度」後，實際上保存的是png-32。

針對不支持png-32的IE6，單獨輸出一個效果較差的png-8或gif，在必定程度上保證IE6的正常外觀。這也是針對不一樣瀏覽器的「漸進加強」開發思想的體現。

爲IE6單獨保存的png-8圖。

書寫內容與HTML

在寫html以前，仔細閱讀UI設計稿是必要的。一方面，理清頁面的各個組成部分以及這些組成部分相互之間的聯繫。另外一方面，分析頁面及頁面的組成部分應該用怎樣的DOM結構實現。

頁面的DOM結構因人而異。從基礎的層面來講，只要可以實現UI設計稿的意圖，用什麼DOM結構都是可行的。而從專業的層面來講，頁面的DOM結構不只要易於其餘的開發者辨識和讀取，方便協同開發，並且要有良好的可維護性和拓展性，方便後續的增減和更新。

語義化or非語義化

「語義化」的意思是說，在寫html時，依照頁面的內容，選取最合適的html標籤，以體現html標籤的本意。如<p>表示文本段落，那麼若是一段文本確實是段落，那麼就應該把它們放在<p>標籤中，而不是使用沒有語義的<div>。

語義化，不只有利於SEO，並且更重要的是使網頁內容層次和結構清晰，在可讀性上十分友好。試想一下，若是一個頁面的<em>標籤中的內容，從上下文看確實就是emphasis（強調）的內容，會不會以爲這個頁面很整潔很親切呢？

可是，語義化也不是絕對的。微博的新的的站外組件（widget），並不聽從語義，僅使用限定的標籤，如塊元素只使用<div>，非連接行內元素只使用<cite>，圖標只使用<u>。以下圖所示最近的新版集體微博組件。

新版集體微博組件的標題部分（紅線圈出部分）的代碼：

這樣無視語義並限定標籤的使用，是爲了儘量減小組件被引用的站點的樣式，對組件自己樣式的干擾。<cite>和<u>都是不多使用的標籤，<div>又是非語義的標籤，這樣，站點css中以標籤做爲選擇器寫的樣式，就不多會影響到組件（沒有多少站點會直接對<div>等非語義標籤寫reset或默認樣式）。

完備的class命名

先來看使用Firebug查看的如下一段html代碼。（取自開發中的微博話題組件）

能看出特別的地方嗎？沒錯，就是全部的html節點，無論位於DOM結構中多深的位置，都有本身的class命名。

爲何要這麼作？

首先，須要明確，少一些class命名，經過節點之間的相互關係，固然也能夠實現對正確的html節點設置樣式。這也是咱們過去寫html通常的作法，並認爲這樣能夠精簡html。事實的確如此，但如今咱們應該認識到，精簡的html卻會帶給咱們愈來愈麻煩的css維護。

CSS Wizardry的Harry Roberts對此作了簡單的解釋說明。

Imagine a teacher trying to control a class of kids who have no names. That’s how we used to write HTML >.<

意思是說，就像咱們爲何給人取名字同樣，當事物被精確地命名後，事情會變得容易許多。稍微想一下就能夠理解，直接說「皮卡丘」比說「小智一直帶在身邊的神奇寶貝」要簡單地多。更重要的是，若是節點的位置發生了改變，原來的基於節點位置的寫法就再也不正確了，但使用名字的寫法則不會存在這個問題。

把一些工做推給html，讓css更加容易一些吧。想象本身是一個班級的老師，有什麼會比每一位同窗的名字更方便表示每一位同窗呢？

外觀與CSS

CSS自己很容易寫，但合理的CSS架構卻不是一個簡單的事情。要保持CSS的可維護性，最簡單的作法就是追求CSS的複用性，儘量減小CSS量。

任什麼時候候，都要寫CSS註釋
CSS通常來講可讀性較差，所以須要咱們多寫CSS註釋。註釋內容越豐富和細緻越好，並且建議結合ASCII Art（字符畫）。若是有時間，甚至能夠在一個CSS文件中寫一個目錄。

若是是後續增長更改，還能夠附上時間和項目相關信息，這在多人協做中頗有用。

優雅的CSS選擇器

優雅的CSS選擇器不只看起來親切，並且也能夠提高瀏覽器的樣式渲染效率。
主要使用類名（CLASS）做爲選擇符，不作額外的限定。

上圖中下一種寫法更好是由於非<p>標籤元素也有效，標籤能夠隨意替換，並且樣式渲染時更加高效。

避免沒必要要的繼承關係。繼承寫法是爲了不相同命名的選擇符的樣式相互影響，但在層級使用上要注意適度。

瀏覽器樣式渲染引擎是按照從右向左的順序來解析CSS選擇器，最右邊的選擇符稱爲關鍵選擇符（Key Selector），每個額外的繼承選擇符都會增長樣式渲染引擎的查找匹配時間。並且，若是沒有額外的繼承關係，子元素會有更好的重用性。

總結

在實際的經歷中，咱們開發者所遵循的，主要是在經驗積累中的成果，稱爲「最佳實踐」。在心中明確這樣一種「最佳實踐」的理念，就能夠幫助本身培養良好的習慣，在頁面書寫上作得更加天然，更加「優雅」。

期待和各位前端開發者共同進步！