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

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

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

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

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

01. 保持css脫離標記

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

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

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

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

提示:小心使用鏈接或?qū)氲姆椒〞跇擞浬咸砑尤哂嗟臉邮?每次你創(chuàng)建新的樣式表,你都會更新要不就是添加新的樣式,過多的外聯(lián)樣式不只會使補丁的修復(fù)變得困難,也會使樣式表更難于維護.因此可以理解為什么大型站點會為不同的區(qū)塊部分而去分離樣式表.小心不要玩過火了,過猶不及.

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

02. 語法不是猜字謎.

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

.l13k { color: #369; }

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

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

.left-blue { color: #369; }

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

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

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

.product-description { color: #369; }

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

|||

03. 體會注釋的優(yōu)點

如果使用注釋的方法得當?shù)脑?為你的css文件添加注釋可以在開發(fā)過程中給予你和其他人很大的幫助.最常見的是為css樣式規(guī)則添加提示信息,不過使用注釋對優(yōu)化組織結(jié)構(gòu)和提升效用也很有幫助.

提示和標簽

這是注釋最常用的途徑,可以為自己或其他開發(fā)人員留下提示信息可以避免后期引起的不必要的困惑和麻煩.這種應(yīng)用簡潔性最為重要.例如:

/* turn off borders for linked images */
img { border: 0; }

時間戳和簽名

許多設(shè)計人員和開發(fā)人員會在最新更新的css文件標注日期時間,以及他們的名字.這些都會提供給我們一些聯(lián)系信息以及文檔更新信息.

/* sushimonster typography styles updated: thu 10.18.07 @ 5:15 p.m. author: jina bolton —————————————————-*/

對于一項工程,這種方法會很有用,如果你是小組一分子時,這更是顯得尤其重要.要提醒的是,一些組織都要求在文檔中留下這類信息,而有些公司喜歡把名字和日期這些信息放在文檔之外的地方,所以在開始之前最好弄清楚這些事情.

組織

在css文檔中使用注釋指示不同的區(qū)塊是個不錯的主意.例如,如果所有的頭部信息被組合在一起,你可以使用注釋使它和下面的區(qū)塊樣式區(qū)分開來.

/* header —————————————————-*/

接下來我會就此進行進一步的闡述,現(xiàn)在我們先討論一下如何”分離樣式類型”

注釋標記

如果你的css文件都是按照我上面所說的按照區(qū)塊進行劃分的話,使用注釋標記可以配合”查找”功能使你在文檔的各個部分之間切換自如.標注一個章節(jié)(chapter),例如使用等號”=”,然后在后面添加一個區(qū)塊的名稱,例如”header”,這樣就為你的css文檔創(chuàng)建了一個”錨點”.

/* =header —————————————————-*/

這種方法在內(nèi)容繁雜的樣式表中尤其有用.更多的相關(guān)信息你可以在

stop design站點上了解.

參考

將注釋作為參考說明不常見但不失為一個有用的方法,一個典型的例子是steve smith在他的css文檔中包含一個為配色而添加的參考信息注釋.
/* colors
   body background:       #2f2c22
   main text:             #b3a576
   links:                 #9c6d25
   dark brown border:     #222019
   green headline:        #958944
*/

你可以將這個向?qū)缘淖⑨尫旁赾ss文檔的頂部以提醒你站點是如何配色的.另一個例子則是將注釋作為類目錄(index-like)的方法.你可以定義不同的區(qū)塊以便于你在它們之間快速切換,可能會用到注釋標記的用法,下面是一個例子

/* generic header sidebar forms tables footer */ /* =generic —————————————————-*/

04.清楚什么時候使用條件注釋語句和技巧(hacks)

現(xiàn)在有很大一部分文章會提及css技巧(hacks)產(chǎn)生的問題,并且說明在當前所有的internet explorer發(fā)行版本中為什么要使用條件注釋語句.自然而然,肯定會有相左的意見.以前我也一直以為使用條件注釋語句會比使用css技巧(hacks)好一些,直到最近有太多的例子證明這兩種方法都算不得什么好的解決方案.

想象一下,你現(xiàn)在要為一個元素設(shè)置最小高度值,對于internet explorer 6來說,由于它不支持min-height屬性,但是使用height屬性就可以達到所要的效果,于是你就創(chuàng)建了一個新的樣式表文件,并且在文檔標記中使用注釋語句來引用它,難道你所做的就只是為了這么一條css規(guī)則?如果將height和min-height屬性放在一個css文件中,然后使用小技巧(hack)針對不同瀏覽器切換屬性是不是會好一些?這種情況下,我堅持認為少用條件注釋語句為好.

換個角度想一下,如果你放置了多個樣式表文件,條件語句可能會使你的調(diào)試過程變得困難.如果你要更改一些東西,例如在上面的例子中,你就需要打開多個文件進行修改.很多情況下,對你來說,這將是一個繁重的任務(wù).可以想象一下,如果你在主要的css文件中定義的規(guī)則,然后在需要3個不同的ie樣式表中進行重定義.這些都給后期的工作留下了不必要的煩惱,尤其是如果另外一個開發(fā)人員在編輯時沒有注意到這些需要重新編寫的文件的存在.

假如你現(xiàn)在還在使用條件語句,我推薦你在主樣式表中添加一個注釋以便后來的開發(fā)人員知道ie專有樣式規(guī)則的存在.當必須編輯height或者類似的屬性時,這種方法可以提醒你需要修改的不僅僅是一個文件.

再次提醒一下,如果你使用css hack 的方法,瀏覽器更新帶來的更改可能對今后的工作帶來影響,你現(xiàn)在使用的hacks可能在下一個版本中就無法工作了.

|||

05.組織選擇符和聲明

經(jīng)常的,要保持css的整潔度和有序性.我喜歡將選擇符按照樣式的類別進行組織劃分.

• 重置樣式(reset styles)
• 排版樣式(typography styles)
• 布局樣式(layout styles (header, content, footer, etc.))
• 模塊和widget樣式module or widget styles
• 其他(etc).

然后,在每個組里面,我按照dom等級將選擇符組織劃分:

• 任何父級元素樣式(any parent styles)
• 塊級元素樣式(block-level element styles) (段落,列表等.)
• 內(nèi)聯(lián)元素樣式(inline element styles) (鏈接,縮寫等.)
• 其他(etc).

然后在上面劃分的基礎(chǔ)上進行詳細的劃分:

• 段落(paragraphs)
• 引用(blockquotes)
• 地址(addresses)
• 列表(lists)
• 表單(forms)
• 表格(tables)
• 其他(etc).

最后,我按照樣式類型組織css聲明

• 位置樣式(positioning  styles)
• 浮動/清除浮動樣式(float/clear styles)
• 顯示/可見樣式(display/visibility styles)
• 空間樣式(spacing styles)(margin, padding, border)
• 尺寸樣式(dimensions styles)
• 排版相關(guān)樣式(typography-related styles)(line-height, color, etc.)
• 其他樣式(miscellaneous styles)(list-style, cursors, etc.)

許多人喜歡根據(jù)聲明的字母順序來排列,這種方法對我來說可能不太適合,但可能對你來說會非常適合.不過一旦你選擇了任何組織方法,就最好堅持下去以保持其統(tǒng)一性.

06. 創(chuàng)建框架(framework,庫)

當你在編寫css時,如果你已經(jīng)發(fā)現(xiàn)你經(jīng)常反復(fù)的做同一件事情,考慮一下創(chuàng)建一個框架或庫可能是個不錯的主意.將一個樣式表組合組成的框架作為你的網(wǎng)站的基礎(chǔ)能夠縮短的你開發(fā)時間.較為典型的樣式表基本上都包含以下內(nèi)容:

• screen.css - 一個screen css文件包含你所有應(yīng)用在屏幕顯示上的所有樣式,可以選擇性的導(dǎo)入附加樣式,如以下樣式表文件:
• reset.css - reset css文件被用于重置所有默認的瀏覽器樣式,讓我們更容易的完成各種瀏覽器下的兼容性問題.
• typography.css - typography css文件被用來定義字體,大小,行間距,字間距和字體顏色.
• grid.css - grid css文件被用來組織布局和結(jié)構(gòu).通過定義基本的頭部,底部和列設(shè)置為你網(wǎng)站的創(chuàng)建輪廓,線框模型(winframe)
• print.css - print css文件包含頁面被打印時顯示的樣式.

一個css框架的例子是由olav bjørkøy創(chuàng)建的blueprint framework,開發(fā)人員主要為jeff croft 和 eric meyer等人.另一個流行的框架就是yahoo! user interface library建立的.不過許多開發(fā)人員認為這些成型的框架包含的標記和css有那么一點臃腫,當然也包括了太多的表現(xiàn)類(class)和屬性名稱.

聲明:當我在寫這篇文章時,jeff croft發(fā)表了一篇主題為what’s not to love about css frameworks?(什么讓你摒棄css框架),在這篇文章的評論中和談及他聽說許多人說我嚴重反對css框架,我不知道這從何說起,但是我仍然要重申一下我的觀點,我不反對使用css框架,并且非常堅持使用它們.

最好的結(jié)果就是你最好創(chuàng)建適合自己或者你所在組織的框架.

|||

07. 保持文檔可讀性和性能優(yōu)化的平衡

每個開發(fā)者的樣式風(fēng)格可能不盡相同.許多開發(fā)者書寫的樣式表文件具有很好的可讀性,并且會在把文件正式上傳之前進行一些性能優(yōu)化措施,例如移除注釋,空白,縮進以及換行等步驟.這是一個不錯的方法,也值得推薦.盡管如此,在某些情況下如果你不能進行那些步驟的時候,最好找到一個能夠保持文檔可讀性和性能優(yōu)化平衡的方法.對此,steve smith 有一個不錯的建議.

另外,考慮一下使用連字符號替換下劃線,微格式(microformats )將連字符號作為標準的分割符號,不過某些特定的老版本瀏覽器在處理上可能有問題.你可以閱讀一下underscores in class and id names(類和id中的下劃線)這邊文章來了解更多信息.

08. 管理文本編輯器

每個藝術(shù)家都會對使用他所了解的適合他們的工具,對于設(shè)計者和開發(fā)者來說也是如此.對于css,最好了解你所使用的編輯器.

現(xiàn)在有很多的文本編輯器可以使用,如textmate,coda,bb edit,textpad,dreamweaver等,我在這里不是要告訴你選擇那一個編輯器.每個編輯器都有自己的優(yōu)勢和劣勢,最適合的編輯器取決于你的偏好.不過,一旦你選擇了一個編輯器,最好把它了解的清清楚楚.例如快捷鍵時什么,有那些能用到的提示和技巧等等.

管理好文本編輯器時加快開發(fā)速度最好的方法.它會讓你在創(chuàng)建樣式表時更有效率.

|||

09.使用版本控制

平滑維護是創(chuàng)建性感的樣式表中關(guān)鍵的步驟.版本控制能幫上你不少的忙,它不只是對小組開發(fā)有用,對單獨的設(shè)計者和開發(fā)者來說也很有用.

許多應(yīng)用程序內(nèi)置了源代碼控制機制,dreamweaver使用 登記/登出系統(tǒng)幫助開發(fā)人員確認所編輯的文件不是已經(jīng)編輯過的文件,而同步功能可以將本地文件和遠程文件進行同步,合并和替換.這些功能很容易上手,但在某些地方還是有不足之處.

subversion (svn) 和 concurrent versions system (cvs) 提供了更為強大的功能.通過附加的功能,你可以進行恢復(fù),查看更改以及解決沖突等操作.這里有jonathan snook的一篇叫做“hosted subversion”的文章,你可以閱讀以獲取更多的如何快速簡便的去操作它的方法.

10. 創(chuàng)建和管理樣式表向?qū)臋n

在某些情況下,樣式表向?qū)募情_發(fā)人員對語法規(guī)則和書寫標準所編寫的指導(dǎo)性文檔,它常用被用作設(shè)計,開發(fā)和內(nèi)容的大綱來使用.編寫樣式向?qū)臋n是為清楚的表達排版,網(wǎng)格,顏色,圖片尺寸等內(nèi)容而創(chuàng)建的參考手冊.

創(chuàng)建樣式表向?qū)臋n的時候,最好的辦法是提供一個標記和css的參考性內(nèi)容.這些參考可以被開發(fā)小組或者后期的開發(fā)人員當作手冊來使用.另外,它還可以包含布局定義,在里面你可以列出所使用的不同布局以及相關(guān)的標記和樣式.

最后,你所需要做的是一些開發(fā)者保證質(zhì)量的必要步驟,例如檢測有效性和可用性以便保證生產(chǎn)出高質(zhì)量的產(chǎn)品.