淺析網(wǎng)站開發(fā)CSS架構(gòu)

　　及現(xiàn)在的

　　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; }

　　同時(shí)還會定義一些輔助的

　　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; }

　　樣式重置的目的是為了清除一些瀏覽器樣式不統(tǒng)一的地方。

　　5.2 通用樣式庫

　　前面已經(jīng)展示，這里只說說命名。這些命名是我的習(xí)慣，各位可以根據(jù)自己的命名標(biāo)準(zhǔn)。我一般使用屬性的首字母命名。如float：left，那么這個(gè)類就用fl。同理.tdu 就代表.tdu { text-decoration: underline; }。

　　5.3 公共樣式庫

　　這一塊其實(shí)和通用庫差不多，但是由于其定義的值為變量。如外上邊距10px

　　.mt10 { margin-top: 10px; }

　　內(nèi)下間距10px

　　.pb10 { padding-bottom: 10px; }

　　字體

　　.fa { font-family: Arial; }

　　大小

　　.fz14 { font-size: 14px; }

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

　　5.4 布局樣式庫

　　這里面定義一些網(wǎng)站的公用版塊，頁腳、頁眉 ，以及網(wǎng)站使用的一些常規(guī)布局。

　　還想在說說柵格化布局。倘若使用了柵格化布局，那么每個(gè)版塊的寬度就是一定范圍且是有規(guī)律的值。那么就可以在這里定義一系列寬度值了。這里只是強(qiáng)調(diào)，至于柵格化布局的始末，我會單獨(dú)說明。

　　5.5 按鈕、圖標(biāo)、表單庫

　　對于網(wǎng)站的圖標(biāo)，可以集中到一張圖上，當(dāng)然這些圖標(biāo)是使用率高的，各頻道都會使用的。做法可以參照之前說的CSS Sprites。

　　當(dāng)若不是BS結(jié)構(gòu)的頁面。表單，按鈕等也會不多，可以不單獨(dú)定義。

　　5.6 模塊庫

　　收集網(wǎng)站的一些公用的分頁、評論等，這里就需要設(shè)計(jì)、前端、后臺通力合作，才能使模塊庫建立起來。

　　5.7 私有庫

　　聽這么名字就知道，是頁面所特有的樣式。屬于微調(diào)。也就是一個(gè)頁面加載上述庫之后需要完成的。我相信前面的工作完成后，這塊就是小工作了。同時(shí)，之前所說的分離，有些地方不適合使用分離樣式時(shí)，那就需要在每個(gè)頁面的私有庫里定義。

　　6 最后想說的

　　這一設(shè)想的完成，最重要的還是反復(fù)強(qiáng)調(diào)的各人員間的合作。第二點(diǎn)，也就是前端的水平，倘若CSS理解不透徹，對樣式分離把握不嫻熟也是很難達(dá)到理想效果的。

　　其實(shí)我現(xiàn)在的水平還是有限的，上升的空間還很大。同時(shí)這些觀點(diǎn)也是工作中及在前人的肩膀上總結(jié)慢慢形成的。這些并不是真理，其中不乏有錯(cuò)誤的地方。您在閱讀后發(fā)現(xiàn)有不合理的地方，歡迎指出。

　　對于現(xiàn)在工作想說的：我這并不是說這套模式就應(yīng)該到現(xiàn)在網(wǎng)站開發(fā)中，因?yàn)殚_發(fā)模式的改版，意味著變革，變革這東西，向來阻力大。且不見得就是對的。而我現(xiàn)在在工作中，其實(shí)已經(jīng)使用了CSS分離 及合并的方法，對工作效率的提升，自己有切身的感受到，只是沒有應(yīng)用單獨(dú)庫的概念。樣式中，通用庫，公共庫，重置等都是在一個(gè)頁面中。

　　而一旦使用這套模式，在前期，怎樣建立好這套樣式庫，還是需費(fèi)一些精力的。

　　這里是對平時(shí)工作中一些零散理論，技巧的一個(gè)總結(jié)，由于文字功力的限制，會有表達(dá)不當(dāng)之處。