想成為一名css專家，僅僅熟練使用CSS選擇符（selectors）是遠(yuǎn)遠(yuǎn)不夠的。還在于對(duì)工作的整體規(guī)劃，工作流程的掌握以及提高樣式表的可維護(hù)性和效率。在這篇文章里Jina Bolton從12個(gè)頂尖設(shè)計(jì)師那里精選出了10種css應(yīng)用技巧推薦給大家。
最近，我一直在研究如何創(chuàng)建更具吸引力的樣式表的方法。用css可以創(chuàng)建出我們想要的美妙絕倫的網(wǎng)站，而寫css本身就是一種享受。
如何創(chuàng)建更具吸引力的樣式表？你的樣式表應(yīng)該具有哪些特性？
幾個(gè)月前，我有幸出席了在美國(guó)俄勒岡州波蘭特舉辦的2007年
網(wǎng)頁(yè)視覺大會(huì)。為了這次盛會(huì)，我研究了12位在網(wǎng)頁(yè)設(shè)計(jì)開發(fā)方面做出杰出貢獻(xiàn)的設(shè)計(jì)師。這次研究的結(jié)果，結(jié)合我自己工作經(jīng)驗(yàn)幫助我總結(jié)出一套制作精美樣式表的好方法。
01.不要讓css有過(guò)多的標(biāo)記
鏈接或者導(dǎo)入樣式表聽起來(lái)好像是一種無(wú)頭緒的工作。但是我想要強(qiáng)調(diào)為什么這個(gè)那么重要。我看過(guò)很多的網(wǎng)站開發(fā)都有著整潔的、組織嚴(yán)密的css文檔，但是慢慢的，由于可能達(dá)不到在短期內(nèi)快速更新，或者直接懶得再去管理，這使得先前創(chuàng)建的精致的樣式表變成了垃圾。
想象一下，你工作在需要發(fā)布上百條內(nèi)容的龐大網(wǎng)站上面。因?yàn)闀r(shí)間有限，所以你需要通過(guò)嵌套或者排列css來(lái)進(jìn)行快速修改或更新。一年一年的過(guò)去了，這種習(xí)慣維持著，直到一天你被告知這個(gè)網(wǎng)站要完全推翻重新設(shè)計(jì)（但是內(nèi)容還是一樣）而且你只有一周的時(shí)間去創(chuàng)建（包括測(cè)試）。
通常，更新樣式表還算是一個(gè)非常簡(jiǎn)單的方法。除非你長(zhǎng)時(shí)間對(duì)網(wǎng)站零散的區(qū)域做修改。你就不能對(duì)網(wǎng)站樣式表結(jié)構(gòu)有一個(gè)整體的把握。所以現(xiàn)在你有兩個(gè)辦法a把所有的內(nèi)容進(jìn)行整理，然后再一個(gè)月內(nèi)重新設(shè)計(jì)（祝你好運(yùn)）b 去找一份新工作。
不要讓你的工作變成這個(gè)樣子。鏈接或者導(dǎo)入你的樣式表不是那樣隨意的事情。創(chuàng)建干凈整潔的樣式表，并保持下去，你的工作就會(huì)更開心。
注意：不要在你的樣式表里加入太多標(biāo)記。如果你試圖在每次更新或者添加新內(nèi)容的時(shí)候創(chuàng)建新的樣式表，那你肯定是自找麻煩。過(guò)多的鏈接和導(dǎo)入樣式表會(huì)使消除bug工作變得異常困難，讓你的樣式表很難維持。大一點(diǎn)的網(wǎng)站分別建立不同部分的樣式表這是可以理解的。就是小心不要太走極端。
比較值得一提的是添加很多的樣式表，會(huì)增加更多的http請(qǐng)求，可能還會(huì)影響到后面的工作。此外，微軟ie6瀏覽器對(duì)32連接式樣表還有一定的限制。.
02.語(yǔ)義不僅僅只是個(gè)行業(yè)詞 要知道我不得不把它提上來(lái)說(shuō)，語(yǔ)義會(huì)成為你的好朋友，除了選擇最合適的，最有意義的元素來(lái)表述你的內(nèi)容外，還要確定你選擇class 和id屬性值。在本職工作外，還會(huì)讓你的生活變得簡(jiǎn)單（這也會(huì)讓你工作團(tuán)隊(duì)里伙伴的生活變得簡(jiǎn)單----如果你在一個(gè)團(tuán)隊(duì)中工作的話）�？纯聪旅娴亩x：
.l13k { color: #369; }
如果你剛來(lái)參加工作，你看到在這個(gè)css文件里，你會(huì)立刻找到這個(gè)class嗎？估計(jì)不太可能，因?yàn)檫@個(gè)類的名稱可能是一種縮寫，所以這里沒有一個(gè)準(zhǔn)確的方法能夠讓你立即說(shuō)出來(lái)�；蛘呖赡苁悄惆阉旁谀抢�，今天你知道它的意思，但是你能保證過(guò)了很多年后還知道它的意思嗎？
現(xiàn)在，讓我們來(lái)看看這個(gè)定義：
.left-blue { color: #369; }
你可能立即很明確的知道這個(gè)class選擇符的用途就像你知道左邊欄藍(lán)色的模塊在那里一樣，所以這就表明它起作用了。我前面提到，可能你在一星期的時(shí)間需要重新設(shè)計(jì)。在重新設(shè)計(jì)的時(shí)候，這個(gè)模塊被放置到了右邊，而且還是紅顏色。這個(gè)類就不再有存在的價(jià)值了。所以現(xiàn)在不得不選擇，要么改變所有的屬性值，要么放著它不動(dòng)。（這可能導(dǎo)致更多的混亂。）
最好不要在你的類屬性里面去加入顏色或者長(zhǎng)寬的尺寸。你應(yīng)該避免任何的屬性值都是直接的詞匯。（比如box）直接屬性可以會(huì)導(dǎo)致內(nèi)容的分離。
最后，讓我們來(lái)看看更恰當(dāng)?shù)拿?guī)范：
.product-description { color: #369; }
這里你可以看到。用這種樣式定義的product-description（產(chǎn)品描述），不管你怎么改變，都很清晰。
03.加注釋的好處 如果你的注釋組織良好，且在css的控制范圍，清楚的標(biāo)注每節(jié)(section)。最好確保注釋視覺突出，以便在內(nèi)容滾動(dòng)、一目十行時(shí)快速定位，那么注釋你的css文檔對(duì)你或者其他人在以后的開發(fā)中都會(huì)有很大的幫助。大部分基礎(chǔ)的注釋會(huì)提示為什么這個(gè)規(guī)則會(huì)用在這里。
提示和注意 添加注釋可以幫助你或者以后的開發(fā)者避免出現(xiàn)不必要的混亂。保持這種習(xí)慣�？捶独�
/* Turn off borders for linked images */
img { border: 0; }
時(shí)間和署名 一些設(shè)計(jì)師和開發(fā)人員喜歡在css文檔最近更新中標(biāo)明日子和時(shí)間，還有他們的名字和初始狀態(tài)。這些信息可以提供給你誰(shuí)參與了這些，也提示了最近的文檔是怎樣的。
/* Sushimonster Typography Styles
Updated: Thu 10.18.07 @ 5:15 p.m.
Author: Jina Bolton
----------------------------------------------------*/
這是個(gè)很好的主意特別是當(dāng)你工作在一個(gè)團(tuán)隊(duì)中，請(qǐng)記住，有些團(tuán)隊(duì)需要省去這種信息（一些公司寧愿在文檔里不出現(xiàn)這些名字和日期。）所以，最好就是看一下是不是需要這種信息。
組織分類
用注釋簡(jiǎn)單說(shuō)明css里的各個(gè)部分是個(gè)不錯(cuò)的主意。例如，如果所有的標(biāo)題類型都放在一起了，你就需要注視來(lái)區(qū)分他們。
/* HEADER
----------------------------------------------------*/
我會(huì)稍后在討論“區(qū)分不同類型”的時(shí)候詳細(xì)地說(shuō)明這個(gè)。
注釋加標(biāo) 如果你的css文檔在組織零散樣式的時(shí)候跟我上面說(shuō)的一樣，注釋加標(biāo)可以幫助你在你想要找到那部分文件的時(shí)候變得更簡(jiǎn)單。你可以用特征符號(hào)、關(guān)鍵詞然后找到最終結(jié)果。
/* =HEADER
----------------------------------------------------*/
這在又長(zhǎng)又復(fù)雜的樣式表中很有幫助。你可以在
Stop Design里讀到這個(gè)。.
參考 如果大家在制作樣式表的習(xí)慣上有所不同，用注釋作為參考向?qū)н�是很有用的。這個(gè)你在
Steve Smith’s的css文件中，看到的就是包含一個(gè)規(guī)定色彩的參考標(biāo)準(zhǔn)。
/* COLORS
Body Background: #2F2C22
Main Text: #B3A576
Links: #9C6D25
Dark Brown Border: #222019
Green Headline: #958944
*/
你可以把這個(gè)參考放在你css文檔的最上面去幫助你記住什么顏色在你網(wǎng)站中用過(guò)。另外在這里你可以定義不同的部分，馬上找到他們（也可以用注釋加標(biāo)）這就是那個(gè)例子
/* GENERIC
HEADER
SIDEBAR
FORMS
TABLES
FOOTER
*/
/* =GENERIC
----------------------------------------------------*/
04.知道什么時(shí)候添加有條件的注釋和運(yùn)用技巧。
很多文章寫過(guò)一些關(guān)于問(wèn)題解決的技巧，有條件的注釋是控制ie發(fā)布的一個(gè)好方法。然后文章又說(shuō)了其他的一些方面。我同意有條件的注釋比在你的css文檔里亂丟垃圾要好得多，但是最近我開始慢慢意識(shí)到，很多證據(jù)表明，這并不是最好的解決辦法。
想象一下。你想在一個(gè)元素中設(shè)置它的最低高度，但是ie6瀏覽器卻不執(zhí)行它，所以你知道你能夠使用的高度，也同樣會(huì)被同樣的處理。重新建一個(gè)樣式表，然后把有條件的注釋加入到你的標(biāo)識(shí)中，你所有的需要都是要遵循這個(gè)規(guī)定？保持最低的高度和高度的規(guī)則在一起，選擇一個(gè)小技巧在同樣的css文檔里，這樣會(huì)更好嗎？在這種情況下，我覺得用這種方法很難奏效。
另外一件需要考慮的事情就是：如果你風(fēng)格的定位是多樣的，過(guò)多的css文檔和有條件的注釋會(huì)讓你的調(diào)試過(guò)程異常痛苦。所以，你需要改變一些事情（可能是上述表述中最低高度的值），你不得不打開不止一個(gè)文檔來(lái)做這個(gè)修改。在很多情況下，這對(duì)你來(lái)說(shuō)可能不是件大事，但是想象，如果你定義了一些事情，在你主要的css文檔中，然后還要重新定義三個(gè)不同的ie樣式表。
如果你確定要用有條件的注釋，我推薦把注釋留一份在你主要的樣式表里，讓你或者下一位開發(fā)者知道這是ie特別規(guī)則的存在。這種方法就是當(dāng)你不得不編輯一個(gè)高度或者別的東西的時(shí)候。你知道又會(huì)有不止一個(gè)文檔開著。
如果你確定要使用技巧，記得更新瀏覽器能夠改變接下來(lái)的工作，這次技巧的使用對(duì)于后面的版本控制也起不到作用。
05.組織選擇及聲明
要一直一直的保持你的css有規(guī)則，有組織性。最好把你的選擇符進(jìn)行歸類。
• reset styles
• typography styles
• layout styles (header, content, footer, etc.)
• module or widget styles
• etc.
然后，在每一個(gè)組里面，通過(guò)dom層組織選擇符。
• any parent styles (containing elements, working outside-in)
• block-level element styles (paragraphs, lists, etc.)
• inline element styles (links, abbreviations, etc.)
• etc.
其次在這里面，根據(jù)元素的類型工作：
• paragraphs
• blockquotes
• addresses
• lists
• forms
• tables
• etc.
最后，把css的聲明也按上述進(jìn)行歸類。
• positioning (with coordinates) styles
• float/clear styles
• display/visibility styles
• spacing (margin, padding, border) styles
• dimensions (width, height) styles
• typography-related (line-height, color, etc.) styles
• miscellaneous (list-style, cursors, etc.) styles
有些人喜歡按照字母順序來(lái)組織。這對(duì)我沒有任何用處，但是可能會(huì)對(duì)你有幫助。不管你選擇什么樣的方法，一定要堅(jiān)持下去。
06.創(chuàng)建一個(gè)架構(gòu)。
當(dāng)你開始創(chuàng)建css樣式表的時(shí)候，如果你發(fā)現(xiàn)你總是不斷重復(fù)做同一件事情，那就考慮建一個(gè)庫(kù)或者框架結(jié)構(gòu)吧。一個(gè)框架就像是網(wǎng)站骨架一樣，而且這回節(jié)省你建立網(wǎng)站的時(shí)間。你可能會(huì)在你的框架中發(fā)現(xiàn)以下比較典型的樣式表：
• screen.css - A screen CSS file can either have all your styles you want to be used for on screen, and/or can import additional styles, such as the following:
o reset.css - A reset CSS file can be used to “reset” all the default browser styling, which can help make it easier to achieve cross-browser compatibility.
o typography.css - A typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color.
o grid.css - A grid CSS file can have your layout structure (and act as the wireframe of your site, by defining the basic header, footer, and column set up).
• print.css - A print CSS file would include your styles you want to be used when the page is printed.
構(gòu)建框架其中一個(gè)范例就是，由0olav bjørkøy整理的框架藍(lán)圖（另外作者還包括杰夫豆和埃里克邁耶）。另外一個(gè)很流行的框架就是
雅虎的用戶界面庫(kù)。很多開發(fā)者都感到這個(gè)預(yù)建立的框架包含臃腫的標(biāo)記和css，而且也包含著直接的類名稱。
注意：當(dāng)我還在起草這篇文章的時(shí)候，Jeff Croft已經(jīng)發(fā)布了
怎能不愛上css框架的書。在書的注釋中他提到的，別人告訴他我強(qiáng)烈反對(duì)框架的存在，我不確定這種評(píng)論從哪里來(lái)的，但是我要聲明，事實(shí)根本不是那樣子，相反我非常喜歡框架。為取得最佳效果，我還是建議你創(chuàng)建自己的框架結(jié)構(gòu)，它能更好的為您或您的工作服務(wù)。
07.確保樣式表的可讀性和優(yōu)化性之間的平衡。 風(fēng)格格式化因人而異。有的開發(fā)者首先創(chuàng)建能夠具有可讀性的樣式表風(fēng)格，然后在文檔還沒有完全建好的同時(shí)就進(jìn)行優(yōu)化（去除評(píng)論，位，標(biāo)簽，運(yùn)輸效益等）。這是我想要推薦的一個(gè)好技術(shù)。然而，如果你不知道在什么情況下去做這些事，就嘗試去找一種可以平衡樣式表可讀性跟優(yōu)化性的一種風(fēng)格。Steve Smith在這里有一個(gè)很好的建議就可以提供這個(gè)技術(shù)。
此外，考慮到用連字符來(lái)代替下劃線。Microformats用連字符作為分隔標(biāo)準(zhǔn)，某些舊的瀏覽器不兼容這種連字符。你可以在
Underscores in class and ID Names.讀到更多關(guān)于這方面的知識(shí)。
08.掌握你的文本編輯器。 就像藝術(shù)家熟知他們的專業(yè)工具一樣，對(duì)于一個(gè)設(shè)計(jì)者或者開發(fā)者去熟悉他們需要的工具也同樣重要。對(duì)于css，你再用的時(shí)候，你就是個(gè)編輯者。
這有很多文字編輯器可供挑選：TextMate, Coda, BB Edit, TextPad, DreamWeaver,我在這里不是要告訴你要采用哪一種；他們各有利弊，一個(gè)好的編輯者會(huì)選擇適合自己的。然而，一旦你決定使用一種文字編輯器，就要去學(xué)習(xí)關(guān)于這個(gè)編輯器的所有知識(shí)。找到捷徑，然后學(xué)習(xí)所有的你能學(xué)到的技巧和竅門。
掌握好編輯器能夠快速提高你創(chuàng)建樣式表的時(shí)間，幫助你更有效的完成工作。
09.使用版本控制
順暢的可維護(hù)性也是創(chuàng)建精美樣式表很重要的一部分。這就是為什么版本控制也會(huì)成為你的左臂右膀。這不僅對(duì)團(tuán)隊(duì)很有幫助，而且也是單獨(dú)設(shè)計(jì)師或者開發(fā)者的救生員。
有些應(yīng)用軟件是內(nèi)置軟件，所以在資源方面就被控制了。DreamWeaver用的是一種check-in/check-out同步進(jìn)行的系統(tǒng)（這可以幫助一個(gè)開發(fā)者在確定已經(jīng)正確編輯中沒有編輯一個(gè)文檔）。這雖然很便利，但是在某些地方是被限制的。
Subversion (SVN) or Concurrent Versions System (CVS)是一個(gè)不錯(cuò)的工具，他用來(lái)管理包括添加選擇權(quán)，回復(fù)，察看修改（這對(duì)團(tuán)隊(duì)很有幫助---你可以查到誰(shuí)添加，編輯，或修改了密碼，什么時(shí)間做的）和解決沖突。Jonathan Snook寫了一片很好的文章叫“
Hosted Subversion”，你可以通過(guò)閱讀這篇文章得到更多關(guān)于如何更快更簡(jiǎn)單的創(chuàng)建樣式表的信息。
10. 創(chuàng)造和保持一種風(fēng)格規(guī)范.
在一些情況下，一種風(fēng)格規(guī)范是一個(gè)作者關(guān)于語(yǔ)法規(guī)則和寫作的標(biāo)準(zhǔn)。他也可以用來(lái)作為設(shè)計(jì)，發(fā)展和內(nèi)容的大綱標(biāo)準(zhǔn)。一種風(fēng)格規(guī)范是一本可以很好地闡明排版，表格，色彩，圖片大小等的參考手冊(cè)。
當(dāng)你創(chuàng)建了一種風(fēng)格規(guī)范，它會(huì)在標(biāo)記和css上起到有效的作用。這種參考可以作為手冊(cè)用在發(fā)展團(tuán)隊(duì)和將來(lái)的開發(fā)人員。它可以包括界定的布局，其中你可以列出不同的版面設(shè)計(jì)，并提供相關(guān)的標(biāo)記和風(fēng)格。
最后，你也為其他的開發(fā)者留下了規(guī)范的步驟（比如如核對(duì)驗(yàn)證和無(wú)障礙環(huán)境），來(lái)確保更高的質(zhì)量。
結(jié)論
作為一個(gè)css大師，擁有先進(jìn)的css技巧還是遠(yuǎn)遠(yuǎn)不夠的。（即：充分認(rèn)識(shí)層疊，箱模式，瀏覽器如何工作）。我鼓勵(lì)你去思考一些你能夠不斷的持續(xù)不變的提高可維護(hù)性和功效的方法。想想超越怎樣設(shè)計(jì)文本，甚至這就是你一直需要提高的。要是你的樣式表即美觀又智能，掌握規(guī)整完美的工作流程是必不可少。
域名注冊(cè)知識(shí)
虛擬主機(jī)知識(shí)
網(wǎng)站建設(shè)知識(shí)
網(wǎng)絡(luò)推廣知識(shí)
網(wǎng)絡(luò)營(yíng)銷知識(shí)
常見技術(shù)問(wèn)題
QQ空間
新浪微博
開心網(wǎng)
人人網(wǎng)
