關(guān)于如何組織和注釋CSS文件,有很多方法,但是哪一種方法最好,卻沒有答案,這要靠你自己在工作中慢慢的去思考了.如果你有更好的方法請(qǐng)告訴大家讓大家一起分享.....
當(dāng)我們的樣式表變得很大和很復(fù)雜時(shí),按整潔易懂的結(jié)構(gòu)組織它是非常重要的.組織樣式表可以讓我們寫出更有效率的CSS,并讓其他人容易明白和編輯的CSS樣式.當(dāng)然,每個(gè)設(shè)計(jì)師都會(huì)有自己所鐘愛的方式.
1.通過位置來組織
有些設(shè)計(jì)師喜歡用區(qū)塊來組織他們的樣式規(guī)則,所有的#branding在一個(gè)組里,所有的#content在另一個(gè)組里.
/* =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)記和把破折號(hào)作為分隔符的方法可以很容易地給CSS劃分不同的部分.這樣可以幫助你和以后的開發(fā)人員找到某個(gè)規(guī)則,并理解那些規(guī)則運(yùn)用到了設(shè)計(jì)的哪部分上.
/* main content
-------------------------------------- */
在最初編寫完CSS幾個(gè)月后,遇到了麻煩需要返回到項(xiàng)目時(shí),這個(gè)方法可以提示每個(gè)部分從哪里開始,這樣做能節(jié)省我們的時(shí)間.
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)記文本之前添加簡(jiǎn)的標(biāo)記,比如字符"=",能讓我們更容易地找到并跳轉(zhuǎn)到那個(gè)段落.
/* =p */
用我們的文本編輯器的尋找命令去尋找"=p",可以忽略list-style-type或padding這樣無效果,直接跳轉(zhuǎn)到段落部分.
5.把CSS分成多個(gè)文件
對(duì)于人們對(duì)最終產(chǎn)品中,一個(gè)鏈接的或?qū)氲腃SS文件是不是比多個(gè)獨(dú)立的文件更于便于管理這一點(diǎn)存在爭(zhēng)議,你可以具體情況具體分析來得到最好的答案.可以明確的一個(gè)事實(shí)是:在創(chuàng)建交互原型時(shí),使用多個(gè)文件有明顯的優(yōu)勢(shì).
舉例來說,你們可以把設(shè)計(jì)原型拆分到以下獨(dú)立文件中.
1)布局樣式包含了顯示屬性;浮動(dòng);定位;寬度;高度;填充和邊距(layout.css).
2)顏色樣式包含了背景屬性;顏色;圖像;以及文本顏色(color.css).
3)版式信息包含了字體和字體大小,行高,字符間隔和文本裝飾(type.css).
為了簡(jiǎn)化和減少鏈接到標(biāo)簽或來自于標(biāo)簽的樣式表的數(shù)量,我們可以選擇鏈接一個(gè)文件在這個(gè)文件里用@import@規(guī)則導(dǎo)入附加樣式表.
引用的樣式表必須出現(xiàn)在其他規(guī)則之前,樣式表的頭部,這樣才能保證正常的效果.
@import url(color.css);
@imporp url(type.css);
[ remaining layout.css rules]
迄今為止,我們已經(jīng)學(xué)會(huì)使用表意的標(biāo)簽和CSS創(chuàng)建可交互的原型,幫助完成輕量,表意的代碼,容易理解的內(nèi)容,以及靈活的設(shè)計(jì),還可以幫助我們更有效率地和同事以及客戶溝通.
-----摘自:<超越CSS：Web設(shè)計(jì)藝術(shù)精髓>
----------------人生如同一場(chǎng)戲，既然都是唱，都要花費(fèi)同樣的力氣，還不如選個(gè)大舞臺(tái)、好角色，痛痛快快演一場(chǎng)。------------------------- |
