淺析網站開發CSS架構

　　及現在的

　　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分離 及合并的方法，對工作效率的提升，自己有切身的感受到，只是沒有應用單獨庫的概念。樣式中，通用庫，公共庫，重置等都是在一個頁面中。

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

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