CSSframework可以更快速、有效、可擴展的去書寫站點的CSS代碼。在Vevb.com以前的文章中,我們有過多篇此類知識的介紹,以下是個某個知名團隊在日常開發中的思考與總結,可能您會提出一些不同的觀點,沒關系,歡迎發表評論,和Vevb.com的眾多CSSer一起探討吧!
一、CSS框架
中國的互聯網行業已經發展了10年,瀏覽器也從最早流行的NS到現在的FF3.IE7等等……前端開發工程師的職位也誕生了。近幾年在web開發中,有個非常火的詞——“框架”。YUI、JQuery、Prototype這些javascript框架在開發網站時,確實成為前端開發工程師的手中利器。為什么呢?因為框架是包含工具、函數庫、約定,以及嘗試從常用任務中抽象出可以復用的通用模塊,讓設計師與程序員避免重復開發。通俗地講便是把大多數重復工作的時間給節約了。
編寫css也是一樣,從最初只是定義文字顏色、內容排版,到現在定義所有的表現。css框架也漸漸被重視了,因為大家都認識到:從具象的表現中抽出抽象的模塊來重復使用,是減少用戶下載、方便團隊及個人開發最重要的手段。
二、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-textsquare”,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實現的話,這個成本太大了點。
新聞熱點
疑難解答