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也要多考慮去定義使用，而嵌套，應該考慮合理的區間。

結語

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