您當前位置：首頁 > web前端 > htmlcss > CSS技巧之如何組織和注釋CSS文件

CSS技巧之如何組織和注釋CSS文件

來源：程序員人生發布時間：2014-02-08 12:58:02 閱讀次數：2692次

關于如何組織和注釋CSS文件,有很多方法,但是哪一種方法最好,卻沒有答案,這要靠你自己在工作中慢慢的去思考了.如果你有更好的方法請告訴大家讓大家一起分享.....

當我們的樣式表變得很大和很復雜時,按整潔易懂的結構組織它是非常重要的.組織樣式表可以讓我們寫出更有效率的CSS,并讓其他人容易明白和編輯的CSS樣式.當然,每個設計師都會有自己所鐘愛的方式.

1.通過位置來組織

有些設計師喜歡用區塊來組織他們的樣式規則,所有的#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分部分

通過結合CSS注釋,部分標記和把破折號作為分隔符的方法可以很容易地給CSS劃分不同的部分.這樣可以幫助你和以后的開發人員找到某個規則,并理解那些規則運用到了設計的哪部分上

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

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

3.用元素來組織

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

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

直接在注釋部分標記文本之前添加簡的標記,比如字符"=",能讓我們更容易地找到并跳轉到那個段落.

/* =p */

用我們的文本編輯器的尋找命令去尋找"=p",可以忽略list-style-type或padding這樣無效果,直接跳轉到段落部分.

5.把CSS分成多個文件

對于人們對最終產品中,一個鏈接的或導入的CSS文件是不是比多個獨立的文件更于便于管理這一點存在爭議,你可以具體情況具體分析來得到最好的答案.可以明確的一個事實是:在創建交互原型時,使用多個文件有明顯的優勢.

舉例來說,你們可以把設計原型拆分到以下獨立文件中.

1)布局樣式包含了顯示屬性;浮動;定位;寬度;高度;填充和邊距(layout.css).

2)顏色樣式包含了背景屬性;顏色;圖像;以及文本顏色(color.css).

3)版式信息包含了字體和字體大小,行高,字符間隔和文本裝飾(type.css).

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

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