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

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

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

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

不要讓你的代碼脫離你的掌控，盡量簡潔 掌握基礎(chǔ)，學(xué)習(xí)CSS技巧 保持代碼的可復(fù)用性 面向?qū)ο蟮腸ss Css3 了解他能做的以及你可以使用的部分 漸進增強與優(yōu)雅降級 Css預(yù)處理工具 與時俱進 取長補短 熟能生巧

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

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

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

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

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

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

保持他的簡單性

Css很簡單，但如果你想，同樣可以變得很復(fù)雜。在很多場景里，最簡單的即是最好的。當(dāng)你要實現(xiàn)什么效果的時候，問問自己：還有更簡單的方法實現(xiàn)么？ 答案經(jīng)常是肯定的。

舉個例子，簡單水平導(dǎo)航欄，你可以有多種方法實現(xiàn)：

列表元素浮動； 改變列表元素display屬性為inline； 改變列表元素display屬性為inline-block。

最簡單的-設(shè)置display:inline，不需要清除浮動，不需要清除inline-block造成的空白，只需要一些padding即可，結(jié)束。 2. 掌握基礎(chǔ)，學(xué)習(xí)CSS技巧

不僅是掌握css,掌握任何東西都要從基礎(chǔ)做起。一個對最基本的東西都理解不透徹的人是不可能成為大師的。

CSS基礎(chǔ)

什么是css基礎(chǔ)呢？你可能會聽到不同的聲音，這也是一種無法用言語表達的東西。但我認為，css的基礎(chǔ)是以下兩部分：

盒模型：每個元素在css中都是一個盒子模型(塊級或者內(nèi)聯(lián))，包含寬高及各種padding margin border.這是最重要的,詳細可以閱讀這里。 權(quán)重:了解哪個屬性權(quán)重最高，在調(diào)試css中非常重要。更多相關(guān)信息可以閱讀Assigning property values, Cascading, and Inheritance一文。

CSS技巧

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

忘了在父元素設(shè)置position

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

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

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

添加下下層技巧

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

.child { z-index: -1; }

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

忘了清除浮動的技巧

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

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

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

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

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

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

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

.navigation li { color: #333; }

.navigation li a { color: #333; }

/* Refactoring */

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

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

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

關(guān)于可維護性，如果你需要修改類似的顏色，這樣只需要修改一行，這里可能僅僅是兩行，如果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. 面向?qū)ο蟮腸ss

這是什么東東？

Oocss意思是面向?qū)ο蟮腸ss，經(jīng)常在其他面向?qū)ο蟮恼Z言中出現(xiàn)這個名詞。意思是利用一個“對象”，通常為一個類的實例（包含一些屬性和方法）。你可能會問：這跟css有啥關(guān)系啊。

首先我要說明，oocss更像一個概念，css是不能真的“面向?qū)ο缶幊獭钡模驗闆]有命名空間，函數(shù)，方法，類，條件語句等。因此你要是談oocss可能會被人嘲諷。

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

我們應(yīng)該怎么做？

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

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

分離結(jié)構(gòu)與表現(xiàn) 分離容器與內(nèi)容

單獨的結(jié)構(gòu)和樣式

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

#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的類名代替，然后應(yīng)用到所要使用的元素上

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

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

單獨的容器（結(jié)構(gòu)）和內(nèi)容

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

#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)建一個類，并給類設(shè)置樣式，而不是給元素單獨設(shè)置樣式。

關(guān)于從不使用ID的一說？

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

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

<!-- 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é)結(jié)束

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

當(dāng)然原則上id是可以使用的，而且很易生效

我對OOCSS的理解

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

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

網(wǎng)站欄目：學(xué)習(xí)提高你CSS技術(shù)
本文來源：http://m.newbst.com/news7/315907.html

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

廣告

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