首先讓我提醒你，css是極其簡單的一門語言，簡單到可以用三個詞概括：選擇器，屬性以及屬性的值。這也是一些人不喜歡css的原因：他們覺得寫css像孩子玩樂高玩具一樣簡單。

是這樣的。。如果你給一個9歲的孩子介紹css的基本原理，他就會搭建一個網站。不過這個網站不會很復雜，也就是一些包含頭部，鏈接，內容圖片的頁面而已。

事實上，css是一門簡單的語言，并不意味著每個人的水平一樣。有些人寫起css來就跟個大猩猩在玩棍子，有些人可以掌握css,而有些人可以使用魔法般的使用css。

不管怎樣，我還是要給你分享一些我這幾個月來理解的東西，這并不是一些代碼片段或者是css小技巧，而更像是一些通用的規(guī)則或者是最佳實踐之類的東西，如下：

不要讓你的代碼脫離你的掌控，盡量簡潔 掌握基礎，學習CSS技巧 保持代碼的可復用性 面向對象的css Css3 了解他能做的以及你可以使用的部分 漸進增強與優(yōu)雅降級 Css預處理工具 與時俱進 取長補短 熟能生巧

你想說什么呢？你準備好了？那我們繼續(xù)往下吧。 1.不要讓你的代碼脫離你的掌控，盡量簡潔

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

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

我怎樣實現？ 有其他方法實現么？ 怎樣優(yōu)化（簡潔，可維護，等等）？

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

如果你花了好幾個小時寫一個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中非常重要。更多相關信息可以閱讀Assigning property values, Cascading, and Inheritance一文。

CSS技巧

當你了解了以上原理，才算踏上了康莊大道。那么現在你可能會處理一些特殊情況，下面展示了一些：

忘了在父元素設置position

.child { position: absolute; top: 0; left: 0; }

/* 這是忘了的*/ /* .parent { position: relative; // Or anything else than static } */

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

添加下下層技巧

.parent { z-index: 1; opacity: 0.5; transform: rotate(5deg); }

.child { z-index: -1; }

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

忘了清除浮動的技巧

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

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

這種例子比比皆是，如果繼續(xù)寫那就沒完沒了了，這不是我這篇文章的目的。

我只是想指出 每天，人們都會不斷的發(fā)現，css有很多的特性跟特殊情況。 你可能這一次踩個坑，下次就知道怎么對付了。 3. 保持代碼的可復用性

Dry代表 不要重復自己。這并不是css特有的，這適合任何語言。

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

當你在你的樣式表里發(fā)現一段代碼多次使用的時候，你需要重構一下，最終變成只出現一次（可復用）。例子：

.navigation li { color: #333; }

.navigation li a { color: #333; }

/* Refactoring */

.navigation li, .navigation li a { color: #333; }

明白么？你肯定會納悶，這倆有啥區(qū)別啊？有兩點需要考慮： 性能跟可維護性。

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

關于可維護性，如果你需要修改類似的顏色，這樣只需要修改一行，這里可能僅僅是兩行，如果50行，100行呢。

擴展閱讀

DRY CSS, don’t repeat your CSS DRY CSS: a don’t-repeat-yourself methodology for creating efficient, unified and scalable style sheets

4. 面向對象的css

這是什么東東？

Oocss意思是面向對象的css，經常在其他面向對象的語言中出現這個名詞。意思是利用一個“對象”，通常為一個類的實例（包含一些屬性和方法）。你可能會問：這跟css有啥關系啊。

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

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

我們應該怎么做？

很簡單，使用類名，各種類名。可以把你的網站想象成一個帶有很多“方法”跟“組件”的地方，嘗試找出這些重復的部分，把他們作為“對象”(類名)，從而重用。

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

分離結構與表現 分離容器與內容

單獨的結構和樣式

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

#my-button, .my-box .my-box img { border: 1px solid #444; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.1); }

另外我們可以用一個叫做.skin的類名代替，然后應用到所要使用的元素上

.skin { border: 1px solid #444; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.1); }

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

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

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

#main h2 { color: #343434; font-size: 25px; line-height: 20px; border-bottom: 1px solid rgba(0,0,0,0.2); box-shadow: 0 1px rgba(255,255,255,0.4); }

這時候不管是我從頁面底部再次使用h2，或者我用同樣的思想使用h3，都可以類似上面所寫的，創(chuàng)建一個類，并給類設置樣式，而不是給元素單獨設置樣式。

關于從不使用ID的一說？

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

為了理解nicole的觀點，我們必須認識到id選擇器因為高權重會在使用中出現一些問題。如下代碼（代碼來自于這里）：

<!-- HTML --> <div id="header"> <p> <a href="#">Foo</a> <a href="#">Bar</a> </p> <div> <a href="#">Follow me on twitter</a> </div> </div> <div> <a href="#">Follow me on twitter</a> </div>

/* CSS */ #header a { color: #f90;? } .tweet???? a { color: #000; }

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

這也是Nicole Sullivan為什么講“no ID”的原因。

我引用 harry roberts對此話題的一個討論來作為這節(jié)結束

[...] I have decided that a blanket ban is sensible. Save yourself many potential headaches and never use IDs in your CSS files.

當然原則上id是可以使用的，而且很易生效

我對OOCSS的理解

事實上我并不熟悉oocss。因為我并不在一個擁有很多前端的的大型網站工作。Oocss對大型網站架構很有用，但不適合單頁面作戰(zhàn)。

然而雖然我并未應用oocss，但我關注前端工作中的組件重用，樣式表的可維護性以及性能。這也是oocss所注重的，所以在某些方面，我的工作跟oocss并沒有太大區(qū)別。

網站欄目：學習提高你CSS技術
本文來源：http://www.rwnh.cn/news7/315907.html

成都網站建設公司_創(chuàng)新互聯，為您提供移動網站建設、企業(yè)建站、自適應網站、、網站排名、外貿建站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯