設(shè)計漂亮的樣式表是一門藝術(shù)
設(shè)計漂亮的樣式表不是一門暗黑藝術(shù)(如果用藝術(shù)家的眼光來看待這門藝術(shù)的話，那更多表現(xiàn)的是種對幸福的生活渴望和完美人生的追求. PS: 這是譯者找到的最靠譜的解釋.). 它需要持久的練習(xí)和全身心的投入, 但是, 有一些小竅門來幫你快速提升, 讓你也成為一個CSS高手.
再接下來的文章里，我會演示一些自己在設(shè)計可讀性強, 維護(hù)性強, 并容易調(diào)試的樣式表時用到的技術(shù).
文件的命名慣例
在所有的項目中我都遵循一種簡單的命名習(xí)慣. 這是一種簡單而有效的辦法來維護(hù)CSS文件. 有很多設(shè)計師會給樣式表起一些模糊的名字, 比如main.css, 或者style.css. 我覺得文件名可以更細(xì)致一點, 這樣的話, 你可以很快的知道每個文件是做什么的.
這是我的一個客戶的網(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準(zhǔn)備的樣式表. 我做過的大多數(shù)項目不需要特別準(zhǔn)備一個IE7的樣式表, 這里只是讓大家更加理解我所說的命名慣例.
style_screen_It-IE7.css
這是兼容所有IE7以下版本瀏覽器的樣式表.
style_print.css
當(dāng)你去掉所有圖片, 僅僅顯示好看而整潔的文字時就會用到這個用于打印的樣式表.
這個命名慣例很復(fù)雜. 比如你要專門為IE6準(zhǔn)備一個樣式表, 就可以命名為style_screen_IE6.css. 如果是針對便攜設(shè)備, 就可以命名為style_handheld.css, 如此等等.
我在開發(fā)的商業(yè)內(nèi)容管理系統(tǒng), 有這樣一個功能就是檢查樣式表文件并自動使用適當(dā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ā)一個新頁面時, 首先要做的是把整體的框架搭建起來, 而不要先考慮細(xì)節(jié).
先定義基本的樣式結(jié)構(gòu)
|
