CSS樣式按整潔易懂的結(jié)構(gòu)組織

2024-07-11 08:46:18

字體：大中小

供稿：網(wǎng)友

當我們的樣式表變得很大和很復雜時,按整潔易懂的結(jié)構(gòu)組織它是非常重要的.組織樣式表可以讓我們寫出更有效率的CSS,并讓其他人容易明白和編輯的CSS樣式.當然,每個設(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注釋,部分標記和把破折號作為分隔符的方法可以很容易地給CSS劃分不同的部分.這樣可以幫助你和以后的開發(fā)人員找到某個規(guī)則,并理解那些規(guī)則運用到了設(shè)計的哪部分上.

/* main content
-------------------------------------- */

在最初編寫完CSS幾個月后,遇到了麻煩需要返回到項目時,這個方法可以提示每個部分從哪里開始,這樣做能節(jié)省我們的時間.

3.用元素來組織

其他人則更喜歡用元素來組織規(guī)則,按標題,段落和列表分組和組合所有元素.

/* 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標記

直接在注釋部分標記文本之前添加簡的標記,比如字符"=",能讓我們更容易地找到并跳轉(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).

為了簡化和減少鏈接到標簽或來自于標簽的樣式表的數(shù)量,我們可以選擇鏈接一個文件在這個文件里用@import@規(guī)則導入附加樣式表.

引用的樣式表必須出現(xiàn)在其他規(guī)則之前,樣式表的頭部,這樣才能保證正常的效果.

@import url(color.css);
@imporp url(type.css);

[ remaining layout.css rules]

迄今為止,我們已經(jīng)學會使用表意的標簽和CSS創(chuàng)建可交互的原型,幫助完成輕量,表意的代碼,容易理解的內(nèi)容,以及靈活的設(shè)計,還可以幫助我們更有效率地和同事以及客戶溝通.

-----摘自:<超越CSS：Web設(shè)計藝術(shù)精髓>

上一篇：如何組織和注釋CSS文件

下一篇：CSS Prism 查看和編輯CSS中用到的顏色