DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 網頁制作中該怎麼樣組織維護你的css?
網頁制作中該怎麼樣組織維護你的css?
編輯:CSS詳解     

1:樣式表文件裡面的代碼混亂,隨著項目的進展,樣式表裡面的先有代碼不敢做任何改變,因為連自己也不知道改了以後會給現有項目造成什麼影響。更不敢刪除。因為連自己都不知道此處的樣式到底什麼地方用到了。

2:樣式表文件體積增大,一個頁面即使沒有用到多數的樣式,但仍然只能引用所有的樣式,導致頁面的加載緩慢。

3:樣式表文件裡面的代碼,就像意大利面條(為什麼一定要像意大利的面條?),或者就像中國的蘭州拉面。所有的選擇器類型全部混在一起。甚至出現很多上下的重復和不一致。

4:其他的一些CSS導致的問題。

 

上面的問題是我們頁面制作中最容易遇到的問題。 不可否認,我現在也還經常為這個問題困惑。收集了網上的一些資料,大家可以看下,學習下。

 

可以學下這個方法,例如:

基本分幾個樣式。。
總體公共用的一個。
每個頁面根據結構和表現的不同。
寫一份單獨的。
另外可以考慮用程序來選擇加載與否)

然後 @import ?.css 引入進來。

以上的方法,估計是大家最常用的,目前,我也是用這種方法來管理css樣式的。比較實用。


來,我們根據上面的基本思路,來寫個更細化的結構。

1.公用css組件
全局css,公用css類,css模塊組件
2.布局
頁面的基本布局
3.主題
頁面UI
4.hack
浏覽器兼容
ie6 ie5 ie7之類的條件注釋

網頁制作書寫規范:
命名可以使用中間“-”,"_"符號連接,如text-box,text-content,text_box,或者大小寫“駝峰”式書寫,textBox,textContent等。
注釋很重要,注釋可以分為三級,大類注釋用於css塊的劃分,如header , container , footer,二類注釋,大類下面的局部模塊注釋,三類注釋一個選擇符內注釋,用於一些特殊效果的注釋或者hack注釋。
書寫格式,可以采用橫排縮進的方式,顯示出層級關系。
css文件的分布,如果字節小的話,可以盡量壓縮降低並發連接數,如果字節過大,可以分割,防止下載速度太慢,影響樣式加載。這些就是具體問題具體對待了。比如搜索引擎和門戶首頁這種訪問量極大的頁面最好將css寫入頁面內部。


1.做一個全局使用的CSS,主要是和布局有關的,網站的整體風格往往都是差不多統一的,至少在框架上是不會有太大的異同,所以,可以把布局的樣式單獨分離出來,做為一個基礎,各個細節寫在相應的CSS中,和布局的CSS結合起來使用.好像這個方法比較常用!當在,如果網站規模不是很大的話,這樣似乎也沒有必要,反倒是麻煩了!

 

2.關於樣式的命名,要能容易理解其竟思,比如#nav表示導航,不要用#n1這樣沒有含義的命名,或許小站點你不會覺得有什麼麻煩,但如果構建一個像網易那樣的網站,這樣的命名會讓你限入無底的深淵,所以命名一定要能讓自己看懂,這樣別人接手你的程序需要更改時,也能輕松上手!

 

3.有時我覺得CSS HACK似乎有些麻煩,有些效果FF和IE顯示有不同,那我覺得在這些具體的效果上寫兩個樣式,用JS來判斷一下浏覽器,使用相應的樣式會更好一些,因為有時為了用CSS HACK以達到浏覽器的兼容花費的時間太多,還不如避重就輕,用用JS會不會好一些?

 

4.另外,像程序員那樣,建立自己的CSS代碼庫,這點我覺得有必要強調一下,把一些常用的效果做收集起來,這樣寫的時候直接copy and paste,可以省去不少自己寫的時間,做一些修改就可以了.CSS也可以算是程序,有必要建一個自己的代碼庫,比如鏈接,字體,常用的box的布局等,這些都可以搜集著,方便調用!

 

以上的是一些網頁制作經驗,以及網上收集的一些資料,結合個人的一些體會,大家可以學習下。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved