當(dāng)我們的樣式表變得很大和很復(fù)雜時,按整潔易懂的結(jié)構(gòu)組織它是非常重要的.組織樣式表可以讓我們寫出更有效率的CSS,并讓其他人容易明白和編輯的CSS樣式.當(dāng)然,每個設(shè)計師都會有自己所鐘愛的方式.
1.通過位置來組織
有些設(shè)計師喜歡用區(qū)塊來組織他們的樣式規(guī)則,所有的#branding在一個組里,所有的#content在另一個組里.
/* =content_main */
div#content_main {width:70%;}
div#content_main p{font-size:100%;}
div#content_main P>a {text-decoration:underline;}
/* =content_sub */
div#contetn_sub {width:30%;}
div#contetn_sub p{ color:#666;}
div#contetn_sub p>strong{font-weight:normal;}
2.給CSS分部分
通過結(jié)合CSS注釋,部分標(biāo)記和把破折號作為分隔符的方法可以很容易地給CSS劃分不同的部分.這樣可以幫助你和以后的開發(fā)人員找到某個規(guī)則,并理解那些規(guī)則運用到了設(shè)計的哪部分上.
/* main content
-------------------------------------- */
在最初編寫完CSS幾個月后,遇到了麻煩需要返回到項目時,這個方法可以提示每個部分從哪里開始,這樣做能節(jié)省我們的時間.
3.用元素來組織
其他人則更喜歡用元素來組織規(guī)則,按標(biāo)題,段落和列表分組和組合所有元素.
/* p */
p { line-height:110%;}
blockquote p { padding-left: 1em;}
div#site_info p { text-align: center;}
/* ul */
ul { line-height:110%;}
div#nav_main ul { list-style-type: none;}
div#content_sub ul{ border: 1px solid #ccc;}
4.CSS標(biāo)記
直接在注釋部分標(biāo)記文本之前添加簡的標(biāo)記,比如字符"=",能讓我們更容易地找到并跳轉(zhuǎn)到那個段落.
/* =p */
用我們的文本編輯器的尋找命令去尋找"=p",可以忽略list-style-type或padding這樣無效果,直接跳轉(zhuǎn)到段落部分.
5.把CSS分成多個文件
對于人們對最終產(chǎn)品中,一個鏈接的或?qū)氲腃SS文件是不是比多個獨立的文件更于便于管理這一點存在爭議,你可以具體情況具體分析來得到最好的答案.可以明確的一個事實是:在創(chuàng)建交互原型時,使用多個文件有明顯的優(yōu)勢.
舉例來說,你們可以把設(shè)計原型拆分到以下獨立文件中.
1)布局樣式包含了顯示屬性;浮動;定位;寬度;高度;填充和邊距(layout.css).
2)顏色樣式包含了背景屬性;顏色;圖像;以及文本顏色(color.css).
3)版式信息包含了字體和字體大小,行高,字符間隔和文本裝飾(type.css).
為了簡化和減少鏈接到標(biāo)簽或來自于標(biāo)簽的樣式表的數(shù)量,我們可以選擇鏈接一個文件在這個文件里用@import@規(guī)則導(dǎo)入附加樣式表.
引用的樣式表必須出現(xiàn)在其他規(guī)則之前,樣式表的頭部,這樣才能保證正常的效果.
@import url(color.css);
@imporp url(type.css);
[ remaining layout.css rules]
迄今為止,我們已經(jīng)學(xué)會使用表意的標(biāo)簽和CSS創(chuàng)建可交互的原型,幫助完成輕量,表意的代碼,容易理解的內(nèi)容,以及靈活的設(shè)計,還可以幫助我們更有效率地和同事以及客戶溝通.
-----摘自:<超越CSS：Web設(shè)計藝術(shù)精髓>
