學習提升你CSS技術的法則

分享一些我這幾個月來理解的東西，這並非一些代碼片斷或者是css小技巧，而更像是一些通用的規則或者是最佳實踐之類的東西，以下：

• 不要讓你的代碼脫離你的掌控，儘可能簡潔

• 掌握基礎，學習CSS技巧

• 保持代碼的可複用性

• 面向對象的css

• Css3 瞭解他能作的以及你可使用的部分

• 漸進加強與優雅降級

• Css預處理工具

• 與時俱進

• 取長補短

• 熟能生巧

 

你想說什麼呢？你準備好了？那咱們繼續往下吧。

 

1.不要讓你的代碼脫離你的掌控，儘可能簡潔

 

別讓你的代碼脫離你的掌控

這是編程的一種通用建議，不只僅適合css.當你開始寫代碼的時候，先思考，思考如下幾個問題：

• 我怎樣實現？

• 有其餘方法實現麼？

• 怎樣優化（簡潔，可維護，等等）？

 

急於編碼會浪費時間，你有可能花了一個小時也沒實現，不得不從頭再來，這不該該發生。

 

若是你花了好幾個小時寫一個css幻燈片，最終沒辦法用了個js幻燈片插件或者別的，這是很蛋疼的，並非說你沒成功，而是無謂的浪費了不少時間。若是項目有deadline的話，你就要悲劇了。

 

保持他的簡單性

Css很簡單，但若是你想，一樣能夠變得很複雜。在不少場景裏，最簡單的便是最好的。當你要實現什麼效果的時候，問問本身：還有更簡單的方法實現麼？答案常常是確定的。

 

舉個例子，簡單水平導航欄，你能夠有多種方法實現：

• 列表元素浮動；

• 改變列表元素display屬性爲inline；

• 改變列表元素display屬性爲inline-block。

 

最簡單的-設置display:inline，不須要清除浮動，不須要清除inline-block形成的空白，只須要一些padding便可，結束。

 

2. 掌握基礎，學習CSS技巧

不只是掌握css,掌握任何東西都要從基礎作起。一個對最基本的東西都理解不透徹的人是不可能成爲大師的。

 

CSS基礎

什麼是css基礎呢？你可能會聽到不一樣的聲音，這也是一種沒法用言語表達的東西。但我認爲，css的基礎是如下兩部分：

• 盒模型：每一個元素在css中都是一個盒子模型(塊級或者內聯)，包含寬高及各類padding margin border.這是最重要的,詳細能夠閱讀這裏。

•  權重:瞭解哪一個屬性權重最高，在調試css中很是重要。更多相關信息能夠閱讀Assigningproperty values, Cascading, and Inheritance一文。

 

CSS技巧

當你瞭解了以上原理，纔算踏上了康莊大道。那麼如今你可能會處理一些特殊狀況，下面展現了一些：

忘了在父元素設置position

 

這時候你會想：坑爹啊，怎麼東西跑到頁面左上角了？？？你忘了給父元素設置 position:absolute或relative了。。

 

添加下下層技巧

每一個搞前端的都被層疊上下文折磨過。這個例子告訴咱們，你不能對一個已經觸發層疊上下文的元素（多是z-index,transform或者是透明度）的子元素來應用z-index屬性。 這沒有變通方案，一旦你遇到過，絕對會記憶猶新。。

 

忘了清除浮動的技巧

你的佈局亂套了，容器亂飛。你淚流滿面：這是腫摸了。。請檢查下浮動，可能忘了清除浮動了。

 

記住，一個容器若是僅僅包含浮動元素，他會塌陷，除非你清除浮動或者設置height或者overflow屬性。

 

這種例子比比皆是，若是繼續寫那就沒完沒了了，這不是我這篇文章的目的。

 

我只是想指出 天天，人們都會不斷的發現，css有不少的特性跟特殊狀況。你可能這一次踩個坑，下次就知道怎麼對付了。

 

3. 保持代碼的可複用性

Dry表明 不要重複本身。這並非css特有的，這適合任何語言。

 

它的核心思想是，能重用的代碼就不要寫第n遍。在別的語言意味着封裝成function,在css裏，經常表明你須要利用一個可複用的類來代替重複應用的一個屬性。這將在後面的面向對象css中進一步講解。其實對於重構來講這是很簡單的，我來解釋一下：

當你在你的樣式表裏發現一段代碼屢次使用的時候，你須要重構一下，最終變成只出現一次（可複用）。例子：

明白麼？你確定會納悶，這倆有啥區別啊？有兩點須要考慮： 性能跟可維護性。

 

關於性能： 更少的行數意味着瀏覽器解析css會更快。按照下面這樣寫，瀏覽器會同時給兩個選擇器應用顏色，而不會解析兩次。

 

關於可維護性，若是你須要修改相似的顏色，這樣只須要修改一行，這裏可能僅僅是兩行，若是50行，100行呢。

 

擴展閱讀

•  DRY CSS, don’t repeat yourCSS

•  DRY CSS: adon’t-repeat-yourselfmethodology for creating efficient, unified and scalable style sheets

 

4. 面向對象的css

這是什麼東東？

 

Oocss意思是面向對象的css，常常在其餘面向對象的語言中出現這個名詞。意思是利用一個「對象」，一般爲一個類的實例（包含一些屬性和方法）。你可能會問：這跟css有啥關係啊。

 

首先我要說明，oocss更像一個概念，css是不能真的「面向對象編程」的，由於沒有命名空間，函數，方法，類，條件語句等。所以你要是談oocss可能會被人嘲諷。

 

事實上我也是這麼認爲的，但咱們能夠利用這樣的思想來促進css的書寫，讓網站性能提高，提升可維護性。

 

咱們應該怎麼作？

很簡單，使用類名，各類類名。能夠把你的網站想象成一個帶有不少「方法」跟「組件」的地方，嘗試找出這些重複的部分，把他們做爲「對象」(類名)，從而重用。

 

爲了讓你的對象劃分的更精確，有兩點須要注意：

• 分離結構與表現

•  分離容器與內容

 

單獨的結構和樣式

分離結構與表現是很重要的，這樣你就能夠單獨操做負責顯示的部分，讓這部分在網站中屢次出現，而且做用於不一樣的元素上。看看下面的代碼，它能夠做用到一個盒子，一個圖片，或者一個按鈕上：

另外咱們能夠用一個叫作.skin的類名代替，而後應用到所要使用的元素上

這樣使用，會讓css樣式表更加容易讓人理解，更容易維護，解析更快。

 

單獨的容器（結構）和內容

我認爲這是oocss最重要的一點：每種組件擁有獨立的代碼，而不是在你某次寫頁面時配合頁面的特定部分來定義。在你的站點中，相似的組件應該重用，就像下面代碼同樣：

這時候無論是我從頁面底部再次使用h2，或者我用一樣的思想使用h3，均可以相似上面所寫的，建立一個類，並給類設置樣式，而不是給元素單獨設置樣式。

 

關於從不使用ID的一說？

當Nicole Sullivan提出oocss的概念時，最熱烈的討論是「絕對不使用id選擇器麼？」 Nicholas C. Zakas 與 Nicole Sullivan在他們的csslint(css質量檢查工具)中特別反對對id選擇器的使用。

 

爲了理解nicole的觀點，咱們必須認識到id選擇器由於高權重會在使用中出現一些問題。以下代碼（代碼來自於這裏）：

若是讓第一個twitter的連接變黑，你有兩種選擇：給一個id,或者利用！important選擇器來機槍打蚊子。若是header是一個類名，就不會有這種問題了。

 

這也是Nicole Sullivan爲何講「no ID」的緣由。

 

我引用 harry roberts對此話題的一個討論來做爲這節結束

[...] I havedecided that a blanket ban is sensible. Save yourself many potential headachesand never use IDs in your CSS files.

固然原則上id是可使用的，並且很易生效

 

我對OOCSS的理解

事實上我並不熟悉oocss。由於我並不在一個擁有不少前端的的大型網站工做。Oocss對大型網站架構頗有用，但不適合單頁面做戰。

 

然而雖然我並未應用oocss，但我關注前端工做中的組件重用，樣式表的可維護性以及性能。這也是oocss所注重的，因此在某些方面，個人工做跟oocss並無太大區別。

 

擴展閱讀

•  Anintroduction to OOCSS

•  Object Oriented CSS

•  OOCSS.org

•  Don’t use IDs in CSS selectors?

•  OOCSS——概念篇

•  OOCSS——核心篇

 

5. Css3：瞭解他能作的以及你可使用的部分

如今咱們打住概念性的討論，來點乾貨：css3，雖然這玩意至今沒有個確切的定義。

 

Unlike CSS 2,which is a large single specification defining various features, CSS 3 isdivided into several separate documents called 「modules」. Each module adds new capabilities or extends features defined inCSS 2, over preserving backward compatibility. [...] Due to the modularization,different modules have different stability and statuses.

---From CascadingStyle Sheets on Wikipedia

 

如今咱們來討論下那些已經被現代瀏覽器實現的一些特性。

 

當前，從圓角到漸變，從透明到陰影，僞類，隨處可見css3。

 

學習你能作些什麼？

我以爲，經過利用css3，你能夠減小http請求（圖片請求），減小標籤數量，減小js的代碼量。讓咱們展開來講：

• 圓角，一行代碼代替了用四張小圖片拼四個圓角；

• 透明度與alpha通道的支持： 一行代碼代替了一張半透明png；

• 更先進的選擇器：不須要js來寫了；

• Flexbox：幾行代碼代替了一整個佈局框架；

• 漸變：幾行代碼代替了背景平鋪的圖片；

• 多背景：不須要多個容器了；

• 僞類：裝飾性的元素不須要額外的標籤去定義了。

 

我能夠繼續講下去，可是我相信你已經明白了個人意思：知曉你到底能夠用css3來作什麼。你須要作一個目錄麼？你能夠用純css來實現，配合CSS counters，你須要作一個漂亮的自定義邊框麼？你能夠利用border-image屬性來實現。

 

css能作無數的事情，css3也同樣。你須要瞭解css力所能及跟力所不能及的。

但深刻這些，沒有什麼捷徑，只能經過不斷的閱讀文檔，自我探索。好比，你能夠用calc（）屬性來計算，但若是要搞六列的等高佈局，你確定會杯具。

 

學習你能用什麼？

css最大的問題是瀏覽器兼容性。在css3裏這種狀況變得更加糟糕。當你不斷試驗css3屬性時，這將是你縈繞不去的夢魘。

 

好比最耳熟能詳的css3屬性：border-radius，杯具的是ie8如下，跟opera mini瀏覽器仍然不認識這玩意。事實上chrome跟FF對圓角的渲染也不一致。

 

這對一名前端來講意味着啥呢？優雅降級。若是你作圓角，除了border-radius，你仍然須要利用多圖片來拼圓角，努力讓各大瀏覽器保持一致。

 

當我要使用css時這是我一般的思考步驟：

• 我要用這css幹嗎？

• 我明白我要幹嗎了，這是css2規範裏的麼？

• 必須的，結束。

• 不行，跳到第三步

• 這玩意兼容性怎麼樣啊

• 很好的兼容啊，結束

• 兼容性很通常，跳到第四步

• 這是錦上添花仍是需求啊？

• 這是錦上添花，那麼低端瀏覽器我就只能優雅降級了。

• 這是需求啊！跳到第五步

•  我怎麼在不兼容的瀏覽器裏對付這個需求呢？

 

如今以漸變爲例：

• 這裏要用漸變？

• 用吧。。css2裏有漸變？

• 漸變是css3的好吧。

• 兼容性呢？

• 還好吧，通常化，ie8如下跟operamini不支持css3漸變（這裏明顯有誤了

• 這是錦上添花仍是需求啊？

• 這只是一種更炫的手段，不是重點。不支持的我就用個單色代替吧。

• 需求要求這裏就是用漸變啊！我得找兼容了。

• 我要如何讓它不支持的瀏覽器上工做

• 用背景圖片吧。

 

若是你用css的時候思考這些步驟，就有思路來處理瀏覽器兼容性跟優雅降級之類的了。

 

注意！必定要注意你產品的用戶！若是你要作移動端app或者移動設備，你可使勁用css3屬性，不用擔憂。但若是你作個銀行系統。。抱歉了，大部分用戶都是ie8如下的

 

Providingfallbacks

根據不一樣狀況，對低端瀏覽器作兼容可能會很蛋疼，也可能會很煩人。

 

No fallback orsimple fallback

若是有些加強用戶體驗的特性不被支持，不會帶來什麼後果的話，你就不用強制兼容了，這太爽了。

 

也有一些狀況兼容起來也比較簡單。

 

總之你須要寫兩份屬性來實現這個效果，做用於老版本瀏覽器的跟現代瀏覽器版的。

以上的例子中，若是瀏覽器不識別rgba跟hsl顏色，他會讀第一行跟第三行做爲降級。那麼現代瀏覽器就會覆蓋這些屬性，以新屬性來渲染。

 

Modernizr

如今當咱們聊到css3的時候，絕對會說起一個庫Modernizr。 他能夠對瀏覽器作html5跟css3的特性檢測。聽起來可能以爲很龐大，但這個庫性能很是的好。

不管如何,有時你必須確切地知道若是瀏覽器支持一個特定的功能。由於,對咱們說,提供另外一種優雅降級版本，須要知道他的CSS屬性。

若是你要提供一個降級方案的話，須要依賴modernizr提供的兩個類（.no-opacity 跟.no-pointerevents）但不能同時觸發兩個。在使用新技術的時候，必定要記得優雅降級，這對用戶體驗很重要，若是不行，必定要告知用戶。

 

擴展閱讀

• CSS current work withtable of specifications

• WebPlatform.org

• Modernizr for feature detection

• CanIUse for the browser support

 

6. 漸進加強與優雅降級

這兩個概念你們確定耳熟能詳了，尤爲是優雅降級。其實二者仍是有點區別的。

 

漸進加強

漸進加強，你須要制定一個基本的需求和功能，而後根據瀏覽器支持度，加強用戶體驗。你在使用的時候，須要用一些html5屬性來提醒某些部分缺失（好比在某某瀏覽器下能夠得到最佳體驗）。這是一種根據瀏覽器引擎加強用戶體驗的方式。

 

優雅降級

當你談到優雅降級的時候，一般是給低端瀏覽器提供一個不支持特性的替代方案。他的形式一般是從高級到低級討論的。好比說你須要在canvas標籤裏面註明，這樣當瀏覽器不支持canvas的時候用戶就會知道了。

 

 

他們有何不一樣？

事實上沒啥區別。有些特性呈如今現代瀏覽器上，而對此在低端瀏覽器上則上替代方案。這是一個過程：你可讓網頁在現代瀏覽器中的效果很炫，也得顧忌ie，或者置之不理，這徹底取決於你。事實上我想說：不一樣瀏覽器的用戶體驗絕對是不一樣的，即便你須要提供一些基本功能，也請記得利用新特性加強一下你的瀏覽器或者應用，這是很是好的。

 

擴展閱讀

• Progressiveenhancement and graceful degradation

• Understandingprogressive enhancement

 

7. Css預處理工具

Css預處理器大概是本年度熱門話題了。。這玩意真的好用麼？用來幹嗎？我須要用麼？用什麼樣的？這是css圈子裏的熱門話題了。

 

在這個環節我將以客觀的態度來對待這個問題。首先要明確一點：若是你不想用預處理器，請不要用，而後就不會糾結了。不用預處理器並不表明你不是個好前端，僅僅是你可能沒法完成一些事情而已。但對待預處理器這件事上，你仍然須要有本身獨立的思考。

 

接下來，什麼是預處理器？事實上預處理器就是把一些語句段編譯成別的引擎（好比瀏覽器）須要的語言。各類語言都有預編譯，好比html可使用markdown或者jade。Less，sass跟stylus都是css的預處理器。Coffeescript是js的預處理器，固然還有php的預處理器：cakephp。

 

要點是什麼？

預處理器賦予了css一些基於面嚮對象語言的特性，好比

• 變量（variables）

• 可傳參的函數（functions (with parameters)）

• 命名空間（namespaces）

• 嵌套（nesting）

• 條件語句（conditional statements）

• 操做（operations）

• 其餘（and many more）

 

聽起來頗有吸引力,對吧?也許你想要一個例子來找出發生了什麼。讓咱們看下面的CSS導航欄。

看一個Scss處理的版本

 

預處理器的基本功能就是把這些表達式翻譯成css，結果確定是相同的，而處理邏輯不一樣。預處理器會自動處理並輸出結果，而不須要calc函數的支持。

 

最終，你獲得了一個可讀性更強的（包含嵌套與變量），可維護性更強的（包含變量與函數）的樣式表。上面的僅僅是舉個例子，在真實的項目裏你會體會到這一點。

 

如何選擇？

如今市面上已經有一些不一樣的css預處理器了，他們各有千秋，同時在細微之處也有區別。選擇的餘地徹底在你手裏。這裏提供幾個主要的選擇：

• Sass (written in Ruby)

• LESS (written in JavaScript)

• Stylus (written inJavaScript)

• Crush (written inPHP)

 

最好的方式是瞭解他們是否能最完美的知足你跟你項目的需求。這是由不少因素決定的，若是所有列出來就超出本文的範圍了，但你能夠找到一些相關的css預處理器的資料。

 

我對CSS預處理的理解？

我不敢說精通css預處理器，但我很是喜歡。他完善了一些css缺乏的很是有用的特性：變量，嵌套以及條件語句。

 

我以前小玩了一下less，受益不淺。利用less我完善了之前製做的 CSS LoadingAnimations，less應用在了循環，自動加前綴以及關鍵幀上。

 

我也嘗試了sass跟compass。令我震驚的是這玩意安裝很簡單，在ruby上跑得也很順暢。因此我以爲Sass + Compass碉堡了。你能夠看看個人文章：爲啥我拋棄了less選擇了sass。

 

不過我仍是須要徹底手寫普通的css，這也佔據了我工做的絕大部分。但最終我以爲你們都會用css預處理器。Css缺少一些頗有用的特性，而預處理器正好填補了這方面的空白。

 

擴展閱讀

• Sass vs. LESSvs. Stylus

• Musing on preprocessing

• Deep DiveInto CSS Preprocessors

• Guidelinesusing OOCSS and CSS preprocessors

 

8. 與時俱進

語言在不斷的進化，css是顯著典型。Css草案沒完沒了，瀏覽器廠商也在不斷的實現這些。

 

所以，你須要與時俱進，始終對新技術保持跟進，雖然一時半會還用不上，但能夠了解chrome開發版本是否是支持了？chrome跟safari，ff，opera將來的版本會不會支持呢？你須要在css解決方案及css問題上，不斷的開拓本身的眼界。

 

擴展閱讀

• Cascading Style Sheets home page

• CanIUse.com for browser share and compatibility

• Mozilla Developer Network forexcellent documentation

• HTML5 Rocks for latest, cutting-edgetutorials and articles

 

9. 取長補短

讀源碼是學編程最好的方式之一。css是客戶端的，你能夠用WebKit Inspector, Dragonfly, Firebug F12等工具看css。同時，互聯網是很開放的，你們都樂於開源。

 

另一種方法是跟着教程一步步地走，而後從頭本身寫一遍。遇到問題後瞄一眼答案，而後繼續。

 

若是你以爲本身已經熟悉css了，想深刻css，你須要寫一些demo來測試那些試驗性的css屬性，或者解決一個問題的不一樣思路。學無止境。

 

前陣子Chris Coyier, TimSabat 和 Alex Vazquez三位創建了CodePen，他是一個在線分享前端代碼的平臺，能夠自由的添加你須要的庫，好比jQuery, jQuery UI, MooTools, YUI, Prototype, Zepto, Dojo, Ext JS,PrefixFree等等。同時也可使用一些預處理器好比HAML, Markdown, Slim, LESS, SCSS, Sass, CoffeeScript。

 

學習其餘人例子的網站：

• CodePen

• CSS Deck

• Dabblet

• TheCodePlayer

• CSS3 案例

 

10. 熟能生巧

實踐出真知。因此最好的建議：不斷的練習。熟能生巧。並非讓你不停的從頭建站。你能夠從dribbble上找些圖用純css實現一下。最終你可能不必定會用到，但你學到了，這就足夠了。

 

我以前也說了，掌握基礎，瞭解技巧。Css有不少坑，填坑是csser平常工做的一部分。而坑都是寫代碼的時候踩出來的，只有踩過了，解決過了，才能提升。

 

同時我建議你多多分享本身的代碼，讓你們提提意見，取百家之長方爲上。你能夠扔到JSFiddle裏而後分享到羣裏，問問你們有沒有能夠吐槽的。