設(shè)計(jì)漂亮的樣式表是一門藝術(shù)
設(shè)計(jì)漂亮的樣式表不是一門暗黑藝術(shù)(如果用藝術(shù)家的眼光來看待這門藝術(shù)的話，那更多表現(xiàn)的是種對(duì)幸福的生活渴望和完美人生的追求. PS: 這是譯者找到的最靠譜的解釋.). 它需要持久的練習(xí)和全身心的投入, 但是, 有一些小竅門來幫你快速提升, 讓你也成為一個(gè)CSS高手.
再接下來的文章里，我會(huì)演示一些自己在設(shè)計(jì)可讀性強(qiáng), 維護(hù)性強(qiáng), 并容易調(diào)試的樣式表時(shí)用到的技術(shù).
文件的命名慣例
在所有的項(xiàng)目中我都遵循一種簡單的命名習(xí)慣. 這是一種簡單而有效的辦法來維護(hù)CSS文件. 有很多設(shè)計(jì)師會(huì)給樣式表起一些模糊的名字, 比如main.css, 或者style.css. 我覺得文件名可以更細(xì)致一點(diǎn), 這樣的話, 你可以很快的知道每個(gè)文件是做什么的.
這是我的一個(gè)客戶的網(wǎng)站文件結(jié)構(gòu).
CSS 命名慣例
style_all.css
包含重置和一些適用于各個(gè)瀏覽器和操作系統(tǒng)的CSS代碼. 而且最好把那些用內(nèi)容管理系統(tǒng)中所見即所得編輯器生成的內(nèi)容的樣式放在這個(gè)文件里, 比如鏈接的顏色和元素的樣式等等.
style_screen.css
這是包含整體樣式的主文件. 一會(huì)兒我們會(huì)深入了解它.
style_screen_IE7.css
特別為IE7準(zhǔn)備的樣式表. 我做過的大多數(shù)項(xiàng)目不需要特別準(zhǔn)備一個(gè)IE7的樣式表, 這里只是讓大家更加理解我所說的命名慣例.
style_screen_It-IE7.css
這是兼容所有IE7以下版本瀏覽器的樣式表.
style_print.css
當(dāng)你去掉所有圖片, 僅僅顯示好看而整潔的文字時(shí)就會(huì)用到這個(gè)用于打印的樣式表.
這個(gè)命名慣例很復(fù)雜. 比如你要專門為IE6準(zhǔn)備一個(gè)樣式表, 就可以命名為style_screen_IE6.css. 如果是針對(duì)便攜設(shè)備, 就可以命名為style_handheld.css, 如此等等.
我在開發(fā)的商業(yè)內(nèi)容管理系統(tǒng), 有這樣一個(gè)功能就是檢查樣式表文件并自動(dòng)使用適當(dāng)?shù)臈l件注釋. 將來我也許會(huì)發(fā)布那部分代碼(如果我能說服項(xiàng)目經(jīng)理的話:P)
模塊化
現(xiàn)在讓我們深入探討一下主樣式表style_screen.css. 這個(gè)文件將來會(huì)變得很大, 所以把樣式劃分成一部分一部分是非常重要的.
我會(huì)在樣式表的開頭聲明劃分成哪幾部分.
將CSS文件劃分成許多部分
提示: 按ctrl+F(或者 Mac+F), 輸入 =FORMS 就能直接跳轉(zhuǎn)到表單樣式的部分. 我發(fā)現(xiàn)這樣特別節(jié)省時(shí)間.
定位
規(guī)定布局的結(jié)構(gòu), 定位基本的元素. 把頁面分成頭部, 內(nèi)容部分, 側(cè)邊欄, 和頁腳. 在開發(fā)一個(gè)新頁面時(shí), 首先要做的是把整體的框架搭建起來, 而不要先考慮細(xì)節(jié).
先定義基本的樣式結(jié)構(gòu)
|
