設(shè)計漂亮的樣式表是一門藝術(shù)
設(shè)計漂亮的樣式表不是一門暗黑藝術(shù)(如果用藝術(shù)家的眼光來看待這門藝術(shù)的話，那更多表現(xiàn)的是種對幸福的生活渴望和完美人生的追求. PS: 這是譯者找到的最靠譜的解釋.). 它需要持久的練習和全身心的投入, 但是, 有一些小竅門來幫你快速提升, 讓你也成為一個CSS高手.
再接下來的文章里，我會演示一些自己在設(shè)計可讀性強, 維護性強, 并容易調(diào)試的樣式表時用到的技術(shù).
文件的命名慣例
在所有的項目中我都遵循一種簡單的命名習慣. 這是一種簡單而有效的辦法來維護CSS文件. 有很多設(shè)計師會給樣式表起一些模糊的名字, 比如main.css, 或者style.css. 我覺得文件名可以更細致一點, 這樣的話, 你可以很快的知道每個文件是做什么的.
這是我的一個客戶的網(wǎng)站文件結(jié)構(gòu).
CSS 命名慣例
style_all.css包含重置和一些適用于各個瀏覽器和操作系統(tǒng)的CSS代碼. 而且最好把那些用內(nèi)容管理系統(tǒng)中所見即所得編輯器生成的內(nèi)容的樣
式放在這個文件里, 比如鏈接的顏色和元素的樣式等等.
style_screen.css這是包含整體樣式的主文件. 一會兒我們會深入了解它.
style_screen_IE7.css特別為IE7準備的樣式表. 我做過的大多數(shù)項目不需要特別準備一個IE7的樣式表, 這里只是讓大家更加理解我所說的命名慣例.
style_screen_It-IE7.css這是兼容所有IE7以下版本瀏覽器的樣式表.
style_print.css當你去掉所有圖片, 僅僅顯示好看而整潔的文字時就會用到這個用于打印的樣式表.
這個命名慣例很復雜. 比如你要專門為IE6準備一個樣式表, 就可以命名為style_screen_IE6.css. 如果是針對便攜設(shè)備, 就可以命名為style_handheld.css, 如此等等.
我在開發(fā)的商業(yè)內(nèi)容管理系統(tǒng), 有這樣一個功能就是檢查樣式表文件并自動使用適當?shù)臈l件注釋. 將來我也許會發(fā)布那部分代碼(如果我能說服項目經(jīng)理的話:P)
模塊化
現(xiàn)在讓我們深入探討一下主樣式表style_screen.
css. 這個文件將來會變得很大, 所以把樣式劃分成一部分一部分是非常重要的.
我會在樣式表的開頭聲明劃分成哪幾部分.
將CSS文件劃分成許多部分提示: 按ctrl+F(或者 Mac+F), 輸入 =FORMS 就能直接跳轉(zhuǎn)到表單樣式的部分. 我發(fā)現(xiàn)這樣特別節(jié)省時間.
定位
規(guī)定布局的結(jié)構(gòu), 定位基本的元素. 把頁面分成頭部, 內(nèi)容部分, 側(cè)邊欄, 和頁腳. 在開發(fā)一個新頁面時, 首先要做的是把整體的框架搭建起來, 而不要先考慮細節(jié).
先定義基本的樣式結(jié)構(gòu)排版
排版包括定義全局和所有常見元素的字體. 定義那些會控制內(nèi)容的元素的字體, 比如頁頭, 段落樣式, 列表, 引用等等.
把字體定義從布局樣式里面劃分出來布局設(shè)計
既然已經(jīng)解決了定位和排版, 你現(xiàn)在就要把精力放在頁面設(shè)計上了.
如果這部分太長的話, 以后可以把它們劃分成更小的部分. 適當縮進, 保持代碼的層次感對維護樣式表很有幫助.
其他部分
通常我會把表單, 內(nèi)容管理系統(tǒng)代碼等單獨分出來. 根據(jù)需要, 把自己項目的樣式單獨分成一部分.
一旦需要調(diào)試或者修改從前項目的時候, 模塊化代碼的優(yōu)點就很明顯了. 瀏覽代碼, 并找到所需的代碼就變得容易很多.
縮進和層級
最高級別的元素縮進最少. 它的下一級元素縮進一次. 再下一級縮進兩次, 以此類推.
適當縮進并保持父級子級的層級結(jié)構(gòu)
這樣做不僅美觀而且可讀性強, 同時可以更容易的鎖定問題. 大量的空格的確會使文件變大, 但你總是可以在發(fā)布之前壓縮CSS文件.
比如, 頁面上的搜索框出了問題. 而代碼必須在布局部分里, 寫在父級側(cè)邊欄樣式的下面. 如果有適當?shù)哪K化和縮進, 你會發(fā)現(xiàn)找到你需要的代碼是多么容易的事情.
對屬性加以分類, 而不是按照字母序排列
有的設(shè)計師覺得把CSS屬性按字母序排列是一個比較有效的方法, 因為這樣容易維護. 但我不太同意. 我覺得用以CSS屬性的類型來排列會更有效.
.selector {
font-size: 12px;
line-height: 15px;
text-transform: uppercase;
padding: 10px;
margin: 5px;
background: #000;
border: 1px solid #222;
}
在上面的例子中, 屬性的劃分是按照: 控制內(nèi)容的, 控制間距的, 以及塊級元素的可視化(背景和邊緣)這些類型劃分的.
如果它們是按照字母序排列的, 就是下面這樣:
.selector {
background: #000;
border: 1px solid #222;
font-size: 12px;
line-height: 15px;
margin: 5px;
padding: 10px;
text-transform: uppercase;
}
很顯然, CSS的可讀性大大降低了. 我通常先寫布局相關(guān)的屬性, 接著是內(nèi)容屬性, 然后是間距和其他屬性.
總結(jié)
其實以上這些并不復雜. 這些簡單的事情可以幫助前端開發(fā)者隨時保持清晰的思路. 漂亮的樣式表是禪意開發(fā)的第一步.
