CSS framework日常開發的經驗總結

2021-10-03 08:11:11 字數 2415 閱讀 5284

二、css框架的開發順序

1、格式化 reset.css 

格式化css的真正好處是能夠快速啟動工作,你可以在新的html檔案裡引入框架,不用再處理重置padding 和 margins,實現統一的排版、瀏覽器下的相同表現。 

2、布局 layout.css 

定義頁面是二欄還是三欄,是全屏還是1024×768…… 

乙個**的設計可能有很多種布局,但是大多數都是由幾個具有復用性的布局組成,選擇性的引入所需要的布局,可以很快地應用所期望的頁面布局。 

3、基本樣式 type.css 

定義body、h1-h6、a:link-a:active、p等的字型大小和顏色。 

基本樣式的css引用,譬如將ul定義class為「ul-text」,用來展現相同的icon、行間距、鏈結色彩。 

還可以像這樣應用:class=」ul-text square」,li前展現的是方型的icon。 

4、**修飾 table.css 

定義table、tr、td、th、thead、tfoot、tbody、caption等標籤的表現。 

和基本樣式一樣,但是**在現有**的展現形式幾乎都是處理資料,所以分開存放引用。譬如在table上應用table-style-1便是黑色邊框的**,table-style-2便是黃色邊框的**。 

5、表單修飾 form.css 

定義fieldset、label、button、input 、select、textarea這幾個標籤的表現。 

大多數**的表單、按鈕、輸入框幾乎都是一樣的。之所以引入這個css,是為了便於統一在各個瀏覽器中的展現。預設的按鈕、輸入框等在各個瀏覽器下的展現區別很大,雖然在格式化的css中已經初步的統一,但是輸入框的邊框,按鈕的樣式都是需要在這個css中定義的。無奈的是select無法做到統一,如果考慮到用js實現的話,這個成本太大了點。 

6、列印修飾 print.css 

修飾列印輸出的頁面。 

7、包含其他css的css 

frontpage.css、list.css、detail.css、register.css等等 

根據各種引用去引入相應的css。譬如list頁面中沒有需要**的修飾,那就不引入table.css。以節約**量。 

三、css框架資料夾的建立

1、core 主要的 

存放reset.css、layout.css、type.css、print.css 

2、bud 模組 

存放table.css、form.css、album.css等css 

3、petal 具體應用 

存放封裝過的css。frontpage.css、llist.css、detail.css、register.css等css。這個資料夾存放的css都是被直接引用的。 

資料夾的命名,按個人喜好啦! 我還希望用電子、質子等命名呢。嘿嘿! 

四、css框架的優點

1、提高開發效率。 

2、規範名稱定義,便於維護。 

3、規範專案開發流程 

4、css**更清晰、簡單。html**更合理。 

五、css框架的弊端

1、學習成本提高。你需要了解整個框架,需要閱讀框架的文件。 

2、css框架對於乙個小專案等頁面來說很臃腫。框架中可能有大部分你用不到的**。 

3、可能會無法幫助你的技術提高。太依賴框架,以至於很難排除bug。包括框架中本身就帶的bug。 

4、選擇自己需要的框架與開發框架都很痛苦。寫到後面發現越來越不靈活,越來越臃腫。殘念 -_- 

六、開發及使用css框架中常遇到的問題

1、頁面外部引用樣式過多。 

譬如關於ul的margin定義,在格式化的css中會宣告為0,而在基本樣式的css中又可能會宣告margin:5px 10px; 

所以在yslow中會出現多次定義。 

2、元件復用性的考量。 

譬如表單定義的css中定義了所有表單的修飾,而假定在註冊這個頁面中只是需要這個css的百分之三十。那是否應切割出去那不要的百分之七十? 

綜合以上的二個問題,個人認為解決的方式便是封裝,讓該有的有,不該有的沒有。儘量減少http連線數和css的大小。但如果徹底是這樣做的話,css的復用性又會變得很差,後期手工的封裝會很痛苦。只能套用小馬的一句話「具體情況,具體分析」。人生真是矛盾啊… 

3、到底該不該支援em? 

可見如要支援em,最大的目的是為了在瀏覽器中可以根據使用者的解析度大小自由縮放,對於擁有超大顯示器的使用者與小顯示器的使用者是非常有用的。可是在採集我們使用者的瀏覽器資料後,發現分辨處於這二端的使用者非常少,可想而知,為這部分的使用者多花比正常開發一倍以上的時間顯然是件不划算的事情,所以當初在開發tbsp的時候,我們團隊就決定了不支援em。當然這是個建議,我們也希望能使用em帶給使用者最好的感受

日常開發技巧 二

經常寫一些比較長的查詢,有時會有幾行,然後發現開頭的地方有錯誤,這個時候可能要按住箭頭,乙個乙個字元地把游標移到開頭去,其實可以用快捷鍵去實現。經常會做這樣的事 在console中查詢乙個物件,忘了把結果儲存在乙個變數裡,然後重複執行。其實每次在console裡面執行乙個命令或者是功能,其返回值都會...

Mysql日常開發注意要點

1 mysql儲存引擎介紹 myisam 低版本mysql預設的mysql外掛程式式儲存引擎,儲存檔案易損壞,不支援事務。innodb 目前預設的mysql儲存引擎,用於事務處理應用程式,具有眾多特性,包括acid事務支援 建表語句建議使用 engine innodb 字段,例如 create ta...

PHP日常開發小技巧

php批量取得checkbox的值 1 命名 2 使用 當計畫當作sql指令的一部分時 如果參與控制的字段是數值型的,則 if empty post checkbox 如果參與控制的字段是數值型的,則 if empty post checkbox php判斷form表單是否提交 if action ...