CSS教程:創建性感的CSS樣式表_CSS教程

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

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

接下來,我將重點放在創建性感的樣式表方法的討論之上.一旦CSS被用來創建具有魅力的網站,CSS的書寫事實上就已經成為了藝術.使用何種方法創建,架構以及治理CSS成為了一件美妙的事情.

那么怎么創建這些性感的樣式表?樣式表應該具有那些特征呢?

幾個月前,我有幸出席了在俄勒岡州波蘭特島所召開的Web Visions 2007的主題會議.在預備我的演講報告時,我調查了12位工作在網頁設計方面的設計人員和開發人員.基于調查的結果,再結合我自己的工作經驗,我編寫了下面的一個列表用來在創建樣式表的時候給予自己以適當的提醒.

01. 保持CSS脫離標記

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

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

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

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

提示:小心使用鏈接或導入的方法會在標記上添加冗余的樣式.每次你創建新的樣式表,你都會更新要不就是添加新的樣式,過多的外聯樣式不只會使補丁的修復變得困難,也會使樣式表更難于維護.因此可以理解為什么大型站點會為不同的區塊部分而去分離樣式表.小心不要玩過火了,過猶不及.

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

02. 語法不是猜字謎.

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

.l13k { color: #369; }

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

現在我們看一下下面的規則:

.left-blue { color: #369; }

你可能立即知道這個類選擇符是為左側邊欄的顯示藍色區塊而創建的,這時它就正確的表達了一定的語意.正如我在上面提到的,一旦要你在在一周內要重新設計,但是在重構過程中,這個區塊需要定位到右邊,顏色變為紅色,類的特征值就沒有任何意義,所以你現在需要改變你所有的特征值,要不就什么都不改變,不過這樣可能或導致重重的困惑.

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

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

.product-description { color: #369; }

你應該能理解,這個規則是應用于產品描述.無論你的設計改變了多少次都不會改變.清楚明了的感覺不錯.