您現在的位置: 网站首頁 / 網站建設 / 正文

淺析網站開發CSS架構

作者: admin 发布: 2014-11-10 21:13:48 分类: 網站建設 閱讀: 次 查看評論

  1 写在前面的

  以下內容是平時工作中所積累形成的,其中不乏帶有個人感情色彩。在此只是闡述及歸納。

  2 整体阐述

  當你是一個從業多年的WEB前端人員,或是開發過大量的頁面,就會發現一個現象,即使不是同一個網站,所定義的CSS中也很多相同的類,當然,不是同一網站沒法合並,倘若是同一個網站,每個頻道,或是一個頻道的每個頁面要都是一套CSS樣式,是不是太浪費了。那麽是不是該把這CSS掰開、揉碎好好的說道說道。CSS架構,這個學術性的名稱就被我引用了。

  在討論整個CSS架構前,我想先來說說CSS本身。衆所周知,CSS的誕生,就是樣式與結構的分離,就代表著精簡與重用。

  在多年前,人们开发网站是,样式都是写在html代码中,维护起来那个繁琐是不言而喻的,有了CSS后,当需要定义一个字体颜色时,就可以:.red { color: #F00; } 页面中凡需要字体为红色时,都可以引用,修改起来也就是一步的事情。同时解放了html代码。

  可隨著網站內容日益豐富,我們已經不能單單只停留在初級的樣式與結構的分離層面。需要對CSS進行解剖,因爲只有深層次的了解它,才能更好的駕馭。

  在對CSS處理的問題上,各個網站的做法都不盡相同。有整個站點就一個CSS文件的,一般符合web2.0標准的,如開心網;有分爲頁眉,頁腳,主體不同部分的;有按個頻道頁面建立樣式的;亦有幾個公共樣式表,其余視不同頁面建立的。更有所有CSS都放在頁面head中的。

  所有這些,並無正確錯誤之分,只有是否適合,畢竟一切做法爲的都是更爲高效簡潔的代碼。

  這裏我想說說自己的做法。一個站點CSS文件分爲:CSS重置庫;通用樣式庫;公共樣式庫;布局樣式庫;按鈕、圖標、表單庫;模塊庫;私有庫。

  除了最後一個,其余都是公共的庫。這樣做雖然是單個頁面的連接數有所增加,但是對于門戶型網站,其整體的開發成本會有大大的降低。不過實現這種開發模式有幾個前提,樣式分離;樣式合並;前後台通力合作。

  3 CSS样式分离3.1 CSS分离

  前面提到过当一个页面需要一个红色的样式时,定义.red { color: #F00; },然后引用就可以了,而这里说的CSS分离,是一个个不同的CSS文件,由多个不同的页面引用,如一个网站的head样式单独一个文件每个页面都引用。不过,这种做法大家都知道,我也不会单单的说这点,这里想说的CSS重用的概念。

  人們都知道錢幣只有1元、5元、10元,以前還有2元,但是不會出現,4、6、7等等,因爲通過前面幾個就可以組合使用了。這個道理很簡單。那麽我們是不是也可以把CSS的屬性拆開。這樣每當需要哪些就引用什麽。

  如<span class=”more”>更多</span>

  .more { display: inline; float: right; margin-right: 10px; color: #F00; font-weight: normal; }

  而拆分後,

  <div class=”fr red fwn mr10”>更多</div>,样式为:

  .fr { display: inline; float: right; }

  .red { color: #F00; }

  .fwn { font-weight: normal; }

  .mr10 { margin-right: 10px; }

  以上4個類有兩個屬于通用類(.fr和.fwn),屬性是沒有變量的,當需要右浮動和非粗體時就用此兩個類。而像此種類別的還有不少,在此列出我平時使用的。

  .fl { display: inline; float: left; }

  .fr { display: inline; float: right; }

  .db { display: block; }

  .di { display: inline-block; }

  .cl { clear: left; }

  .cr { clear: right; }

  .cb { clear: both; }

  .fwb { font-weight: bolder; }

  .fwn { font-weight: normal; }

  .tdn { text-decoration:: none; }

  .tdu { text-decoration: underline; }

  .n1 { text-align: center; }

  .n2 { text-align: left; }

  .n3 { text-align: right; }

  .vm { vertical-align: middle; }

  .vt { vertical-align: top; }

  .vb { vertical-align: bottom; }

  .fa { font-family: Arial; }

  .mo { font-family: "宋体" ; }

  .fa1 { font-family: "黑体" ; }

  .wsn { white-space: normal; }

  .re { position: relative; }

  .ov { overflow: hidden; zoom: 1; }

  这样需要上述的效果时,就可以自由组合的了。样式拆分,有助于精简CSS文件。每个CSS样式的重用性都发挥到极致。后期维护也会轻松多。同时,除了这些类以外,还有颜色,外边距,内间距,这些也是可以单独定义出来的,只是它们的值是变量的。如之前的.mr10 { margin-right: 10px; }

  說了這些,不難發現,CSS樣式越是分離,就可以使每個類重用性發揮到極最大化,CSS代碼就越精簡!不過凡事都不是絕對的,所謂此消彼長,當CSS樣式分離的多了,自然html的代碼就會增加。如:tab選項卡,每個的寬度是自適應的,還有定位的出現,那麽html的代碼就誇張了,且繁瑣,不易維護。這時我們就不能只有CSS分離了;又如一組展示商品頁,所有的li左浮動,若在每處加上的話,顯然不合適。從而,並非是所有的地方都適合使用分離獨立的樣式。從而需要權衡,而具體該怎麽做,如何權衡?說的玄乎點,憑經驗,其實,這確實是一個憑借經驗來判斷的。

  3.2 设计师的配合

  不管設計師與前端開發是否是一人,要想使樣式的分離功效最大化,設計師所扮演的角色至關重要。

  比如區塊間的間距,有10像素、15像素、12像素,邊框一處是#DADADA,一處又是#D4D4D4D等,那麽獨立出的類重用性就大打折扣。

  設計師在設計頁面時,也該有如後台開發人員一樣的模塊意識,有時不能爲了一處的效果好看些,就獨立一處的設計。當然,物極必反,不能全部都統一風格,還是有精細之處。

  3.3 前端工程师的功力

  之所以要分離CSS,其目的爲的是精簡網站的CSS文件,倘若執行者的水平,也就是功力不夠,那麽在分離的同時,亦會增加更多的CSS代碼,如:不能很好的使用最簡單的代碼實現兼容的效果,使用了過多的hack等,反而枉然。從而對CSS理解透徹,對整站CSS進行架構及對分離權衡,至關重要。

  4 CSS样式合并

  說完分離,下面來說合並,似乎這兩者有沖突,實際,目的是一致的,都是爲了使CSS精簡。

  CSS样式合并,就是对一些不能分离的样式,如背景图片,将公共的部分合并,非公共的部分分离独立出来,我常用的是应对于 CSS Sprites,看下图

  

  微博頁面中對背景圖樣式進行了合並,倘若不這樣,那增加的CSS代碼量就驚人了。當然這種做法,是普通的,也是大家使用最多的。這裏想說說另外一種樣式合並。我稱它爲“組合式”樣式。

  4.1 CSS分离与合并(组合)

  这一观点,也是我使用了样式分离后,慢慢的在项目中发现的。之前说到了CSS通用库,它就似“孙悟空”,跳出三界外,不在五行中。通用类的属性都是CSS所固有的,非变量的。而还有一些分离出来的类,原先我也是放在通用库中,如mt10: margin-top:10px; cor_1: #666;而现在我把它分离出通用库,称之为基本样式库。

  分離一般使用在那些非模塊化的元素,這裏說的合並就該是應用于模塊化的元素。這裏先跑下題,解釋下模塊化元素。其實是我沒說清楚,我說的模塊不是通常意義上如網站頁眉,頁腳等,而是頁面中的一個特定區塊,如按鈕、文本框、全站公用圖標,這些模塊是不宜使用樣式分離的。

  舉個例子:

  這裏我想再引入一個概念柵格化布局,具體什麽不多說,只是因爲這是個前提,我通常采用的是24欄寬度950的布局。說這個是解釋後面舉例中這些數值的來曆。

  在定義獨立的樣式時,會定義大量乘40減10的寬度值,如230,190.270,510等,

  .w1 { width: 230px; }

  .w2 { width: 190px; }

  .w3 { width: 270px; }

  那么当有一个层宽度刚好是230时,<div class=”w1”></div>

  這個看似完美,其實隱患很多。後期一旦某一天要改變寬度,230改成240,單改w1的類,那麽所有引用它的都會變,顯然不行。怎麽辦,以前我的做法是,找這個div父層中的類,比如可能是在main層下面,那就再加個樣式

  .mian w1 { width: 240px; }

  可是也可能main下有几个层都用到了w1,而只能改一个。怎么办,放在以前我会单独的给这个层命名,如side,然后单独定义宽度。其实这种做法离我要表达的合并的概念很近了。而现在我同样是给这个层命名side,但是不去定义它的宽度,而是直接<div class=”side w1”></div>

  这样,在没有更改的情况下,它依然是宽度230,而当有变化时。定义.side{width: 240px; } 因为基本样式库在页面引用时在上面,而页面特有样式在下面,按照CSS的权重,后定义的权重大。这样做,既保证了CSS样式分离,对于模块化元素又解除了隐患,同时使得这个模块有了语义化的名称。

  5 CSS架构

  在說了這些前提後,就可以來說說我寫本文的目的了,CSS的架構。

  其實關于這點,前輩們又很多的做法,本文的開頭提過。對于符合web2.0的網站,我是只用一個CSS文件,因爲風格統一,不管頁面有多少,CSS文件可以控制的非常小,而且高性能,同時頁面擴展性也非常好。但要是門戶型,就不適用了。那麽就需要一個拆分,也就是架構了。

  1、CSS重置庫

  2、通用樣式庫

  3、公共樣式庫

  4、布局樣式庫

  5、按鈕、圖標、表單庫

  6、模塊庫

  7、私有庫

  5.1 CSS重置库

說到這個,從最初級是不定義,到*{ margin:0; padding:0 }一棒子打死,再到body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td
{ margin: 0;padding: 0; }

  及現在的

  body, dl, dd, h1, h2, h3, h4, h5, h6, p, form, pre, textarea { margin: 0; }

  ol, ul { margin: 0; padding: 0; }

  td, th, input { padding: 0; }

  同時還會定義一些輔助的

  input,select,textarea,button { vertical-align: middle; border: none; background: #FFF; }

  br { line-height: 0; font-size: 0; }

  li{ list-style-type: none; }

  img { vertical-align: top; border: 0; }

  ul,ol { list-style: none; }

  pre { text-align: center; white-spacere-wrap; word-wrap: break-word; }

  em,i { font-weight: normal; font-style: normal; }

  table { border-collapse: collapse; table-layout: fixed; width: 100%; }

  td,th { word-wrap: break-word; word-break: break-all; overflow: hidden; }

  樣式重置的目的是爲了清除一些浏覽器樣式不統一的地方。

  5.2 通用样式库

  前面已经展示,这里只说说命名。这些命名是我的习惯,各位可以根据自己的命名标准。我一般使用属性的首字母命名。如float:left,那么这个类就用fl。同理.tdu 就代表.tdu { text-decoration: underline; }。

  5.3 公共样式库

  這一塊其實和通用庫差不多,但是由于其定義的值爲變量。如外上邊距10px

  .mt10 { margin-top: 10px; }

  內下間距10px

  .pb10 { padding-bottom: 10px; }

  字體

  .fa { font-family: Arial; }

  大小

  .fz14 { font-size: 14px; }

  還有行高,左右外邊距等等。

  5.4 布局样式库

  这里面定义一些网站的公用版块,页脚、页眉 ,以及网站使用的一些常规布局。

  還想在說說柵格化布局。倘若使用了柵格化布局,那麽每個版塊的寬度就是一定範圍且是有規律的值。那麽就可以在這裏定義一系列寬度值了。這裏只是強調,至于柵格化布局的始末,我會單獨說明。

  5.5 按钮、图标、表单库

  对于网站的图标,可以集中到一张图上,当然这些图标是使用率高的,各频道都会使用的。做法可以参照之前说的CSS Sprites。

  當若不是BS結構的頁面。表單,按鈕等也會不多,可以不單獨定義。

  5.6 模块库

  收集網站的一些公用的分頁、評論等,這裏就需要設計、前端、後台通力合作,才能使模塊庫建立起來。

  5.7 私有库

  聽這麽名字就知道,是頁面所特有的樣式。屬于微調。也就是一個頁面加載上述庫之後需要完成的。我相信前面的工作完成後,這塊就是小工作了。同時,之前所說的分離,有些地方不適合使用分離樣式時,那就需要在每個頁面的私有庫裏定義。

  6 最后想说的

  這一設想的完成,最重要的還是反複強調的各人員間的合作。第二點,也就是前端的水平,倘若CSS理解不透徹,對樣式分離把握不娴熟也是很難達到理想效果的。

  其實我現在的水平還是有限的,上升的空間還很大。同時這些觀點也是工作中及在前人的肩膀上總結慢慢形成的。這些並不是真理,其中不乏有錯誤的地方。您在閱讀後發現有不合理的地方,歡迎指出。

  对于现在工作想说的:我这并不是说这套模式就应该到现在网站开发中,因为开发模式的改版,意味着变革,变革这东西,向来阻力大。且不见得就是对的。而我现在在工作中,其实已经使用了CSS分离 及合并的方法,对工作效率的提升,自己有切身的感受到,只是没有应用单独库的概念。样式中,通用库,公共库,重置等都是在一个页面中。

  而一旦使用這套模式,在前期,怎樣建立好這套樣式庫,還是需費一些精力的。

  這裏是對平時工作中一些零散理論,技巧的一個總結,由于文字功力的限制,會有表達不當之處。

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞: CSS  HTML  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表