style_all.css
包含重置和一些適用于各個(gè)瀏覽器和操作系統(tǒng)的CSS代碼. 而且最好把那些用內(nèi)容管理系統(tǒng)中所見(jiàn)即所得編輯器生成的內(nèi)容的樣式放在這個(gè)文件里, 比如鏈接的顏色和元素的樣式等等.

style_screen.css
這是包含整體樣式的主文件. 一會(huì)兒我們會(huì)深入了解它.

style_screen_IE7.css
特別為IE7準(zhǔn)備的樣式表. 我做過(guò)的大多數(shù)項(xiàng)目不需要特別準(zhǔn)備一個(gè)IE7的樣式表, 這里只是讓大家更加理解我所說(shuō)的命名慣例.

style_screen_It-IE7.css
這是兼容所有IE7以下版本瀏覽器的樣式表.

style_print.css
當(dāng)你去掉所有圖片, 僅僅顯示好看而整潔的文字時(shí)就會(huì)用到這個(gè)用于打印的樣式表.

這個(gè)命名慣例很復(fù)雜. 比如你要專(zhuān)門(mén)為IE6準(zhǔn)備一個(gè)樣式表, 就可以命名為style_screen_IE6.css. 如果是針對(duì)便攜設(shè)備, 就可以命名為style_handheld.css, 如此等等.
我在開(kāi)發(fā)的商業(yè)內(nèi)容管理系統(tǒng), 有這樣一個(gè)功能就是檢查樣式表文件并自動(dòng)使用適當(dāng)?shù)臈l件注釋. 將來(lái)我也許會(huì)發(fā)布那部分代碼

模塊化

現(xiàn)在讓我們深入探討一下主樣式表style_screen.css. 這個(gè)文件將來(lái)會(huì)變得很大, 所以把樣式劃分成一部分一部分是非常重要的.
我會(huì)在樣式表的開(kāi)頭聲明劃分成哪幾部分.

將CSS文件劃分成許多部分

提示: 按ctrl+F(或者 Mac+F), 輸入 =FORMS 就能直接跳轉(zhuǎn)到表單樣式的部分. 我發(fā)現(xiàn)這樣特別節(jié)省時(shí)間.

定位

規(guī)定布局的結(jié)構(gòu), 定位基本的元素. 把頁(yè)面分成頭部, 內(nèi)容部分, 側(cè)邊欄, 和頁(yè)腳. 在開(kāi)發(fā)一個(gè)新頁(yè)面時(shí), 首先要做的是把整體的框架搭建起來(lái), 而不要先考慮細(xì)節(jié).

先定義基本的樣式結(jié)構(gòu)

排版

排版包括定義全局和所有常見(jiàn)元素的字體. 定義那些會(huì)控制內(nèi)容的元素的字體, 比如頁(yè)頭, 段落樣式, 列表, 引用等等.

把字體定義從布局樣式里面劃分出來(lái)

布局設(shè)計(jì)

既然已經(jīng)解決了定位和排版, 你現(xiàn)在就要把精力放在頁(yè)面設(shè)計(jì)上了.
如果這部分太長(zhǎng)的話, 以后可以把它們劃分成更小的部分. 適當(dāng)縮進(jìn), 保持代碼的層次感對(duì)維護(hù)樣式表很有幫助.

其他部分

通常我會(huì)把表單, 內(nèi)容管理系統(tǒng)代碼等單獨(dú)分出來(lái). 根據(jù)需要, 把自己項(xiàng)目的樣式單獨(dú)分成一部分.
一旦需要調(diào)試或者修改從前項(xiàng)目的時(shí)候, 模塊化代碼的優(yōu)點(diǎn)就很明顯了. 瀏覽代碼, 并找到所需的代碼就變得容易很多.

縮進(jìn)和層級(jí)

最高級(jí)別的元素縮進(jìn)最少. 它的下一級(jí)元素縮進(jìn)一次. 再下一級(jí)縮進(jìn)兩次, 以此類(lèi)推.

適當(dāng)縮進(jìn)并保持父級(jí)子級(jí)的層級(jí)結(jié)構(gòu)

這樣做不僅美觀而且可讀性強(qiáng), 同時(shí)可以更容易的鎖定問(wèn)題. 大量的空格的確會(huì)使文件變大, 但你總是可以在發(fā)布之前壓縮CSS文件.
比如, 頁(yè)面上的搜索框出了問(wèn)題. 而代碼必須在布局部分里, 寫(xiě)在父級(jí)側(cè)邊欄樣式的下面. 如果有適當(dāng)?shù)哪K化和縮進(jìn), 你會(huì)發(fā)現(xiàn)找到你需要的代碼是多么容易的事情.

有的設(shè)計(jì)師覺(jué)得把CSS屬性按字母序排列是一個(gè)比較有效的方法, 因?yàn)檫@樣容易維護(hù). 但我不太同意. 我覺(jué)得用以CSS屬性的類(lèi)型來(lái)排列會(huì)更有效.

.selector {
font-size: 12px;
line-height: 15px;
text-transform: uppercase;

padding: 10px;
margin: 5px;
 
background: #000;
border: 1px solid #222;
}

在上面的例子中, 屬性的劃分是按照: 控制內(nèi)容的, 控制間距的, 以及塊級(jí)元素的可視化(背景和邊緣)這些類(lèi)型劃分的.
如果它們是按照字母序排列的, 就是下面這樣:

.selector {
background: #000;
border: 1px solid #222;
font-size: 12px;
line-height: 15px;
margin: 5px;
padding: 10px;
text-transform: uppercase;
}

很顯然, CSS的可讀性大大降低了. 我通常先寫(xiě)布局相關(guān)的屬性, 接著是內(nèi)容屬性, 然后是間距和其他屬性.

總結(jié)

其實(shí)以上這些并不復(fù)雜. 這些簡(jiǎn)單的事情可以幫助前端開(kāi)發(fā)者隨時(shí)保持清晰的思路. 漂亮的樣式表是禪意開(kāi)發(fā)的第一步.

如果你有好的建議或者好的調(diào)試方法, 就和大家分享吧.