這里向大家描述一下CSS使用的八大基本原則 ，比如簡(jiǎn)寫(xiě)的使用，使用多種簡(jiǎn)寫(xiě)方法，盡量減少了您的文件，同時(shí)也減小了網(wǎng)站的加載時(shí)間。此外，它不僅可以更容易地組織你的代碼，而且對(duì)于未來(lái)修改代碼提供了方便。

成為***CSS設(shè)計(jì)師的8大技巧

CSS是一個(gè)非常強(qiáng)大的網(wǎng)站設(shè)計(jì)標(biāo)記語(yǔ)言。雖然你可能會(huì)認(rèn)為，任何人都可以轉(zhuǎn)去寫(xiě)CSS代碼，但是為了確保您在正確的軌道上，這里有如下8項(xiàng)CSS原則，每個(gè)網(wǎng)頁(yè)設(shè)計(jì)師應(yīng)該遵循。

1、W3C驗(yàn)證

　　如果你是1個(gè)正在寫(xiě)CSS編碼的人員，那么建議您每次對(duì)您所創(chuàng)建的CSS代碼進(jìn)行驗(yàn)證。但是，有很多設(shè)計(jì)師卻在這個(gè)重要的一步跳過(guò)。驗(yàn)證您的代碼清理反饋的任何問(wèn)題，確保它的工作對(duì)訪問(wèn)者友好。除了驗(yàn)證你的CSS文件，你也應(yīng)該驗(yàn)證您的HTML或XHTML文件。驗(yàn)證這些文件之前，請(qǐng)確保您已經(jīng)聲明了正確的HTML或XHTML的doctype。聲明您的doctype似乎是一個(gè)簡(jiǎn)單的細(xì)節(jié)，但很多設(shè)計(jì)師經(jīng)過(guò)很多次驗(yàn)證不通過(guò)以后才發(fā)現(xiàn)原來(lái)是因?yàn)樗麤](méi)有聲明doctype。

2、文件

　　無(wú)論你的項(xiàng)目是一個(gè)人單干還是團(tuán)隊(duì)協(xié)作，很重要的是文件創(chuàng)建工作。如果您是在團(tuán)隊(duì)中單人項(xiàng)目，總有機(jī)會(huì)，你的單人項(xiàng)目將最終演變成一個(gè)團(tuán)隊(duì)項(xiàng)目，如果發(fā)生這種情況，手頭上有文件會(huì)變得很多，創(chuàng)建好文件歸類(lèi)與名稱(chēng)，寫(xiě)好注釋?zhuān)瑓f(xié)作更方便。即使在如果你是個(gè)人單干的項(xiàng)目，當(dāng)您在創(chuàng)意或使用上突然想用到某些文件，您卻不知道放在哪去了？當(dāng)您想找到某段代碼，卻發(fā)現(xiàn)因?yàn)闆](méi)有注釋變得非常難？

　　涉及到創(chuàng)建CSS代碼的注釋文件，大多數(shù)設(shè)計(jì)師的自然將它放入把它直接關(guān)系到他們的代碼/*和*/中。技術(shù)上來(lái)說(shuō)這種做法沒(méi)有什么不正確的。然而，注釋直接加入到您的CSS代碼會(huì)增加該文件大小，從而增加加載時(shí)間，減緩一個(gè)網(wǎng)站的整體性能的大小。如果你想成為***的CSS代碼編寫(xiě)員，你應(yīng)該將注釋寫(xiě)在一個(gè)單獨(dú)的文件里。

　　雖然我知道這做法很有效，但是還是有很多人不同意這種做法。如果你拒絕將注釋寫(xiě)在一個(gè)單獨(dú)的文件中，退而求其次，您可以使用CSS壓縮機(jī)（事實(shí)上，即使您將注釋寫(xiě)在一個(gè)單獨(dú)的文件中，你仍然可以使用這個(gè)CSS壓縮機(jī)）。當(dāng)然您也可以從谷歌搜索更好的CSS壓縮機(jī)。

3、對(duì)Hacks說(shuō)不

　　Hacks是為了讓CSS編碼在不同瀏覽器與平臺(tái)中維持網(wǎng)站正常顯示的做法。盡管在社會(huì)上Hacks已經(jīng)成為一個(gè)可以接受的做法，這并不意味著“CSShacking”是你應(yīng)該遵守的原則。這種設(shè)計(jì)方法的問(wèn)題是，它意味著你為了解決問(wèn)題而將標(biāo)準(zhǔn)的CSS變得更復(fù)雜。雖然你可能認(rèn)為一個(gè)或兩個(gè)Hacks不會(huì)傷害任何人，但是這種思維可以對(duì)您的整體設(shè)計(jì)思想產(chǎn)生負(fù)面影響。

4、不濫用的div

　　由于div的提供了高度的靈活性，很容易讓新人過(guò)度使用他們。為了避免過(guò)度使用DIV標(biāo)簽，你應(yīng)該在寫(xiě)HTML代碼的時(shí)候總是問(wèn)自己是否有一個(gè)實(shí)際的HTML標(biāo)記。例如，你為什么不使用HTML標(biāo)題標(biāo)記，例如H1和H2？

　　一旦你開(kāi)始考慮到了div的問(wèn)題，你很快就會(huì)使用適當(dāng)?shù)腍TML標(biāo)記，而不是自動(dòng)創(chuàng)建一個(gè)新DIV。它不僅可以減少代碼量，而且還會(huì)給你的代碼更合理的加載時(shí)間。

5、Class類(lèi)的命名

　　如果你問(wèn)一個(gè)新的設(shè)計(jì)師，他們決定如何命名Class，他們可能會(huì)說(shuō)，這并不重要。雖然從技術(shù)上來(lái)說(shuō)，CSS類(lèi)的命名沒(méi)有什么嚴(yán)格的要求，但我們必須糾正那些錯(cuò)誤的做法。

　　假設(shè)您要?jiǎng)?chuàng)建一個(gè)類(lèi)來(lái)控制網(wǎng)頁(yè)上的某部分。比如1個(gè)盒子將位于頁(yè)面底部，它包含讀者的評(píng)論和黑色的填充背景，很多設(shè)計(jì)師也許會(huì)隨便命名，或是叫“黑色底部”之類(lèi)的。那么，我們會(huì)建議命名為“評(píng)論”。因?yàn)槿绻坏珱Q定更改背景顏色為藍(lán)色或是不把他放在頁(yè)面底部，那么“黑色底部”這個(gè)名稱(chēng)就再不適用了。

6、使用簡(jiǎn)寫(xiě)

　　一旦你習(xí)慣簡(jiǎn)寫(xiě)方式，它也是您成為一個(gè)好的設(shè)計(jì)師最有效的做法之一。

　　使用多種簡(jiǎn)寫(xiě)方法，盡量減少了您的文件，同時(shí)也減小了網(wǎng)站的加載時(shí)間。此外，它不僅可以更容易地組織你的代碼，而且對(duì)于未來(lái)修改代碼提供了方便。

7、不要忘記打印機(jī)作為一個(gè)優(yōu)秀的設(shè)計(jì)師，你應(yīng)該更傾向于熱愛(ài)技術(shù)，因?yàn)槟闶巧贁?shù)的一部分，生活和呼吸在技術(shù)中。不過(guò)，由于人們?nèi)匀恍枰蛴〕鰜?lái)自互聯(lián)網(wǎng)的信息，那么您要考慮使CSS內(nèi)容對(duì)打印機(jī)友好。您的同行欣賞您所創(chuàng)建的網(wǎng)站，也許他們有興趣想了解您的布局，也許他們打算將您的CSS打印出來(lái)參考，所以作為好的設(shè)計(jì)師請(qǐng)不要忽視打印機(jī)。

8、永不停止學(xué)習(xí)

　　你可能認(rèn)為這***的原則聽(tīng)起來(lái)陳詞濫調(diào)，但也可說(shuō)是8條中最重要。如果你致力于成為***的設(shè)計(jì)師，您需要確保您一直致力于擴(kuò)大你的CSS知識(shí)。幸運(yùn)的是，如果你愿意，這很容易做到，并繼續(xù)你的CSS教育。只需鍵入“CSS”到谷歌，你會(huì)看到有48300.0萬(wàn)結(jié)果供您瀏覽。
　　除了來(lái)自網(wǎng)絡(luò)上的學(xué)習(xí)，你也可以和同事，朋友，書(shū)籍上學(xué)，直到您成為CSS專(zhuān)家，成為***的設(shè)計(jì)師。

【編輯推薦】

1. 實(shí)例解析CSS中display屬性使用
2. CSS樣式實(shí)現(xiàn)快速定位bug的六大技巧
3. CSS中l(wèi)ink和@import的區(qū)別
4. CSS2.0中page-break-after屬性用法
5. 技術(shù)分享 使用不同CSS樣式兼容多種瀏覽器