頂尖的CSS設(shè)計(jì)的原則
CSS可以為設(shè)計(jì)者的一個(gè)非常強(qiáng)大的標(biāo)記語言。
然而，CSS是生產(chǎn)一樣是由設(shè)計(jì)師創(chuàng)建的代碼的原則。
雖然你可能會認(rèn)為，任何人都可以寫出的CSS，有寫CSS和生產(chǎn)一流的CSS的一大區(qū)別。
確保你在正確的軌道上，這里有八個(gè)CSS的原則，每一個(gè)網(wǎng)頁設(shè)計(jì)師應(yīng)該如下。

1。花時(shí)間去驗(yàn)證
如果你打算花時(shí)間在css編碼，所以花時(shí)間驗(yàn)證代碼 你創(chuàng)建的。 然而，讓我吃驚的是，許多設(shè)計(jì)師跳過這個(gè)重要的步驟。驗(yàn)證你的代碼讓你清理任何問題并確保它會為你的訪問者的工作。
除了驗(yàn)證你的CSS文件，你也應(yīng)該驗(yàn)證您的HTML或XHTML文件。 之前驗(yàn)證這些文件，確保你有時(shí)間適當(dāng)?shù)腍TML或XHTML文檔類型聲明。聲明DOCTYPE可能看起來像一個(gè)平凡的細(xì)節(jié)，但我不能指望我有挫折的設(shè)計(jì)師繼續(xù)設(shè)計(jì)有問題的討論很多，才發(fā)現(xiàn)，這是因?yàn)樗麄円呀?jīng)宣布過時(shí)的DOCTYPE（或根本沒有聲明DOCTYPE）。

2。文件（而不是在你的代碼）
無論你是工作在一個(gè)單獨(dú)的項(xiàng)目或一個(gè)團(tuán)隊(duì)的設(shè)計(jì)師，這是你創(chuàng)建的文件的工作重要。 你可以看到為什么這會在一個(gè)設(shè)計(jì)團(tuán)隊(duì)的背景是重要的，但你可能想知道為什么它會如果你工作在一個(gè)獨(dú)奏項(xiàng)目的事。 好，總有一個(gè)機(jī)會，你的獨(dú)奏項(xiàng)目最終將演變成一個(gè)集體項(xiàng)目，如果發(fā)生這種情況，它很容易有文件在手比試圖走回頭路，創(chuàng)造它。 然而，即使你的項(xiàng)目仍然是一一人表演，你可以在如何有用的文件當(dāng)你決定重新審視一個(gè)項(xiàng)目后，不是看它一年驚訝。
當(dāng)談到創(chuàng)建CSS代碼文檔，大多數(shù)設(shè)計(jì)師的自然沖動是直接加入到他們的代碼放置/*和*/之間。 喜歡這個(gè)名單的原則很多，有采用這種方法沒有什么技術(shù)上是不正確的。 然而，直接加入到你的CSS代碼注釋會增加文件的大小，從而增加加載時(shí)間，減緩了網(wǎng)站的整體性能。 如果你對寫作頂尖的CSS代碼的嚴(yán)重，你應(yīng)該記錄你的代碼，但在一個(gè)單獨(dú)的文件。
雖然我真的相信這是更有效地在一個(gè)單獨(dú)的文件，我知道有人不同意這種做法的文件很多。 如果你拒絕在一個(gè)單獨(dú)的文件，你可以做下一個(gè)最好的事情是使用CSS壓縮機(jī)（事實(shí)上，即使你選擇使用一個(gè)單獨(dú)的文件中的文件，你仍然可以通過使用CSS壓縮機(jī)的好處）。 可以使用這CSS壓縮機(jī)從CSS驅(qū)動的畫廊，或是谷歌搜索找到一個(gè)替代的CSS壓縮機(jī)。

3。拒絕黑客
雖然黑客已經(jīng)成為一種可以接受的許多CSS內(nèi)的社區(qū)，這并不意味著“CSS攻擊”的一個(gè)原則是，你應(yīng)該如下。 問題采用這種設(shè)計(jì)，這意味著你是有意尋找一個(gè)復(fù)雜問題的解決方案。 雖然你可能認(rèn)為一個(gè)或兩個(gè)黑客現(xiàn)在不會傷害任何人，進(jìn)入心態(tài)的“黑客通過“你遇到的任何問題都可能產(chǎn)生負(fù)面影響您的整體設(shè)計(jì)思路。
避免黑客是一塊，專家被分配一些時(shí)間的建議。 你可以去所有的方式到2003和看到保羅科赫（他是一個(gè)成功的開發(fā)者和作者）已經(jīng)有一段時(shí)間的CSS Hacks的啟示警告設(shè)計(jì)師：“復(fù)雜的怪物了，就在現(xiàn)代Web開發(fā)中心。如今，它并不表現(xiàn)為一個(gè)無限嵌套的表格，但作為一個(gè)無限復(fù)雜的CSS hack”。

4。不要濫用div
因?yàn)閐iv元素，提供一個(gè)高層次的靈活性，它可以很容易過度使用他們。 事實(shí)上，這個(gè)問題已經(jīng)變得如此普遍，CSS設(shè)計(jì)師社區(qū)已經(jīng)建立了自己的術(shù)語來標(biāo)記這個(gè)問題：divitus。 避免陷入這種狀況，之前自動使用一個(gè)div標(biāo)簽，你應(yīng)該問問自己，如果有一個(gè)實(shí)際的HTML標(biāo)簽，會把工作做的你。 例如，而不是創(chuàng)建多個(gè)header div，你為什么不使用HTML標(biāo)題標(biāo)簽已經(jīng)可用，如H1和H2？
一旦你開始考慮一下這個(gè)問題，你會很快看到的好處，使用適當(dāng)?shù)腍TML標(biāo)簽而不是自動創(chuàng)建一個(gè)新的部門 不僅可以減少代碼量，你必須創(chuàng)建（這將節(jié)省你的時(shí)間，同時(shí)減少你網(wǎng)站的加載時(shí)間），但它也會給你的代碼更合乎邏輯的結(jié)構(gòu)。

5。的想法放進(jìn)你的類的名稱
如果你問一個(gè)新的或沒有經(jīng)驗(yàn)的設(shè)計(jì)師，他們?nèi)绾螞Q定叫他們的課程，他們可能會說，這真的不重要。 雖然這在技術(shù)上是正確的，這是命名CSS類非常短視的觀點(diǎn)。 雖然有設(shè)計(jì)師落入誰不關(guān)心CSS類名的類，也有設(shè)計(jì)師認(rèn)為他們的類的名字，但他們卻采取了錯(cuò)誤的方法。
因?yàn)槲也幌胫皇谴蚰愕念^與理論的例子，讓我具體解釋一下。 假設(shè)你正在創(chuàng)建一個(gè)類來控制一個(gè)箱子在你的頁面上。 盒子將位于頁面底部，它將包含從讀者的意見和你會使用CSS來給它一個(gè)棕色的背景和控制填充。 而命名的。譚盒（這是許多好心的設(shè)計(jì)師會這么做），它的名字。評論框。 原因。評論框是一個(gè)更好的類名稱比。譚盒是因?yàn)槿绻銢Q定改變背景顏色為藍(lán)色的道路（或決定把箱子從頁面底部的一個(gè)不同的領(lǐng)域），它不會使你困惑或是查看網(wǎng)站的CSS其他設(shè)計(jì)師。

6。擁抱速記
而速記可以迷惑的設(shè)計(jì)師誰是剛剛開始自己寫的CSS代碼，一旦你習(xí)慣了風(fēng)格的簡寫，它成為一個(gè)最有效的辦法可以作為一個(gè)設(shè)計(jì)師。
有使用速記的多重效益。 一、降低你的文件的大小，這將減少你的網(wǎng)站的加載時(shí)間。 此外，它不僅使我們更容易組織你的代碼，但也使它更簡單，如果將來您需要對代碼進(jìn)行更改。 作為你開始適應(yīng)速記，你也應(yīng)該去寫你的代碼在一行的實(shí)踐（而不是傳播出去，聲明在多線）。
 

7。別忘了打印機(jī)
作為一個(gè)設(shè)計(jì)師，你更傾向于技術(shù)的非主流人群的任何人。 因?yàn)槟闶且粋€(gè)少數(shù)民族生活的一部分，呼吸技術(shù)，有很多你有大多數(shù)人從沒想過的習(xí)慣。 例如，你可能離開你的方式消除盡可能在你的生活中盡可能多的“文檔”。 然而，要記住，大部分的人口仍然打印出來的東西在定期的基礎(chǔ)上是很重要的。 當(dāng)你可能標(biāo)簽項(xiàng)del.icio.us時(shí)要保存?zhèn)洳椋胀ǖ幕ヂ?lián)網(wǎng)用戶將打印相同頁。
因?yàn)槿藗冞€打印出的信息來自互聯(lián)網(wǎng)，重要的是使用CSS來讓你的內(nèi)容打印。 游客會欣賞所有的工作你已經(jīng)把創(chuàng)造美麗的布局對于網(wǎng)站他們訪問，但當(dāng)他們決定要打印一頁的網(wǎng)站，他們會感謝你甚至當(dāng)他們意識到他們的打印輸出只包含文本，他們希望（并沒有驚人的圖形看起來偉大在他們的電腦但會浪費(fèi)大量的墨水從打印機(jī)）。 因?yàn)镃SS使得它很簡單，確保內(nèi)容正確格式化打印出來，沒有借口真正的設(shè)計(jì)師忽略了這一步的設(shè)計(jì)過程。

8。永遠(yuǎn)不要停止學(xué)習(xí)
你可能認(rèn)為這最后的原則聽起來是陳詞濫調(diào)，但它無疑是最重要的整個(gè)列表。 如果你致力于成為最好的設(shè)計(jì)師，你需要確保你一直致力于擴(kuò)大你的CSS知識。 幸運(yùn)的是，這是很容易做到，如果你有愿望將致力于繼續(xù)你的CSS的教育。 而繼續(xù)教育是一項(xiàng)艱巨的任務(wù)，個(gè)人在許多行業(yè)，非技術(shù)性的，因?yàn)榛ヂ?lián)網(wǎng)實(shí)際上是基礎(chǔ)的CSS，量的免費(fèi)資源，你可以學(xué)習(xí)真的是無止境的。 如果你認(rèn)為我夸大，只需鍵入“CSS”到谷歌，你會看到有483000000個(gè)結(jié)果供您瀏覽。

除了從網(wǎng)上資源學(xué)習(xí)（和打印資源如果你喜歡），你可以從其他的CSS設(shè)計(jì)師學(xué)習(xí)很多。 無論你分析自己的工作，聽聽他們給在網(wǎng)上或面對面的情況下跟他們的建議，你可以通過相互作用和潛在的合作與其他設(shè)計(jì)師誰是致力于在頂尖的CSS設(shè)計(jì)的原則和生產(chǎn)工作令人驚嘆的收獲很多的價(jià)值。

牧羊人設(shè)計(jì)文章推薦：

ps圖像處理軟件特點(diǎn)

界面原型設(shè)計(jì)實(shí)例技巧

網(wǎng)頁設(shè)計(jì)師如何克服障礙

紐約時(shí)報(bào)雜志網(wǎng)頁設(shè)計(jì)