學(xué)習(xí)提高你CSS技術(shù)

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

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

事實(shí)上，css是一門簡(jiǎn)單的語(yǔ)言，并不意味著每個(gè)人的水平一樣。有些人寫起css來(lái)就跟個(gè)大猩猩在玩棍子，有些人可以掌握css,而有些人可以使用魔法般的使用css。

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

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

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

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

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

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

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

如果你花了好幾個(gè)小時(shí)寫一個(gè)css幻燈片，最終沒(méi)辦法用了個(gè)js幻燈片插件或者別的，這是很蛋疼的，并不是說(shuō)你沒(méi)成功，而是無(wú)謂的浪費(fèi)了很多時(shí)間。如果項(xiàng)目有deadline的話，你就要悲劇了。

保持他的簡(jiǎn)單性

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

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

列表元素浮動(dòng)； 改變列表元素display屬性為inline； 改變列表元素display屬性為inline-block。

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

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

CSS基礎(chǔ)

什么是css基礎(chǔ)呢？你可能會(huì)聽(tīng)到不同的聲音，這也是一種無(wú)法用言語(yǔ)表達(dá)的東西。但我認(rèn)為，css的基礎(chǔ)是以下兩部分：

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

CSS技巧

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

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

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

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

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

添加下下層技巧

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

.child { z-index: -1; }

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

忘了清除浮動(dòng)的技巧

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

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

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

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

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

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

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

.navigation li { color: #333; }

.navigation li a { color: #333; }

/* Refactoring */

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

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

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

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

擴(kuò)展閱讀

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(yǔ)言中出現(xiàn)這個(gè)名詞。意思是利用一個(gè)“對(duì)象”，通常為一個(gè)類的實(shí)例（包含一些屬性和方法）。你可能會(huì)問(wèn)：這跟css有啥關(guān)系啊。

首先我要說(shuō)明，oocss更像一個(gè)概念，css是不能真的“面向?qū)ο缶幊獭钡?，因?yàn)闆](méi)有命名空間，函數(shù)，方法，類，條件語(yǔ)句等。因此你要是談oocss可能會(huì)被人嘲諷。

事實(shí)上我也是這么認(rèn)為的，但我們可以利用這樣的思想來(lái)促進(jìn)css的書寫，讓網(wǎng)站性能提升，提高可維護(hù)性。

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

很簡(jiǎn)單，使用類名，各種類名?？梢园涯愕木W(wǎng)站想象成一個(gè)帶有很多“方法”跟“組件”的地方，嘗試找出這些重復(fù)的部分，把他們作為“對(duì)象”(類名)，從而重用。

為了讓你的對(duì)象劃分的更精確，有兩點(diǎn)需要注意：

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

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

分離結(jié)構(gòu)與表現(xiàn)是很重要的，這樣你就可以單獨(dú)操作負(fù)責(zé)顯示的部分，讓這部分在網(wǎng)站中多次出現(xiàn)，并且作用于不同的元素上?？纯聪旅娴拇a，它可以作用到一個(gè)盒子，一個(gè)圖片，或者一個(gè)按鈕上：

#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); }

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

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

這樣使用，會(huì)讓css樣式表更加容易讓人理解，更容易維護(hù)，解析更快。

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

我認(rèn)為這是oocss最重要的一點(diǎn)：每種組件擁有獨(dú)立的代碼，而不是在你某次寫頁(yè)面時(shí)配合頁(yè)面的特定部分來(lái)定義。在你的站點(diǎn)中，類似的組件應(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); }

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

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

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

為了理解nicole的觀點(diǎn)，我們必須認(rèn)識(shí)到id選擇器因?yàn)楦邫?quán)重會(huì)在使用中出現(xiàn)一些問(wèn)題。如下代碼（代碼來(lái)自于這里）：

<!-- 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; }

如果讓第一個(gè)twitter的鏈接變黑，你有兩種選擇：給一個(gè)id,或者利用！important選擇器來(lái)機(jī)槍打蚊子。如果header是一個(gè)類名，就不會(huì)有這種問(wèn)題了。

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

我引用 harry roberts對(duì)此話題的一個(gè)討論來(lái)作為這節(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是可以使用的，而且很易生效

我對(duì)OOCSS的理解

事實(shí)上我并不熟悉oocss。因?yàn)槲也⒉辉谝粋€(gè)擁有很多前端的的大型網(wǎng)站工作。Oocss對(duì)大型網(wǎng)站架構(gòu)很有用，但不適合單頁(yè)面作戰(zhàn)。

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

網(wǎng)站欄目：學(xué)習(xí)提高你CSS技術(shù)
本文來(lái)源：http://www.muchs.cn/news7/315907.html

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

廣告

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