原文名稱:Creating Sexy Stylesheets
原文地址:http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets

作為一個CSS方面的專家,所做的不只是記住選擇符(Selectors)那么簡單,提升樣式表的效用和可維護(hù)性,以及設(shè)計(jì)藍(lán)圖和治理工作流程都是工作的一部分.在本篇文章中,Jina Bolton給出了10個CSS技巧提示,這些內(nèi)容是由對12位頂尖的設(shè)計(jì)者的調(diào)查提煉而來.

接下來,我將重點(diǎn)放在創(chuàng)建性感的樣式表方法的討論之上.一旦CSS被用來創(chuàng)建具有魅力的網(wǎng)站,CSS的書寫事實(shí)上就已經(jīng)成為了藝術(shù).使用何種方法創(chuàng)建,架構(gòu)以及治理CSS成為了一件美妙的事情.

那么怎么創(chuàng)建這些性感的樣式表?樣式表應(yīng)該具有那些特征呢?

幾個月前,我有幸出席了在俄勒岡州波蘭特島所召開的Web Visions 2007的主題會議.在預(yù)備我的演講報(bào)告時,我調(diào)查了12位工作在網(wǎng)頁設(shè)計(jì)方面的設(shè)計(jì)人員和開發(fā)人員.基于調(diào)查的結(jié)果,再結(jié)合我自己的工作經(jīng)驗(yàn),我編寫了下面的一個列表用來在創(chuàng)建樣式表的時候給予自己以適當(dāng)?shù)奶嵝?

01. 保持CSS脫離標(biāo)記

使用鏈接或者導(dǎo)入樣式表的方法對于中階或高階的CSS開發(fā)人員來說都是再正常不過的事情,但是我在這里依然會強(qiáng)調(diào)一下這種方法的重要性.我見過的許多站點(diǎn),在創(chuàng)站之初,CSS文件很整潔,組織的也井井有條,但是隨著時間的推移,這些文檔由于內(nèi)嵌的甚至內(nèi)聯(lián)(inline)的樣式出現(xiàn)而變得雜亂無章,一方面可能是由于給予的更新期限很短,另一方面或許就是純粹的由于懶惰.

你正忙于一個擁有成千上萬條的渠道內(nèi)容同時出現(xiàn)的網(wǎng)站的大面積更新,給你的期限很短,所以你就選擇了使用內(nèi)嵌或者內(nèi)聯(lián)樣式這樣一些”快速修補(bǔ)”的方法.一些年過去了,習(xí)慣依然…,直到有一天你被告知這個站點(diǎn)需要重新設(shè)計(jì),但是所有的內(nèi)容仍然不變,這個時候而你只有一個星期去完成.想象一下,這將是一個怎樣的境況.

其實(shí)這是很普遍的情況,更新樣式表是一個再簡單不過的任務(wù),在你幾年的”快速修補(bǔ)”之后,這些樣式遍布了整個站點(diǎn),相信你根本沒辦法記住他們在那里.所以現(xiàn)在你面對的只有2個選擇a)在一個星期之內(nèi)找出一個方法去清理規(guī)整這些樣式b)找一份新的工作吧.

千萬不要將你的工作變得愈來愈困難.使用鏈接和導(dǎo)入樣式表是你的不二之選.規(guī)范的創(chuàng)建并保持樣式表的整潔,你會活得更輕易一些.

提示:小心使用鏈接或?qū)�入的方法會在�?biāo)記上添加冗余的樣式.每次你創(chuàng)建新的樣式表,你都會更新要不就是添加新的樣式,過多的外聯(lián)樣式不只會使補(bǔ)丁的修復(fù)變得困難,也會使樣式表更難于維護(hù).因此可以理解為什么大型站點(diǎn)會為不同的區(qū)塊部分而去分離樣式表.小心不要玩過火了,過猶不及.

這里很值得提及一下的是過多的樣式表將會使HTTP的請求數(shù)增加.這些都會潛在的影響性能.因此,Internet Explorer將鏈接的樣式表數(shù)限制在了32個.

02. 語法不是猜字謎.

你應(yīng)該明白為什么我會說到這個.語法學(xué)是你最好的朋友,選擇合適的,有意義的元素去描述你的內(nèi)容,確保你所選擇的是富有語意的類(class)和ID特征值.做正確的事情會使你的生活變得輕易很多,假如你是某個團(tuán)隊(duì)的一分子,對團(tuán)隊(duì)其他成員來說也是如此.看一下下面的這條規(guī)則:

.l13k { color: #369; }

假如你是剛接手這個工作,你在CSS文件中看到了上面的內(nèi)容,你能不能說清楚這個類是什么意思?大部分情況下你都會說不.這個類的名稱可能是個縮寫,但是恐怕沒有辦法去弄清楚他到底是什么的縮寫,眼前是一摸黑.或者是這種情況,可能是你把它放到這里,你現(xiàn)在很清楚它是什么意思,但是你能保證3年之后你還記得它是什么意思么?

現(xiàn)在我們看一下下面的規(guī)則:

.left-blue { color: #369; }

你可能立即知道這個類選擇符是為左側(cè)邊欄的顯示藍(lán)色區(qū)塊而創(chuàng)建的,這時它就正確的表達(dá)了一定的語意.正如我在上面提到的,一旦要你在在一周內(nèi)要重新設(shè)計(jì),但是在重構(gòu)過程中,這個區(qū)塊需要定位到右邊,顏色變?yōu)榧t色,類的特征值就沒有任何意義,所以你現(xiàn)在需要改變你所有的特征值,要不就什么都不改變,不過這樣可能或?qū)е轮刂氐睦Щ?

因此解決上面問題的最好方法就是在類特征值的命名中避免使用顏色(包括顏色名稱和十六進(jìn)制值)或者寬度,高度的尺寸值.同時你也盡量的避免去使用任何表明表現(xiàn)形式的值,例如box.反之,將表現(xiàn)和內(nèi)容分離的意義也就不復(fù)存在了.

最后,我們看一下最合適的命名規(guī)則:

.product-description { color: #369; }

你應(yīng)該能理解,這個規(guī)則是應(yīng)用于產(chǎn)品描述.無論你的設(shè)計(jì)改變了多少次都不會改變.清楚明了的感覺不錯.