CSS禪意

標題取自《css禪意花園》一書，還記得當年讀此書時的情景，真的是內容和書名一樣的優秀，就以此標題作為自己在該文的一種追求吧，儘管我的水平和見解都和Dave Shea相去甚遠。該文算是對前兩年寫頁面工作的總結吧，現在比較少關註css了，可能觀點有狹隘的地方，同時文中也有一定的思考和理解，也許並不一定特別適合初學者閱讀，本人時間有限，也沒辦法針對具體的知識點做深入的講解或提供代碼示例，所以在閱讀過程中如果有不理解的地方，歡迎提問並互相學習交流。

　　當UI設計師給了你一張psd圖，在對它進行切圖，實現成靜態頁面併在瀏覽器上完美展現，這個過程需要用到html和css。本文就從這個過程入手，講講相關知識點。

開發前期準備

1. 提取圖片
　　UI設計師往往只提供給前端人員一張完整的psd圖，甚至對於無用的圖層也不清除，這個時候前端就需要自己進行ps，提取所需的圖片，並保存到項目圖片庫中。從我個人體會而言，我是建議前端自己ps的，理由是：
　　- web頁面需要根據業務和技術需求選取不同的圖片文件格式，而多數設計師並無法完全理解
　　目前主流的圖片文件格式依然是jpg、gif、png，這三者的區別應用和這麼做的目的可以查看拙文三種圖像文件格式的選擇
　　- web頁面需要考慮性能因素，對一些圖片進行sprites貼圖處理
　　頁面圖片的請求數越多，載入就越慢，一些不規則和具有特定業務場景使用的圖片可以通過利用sprites技術來減少圖片請求數，進而提升性能。sprites圖片的製作可以使用一些軟體或線上生成，線上生成工具CSS Sprites Generator
　　- 字體圖標的選擇
　　應用字體圖標的好處是能夠通過css簡單地控製圖片的大小、顏色，如果是矢量圖標，還可以避免跨平臺頁面製作導致的圖片失真問題。缺點是市面上瀏覽器對字體圖標文件的格式支持不統一，得生成不同格式的文件來進行相容性處理。推薦一下由阿裡巴巴UX部門推出的矢量圖標管理網站Iconfont.cn，該網站有豐富的矢量圖標可以收藏，並可以在平臺上建立項目，實現項目圖標應用協作管理。具體應用可以參見該站點的文檔幫助。
　　- img or background?
　　  · 從業務角度來說，業務類型的圖片適用img標簽，而裝飾類型的圖片適用background定位
　　  · 從seo角度看，需要提升搜索關鍵字效果的應該使用img標簽，反之可得
2. 相容瀏覽器版本的決策
　　不同的產品有不同的目標客戶群，不同的目標客戶群決定項目開發需要註重的瀏覽器版本相容。相容性問題是因為瀏覽器內核不一致導致，而根本原因是因為在早期，沒有統一的標準和規範讓瀏覽器廠商來遵循。在編寫代碼開始前，應該向產品經理確認該項目需要相容的最低瀏覽器版本，這裡更多的是指IE瀏覽器。瀏覽器版本決定我們可以選擇哪些css選擇器，應用哪幾種佈局方式，規避哪些常見的相容性問題等等。
3. 響應式開發
　　由於智能手機的普及以及網路越來越發達，目前移動端的開發愈發的重要。是針對不同的平臺分別定製不同的代碼，還是一套代碼適應多種平臺（即常說的響應式開發）？也是需要團隊考慮的方向。響應式開發在設計層面來說，需要考慮UI展示的不同，終端設備交互的差異，在技術層面來說，就是媒體查詢+液態圖片+流式佈局的綜合應用。

HTML

　　Html的設計初衷是讓用戶能在瀏覽器上更好的地瀏覽文字，所以會有h1~h6標簽用來區別不同標題級別、ul和ol來定義列表種類、p用來表示段落。不同的標簽會有不同的預設樣式，後者會讓頁面在瀏覽器上展示出層次感，便於閱讀。

　　Html的標簽各有所用，所以開發者在編寫html代碼的時候，也應該從這一方面入手，讓標簽做正確的事情，個人認為這也就是語義化提出的初衷。一個html頁面，可以從下麵幾個方面實現語義化：
　　- 讓標簽做它該做的事情
　　- 儘可能少的代碼嵌套
　　一部分開發者寫的代碼結構嵌套很深，有的時候並不是沒有認識到弊端，而是不得已而為之。原因就是對css應用得不夠熟練。比如一行文字前面加個小圖標這樣的場景，實現方式有很多種：
　　· 給文字設置padding-left，用背景圖定位的方式
　　· 給文字標簽添加:before偽元素選擇器，存放圖標，定位之
　　· 增加一個空標簽來設置圖片樣式
　　顯然，最後一種方式是種反模式，不建議使用。
　　- 去除冗餘的標簽屬性
　　在保證前面兩個原則的情況下，通常我們只需要對一個業務模塊的最外層標簽定義一個鉤子（id或者class等等），然後結合css強大的選擇器，就可以避免需要給每個標簽添加識別屬性，進而書寫css的尷尬
　　- 添加有意義的屬性
　　有時候給一些特定標簽添加屬性能夠讓頁面更加友好，並有利於seo。比如給img標簽添加alt屬性、給a標簽添加title屬性等。
　　- 校驗
　　查看一個網頁結構是否合理，一個好的辦法就是把樣式表去除，然後在瀏覽器上查看，理論而言可讀性好的頁面，結構就是合理的

CSS

　　隨著web的發展，簡單的html已經不能滿足人們的審美需求，於是css應勢而出，css的機制就是通過link或style方式，告知瀏覽器，瀏覽器解析css規則，並和相對應的標簽元素進行綁定，找到相對應的標簽就靠seletor。

1. 選擇器
　　Selector一直在增加，查找功能越來越強大，為的就是適應越來越豐富的web應用開發，相信隨著時間的推移，還會有更多的選擇器出現。從基礎選擇器到偽類和屬性選擇器，合理地進行選擇才能寫出優雅的代碼，這是基本功，得多寫多練。
2. 繼承和層疊
　　Css的另一機制。繼承實現了樣式的共用，常見的如color、font屬性，最終目的是保證開發的合理性，想想如果需要為每個標簽都寫一遍字體定義是一件多麼可怕的事情。我認為層疊的機制是依賴於繼承的，如果沒有繼承，也就不需要層疊存在了。css通過選擇器的優先順序來告知瀏覽器怎麼樣應用樣式，確定優先順序有一個計分原則specificity，除了計分原則，還有很多特殊性需要知道，比如important、多個相同選擇器的聲明、樣式表的種類以及它們的優先順序關係等等。層疊的本質是為瞭解決樣式復用問題，一個可復用的樣式（可以理解為基礎樣式）的選擇器如果越多，那麼層疊覆蓋的選擇器就越複雜，所以在寫css的時候，減少選擇器嵌套是個不錯的準則，特別是在出現了像sass和less這樣的預編譯工具，很容易就寫出了多層選擇器，影響了瀏覽器的解析速度。
3. Reset樣式
　　正如前面html說的，html有許多標簽預設就有樣式，比如a、p、ul等，不同的瀏覽器在賦予這些標簽樣式的時候，並不統一，這就會造成初始化頁面展示不一致，還有情況如列表標簽ul、ol，預設樣式太過單一，往往滿足不了業務需求，所以這就需要在一開始的時候就對預設樣式進行重置。不是所有的樣式都需要重置，一個站點，往往只需要對一些常用的標簽且有預設樣式的進行重置，像bootstrap那樣大而全的UI庫，因為得兼顧許多應用的場景，所以會列出許多需要重置的標簽，但是一般的站點確實是不需要的，精簡是css應該追求的一個方向。
4. Box Model
　　Css佈局依賴於兩個方面，元素和定位。不管是行內元素或塊元素，在頁面上的展示都是一個個矩形框，因此就有了框模型的概念。框模型是css的基礎，在應用過程中，得註意行內元素的垂直margin無法生效，而同一個bfc內的塊級元素的margin會發生摺疊現象，框的內容寬度在沒有width的情況下的取值原理。如果可以的話，瞭解IE低版本混雜模式下盒子的展示方式，以及box-sizing的用法就可以了
5. BFC的原理
　　對css的佈局有比較深入研究的朋友們或許能理解，BFC就是css各種佈局屬性綜合應用的大雜燴。它提出的目的就是在於總結一套規則，告訴大家當碰到使用相關屬性的情況下，元素會有怎樣的表現，以及元素和兄弟元素或父元素，或兄弟元素的子元素乃至層級之間優先順序關係等等。這些相關屬性可以從清除浮動的方式中去獲取：
　　- overflow屬性除了visible的取值
　　- display屬性line-block, table-caption等
　　- float屬性非none值
　　- position屬性absolute和fixed值
　　當元素有了上面屬性之一，就會形成一個獨立的容器。
6. CSS和CSS3
　　Css3提供了許多可供實際場景應用的屬性，但是我始終覺得它更像是武俠里說的只是武功應用的法門，如果要讓武學有個質的飛越，還是得把css一些很基礎的東西學扎實，比如我前面5點所寫的，但是不限於。
7. SASS
　　用sass來寫css體驗還是不錯的，用得好的話會有做css架構的感覺，這是因為它的功能決定的。比如它支持變數定義，嵌套，導入樣式表，函數定義並可傳參，樣式組合重用以及簡單地計算功能。如果用得不好，它的功能就發揮不出來，比如定義了變數，只引用了一次，其他地方還是像寫css那樣，另外像mixins和extend也要多考慮去定義使用，而嵌套，應該考慮合理的區間。

結語

　　洋洋灑灑寫了這麼多字，花了不少時間，腦細胞死了不少。文中雖然沒有舉例說明，但是每一段文字的下筆我都是先在腦海中先想象了應用場景，靠著自己的語言闡述出來。希望這篇文章能給在前端界面開發有過一定經驗的朋友帶來一些思想上的交流，不足之處還望指教。