關於如何組織和注釋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@規則導入附加樣式表.
引用的樣式表必須出現在其他規則之前,樣式表的頭部,這樣才能保證正常的效果.
@import url(color.CSS);
@imporp url(type.CSS);
[ remaining layout.CSS rules]
迄今為止,我們已經學會使用表意的標簽和CSS創建可交互的原型,幫助完成輕量,表意的代碼,容易理解的內容,以及靈活的設計,還可以幫助我們更有效率地和同事以及客戶溝通.
-----摘自:<超越CSS：Web設計藝術精髓>
----------------人生如同一場戲，既然都是唱，都要花費同樣的力氣，還不如選個大舞台、好角色，痛痛快快演一場。-------------------------