寫在前面
都是自己看別人的架構，自己積累下來的一些東西，這里只是闡述自己的一些觀念。借此希望同行交流交流下看法，共勉。
不同架構的CSS
業務流程不同，團隊配員不同。會有各種各樣的CSS架構。
有的會分為：header.css，body.css，footer.css
有的會分為：reset.css，main.css，content.css
有的會分為：common.css，然后每個種類再單獨划分，比如：首頁（index.css）,分頁（page.css）
有的直接嵌入到HTML代碼中
這些處理方式，只能是適不適合，沒有真正的對錯之分。
之前做的項目CSS架構的一些問題
上一家公司做的是商城網站，最開始剛接手的時候，sAss 編寫的。那會還不是很懂sAss，簡單的了解下還是挺好上手的。
坑1：每次改的小東西樣式，都得先編譯下，雖說有自動編譯，對小調整開說不夠暢快
坑2：當時編譯后是合成到一個css文件，最終呈現的130K左右（未壓縮）
坑3：看編譯后的css文件，會發現編譯后的css層級有些會特別長，看你寫的代碼耦合程度了。
后來我索性就拋棄的Sass（可能還沒挖掘到Sass的好處吧）
1、當時的程序目錄結構是跟后台的模塊控制器一一對應建文件夾的。我css也就根據模塊控制器划分。比如：控制器（home）->首頁（index），分頁（page）...
2、划分為基礎的
base.css（包含瀏覽器reset，網站基本的header、footer、paging。。）
public_home.css（模塊home下面通用的樣式）
home_active（模塊home下面active樣式）
3、這么架構的好處（對於這個項目）
每個頁面最多只會引入3個CSS文件，相對體積都比較小
對於之后協同辦公，不同的人員改不同的模塊，不會沖突
相對之前的，css架構沒有按照模塊划分，要找到響應的點去修改樣式的並不是很容易找，按模塊划分小塊后，比較容易找到對應的代碼
新增模塊的話，編輯代碼的話比較不會和其他的沖突
現在我是如何架構的
現在的話換了家公司做游戲網站，可能比較傾向使用一個css文件，對於class命名規范化，統一標准。
使用單css文件，會不會隨着網站頁面增加，相對的css大小會增加。其實不然。
網站如果規划好的話，風格一致，css是可以控制到非常小的。但是類似上面說的商城就不適用了。
CSS內部結構划分
下面慢慢闡述細節~~
CSS reset
CSS reset，為了是保證各個瀏覽器的統一。但是有些CSS reset是沒必要的，有時太多的重置代碼反而會正佳頁面的重寫（overwrite）。像*｛margin個:0;padding:0｝更是不可取。像上面的reset,我只是針對該項目下常用的標簽簡單的重置下，有些大網站的reset寫的很細，但是很多標簽我們並不是都會用到。所以我們只要取我們常用的，需要的設置reset就可以了。樣式精簡，而且也高效。
base 基礎模塊
我們網站基本的框架，頂部、頭部、底部單獨提取出來，統一base命名。獲取你會覺得用base_前贅不是增加代碼的大小的？
1、我是這么考慮的統一塊的編寫，方便以后好維護，如果是多人協助，會比較好改動，也比較明確這塊css代碼主要是做什么用的。
2、減少名字沖突，下面會講到。
3、如果頁面改動的話，方便刪除整塊的代碼。
global公共樣式
主要是單一的一段css代碼，沒有層級。
1、一般我們網站都會有個主體是要居中顯示就想上面的global_body三個樣式就會經常用。
2、global前綴，不知道是不是有點多此一舉。主要思想也是語義話class樣式名。
common常用屬性
就是所謂的原子類，之前一直挺排斥這種寫法的。主要原因也是那時認為這么寫的話：有時后改個小樣式，都得來回看，沒辦法找到對應的css塊直接在塊上面修改。現在想這么寫了主要是精簡代碼：
1、上面的有些樣式是不是有些是挺經常用的，何不有及的結合起來，精簡CSS大小。
2、html嵌套原子類的話，原則上最好不要超過3個，比如html看起來會顯得比較臃腫。
3、實用原子類，有助於統一效果。有時候設計獅設計的 同個色值可能偏差些色系，導致我們吸取的色值不一樣。但其實設計的是要統一的。實用原子類，我們吧常用的色值放一起，就比較不會出現整個網站色值不統一...
public公共模塊
像類是的側邊模塊，很多個頁面都會用到，我就會用public_包起來，這個是有層級的。
命名規則
1、命名規則，語義化命名。之后的層級前贅取父級的首字母組合，再下一層級類推；例如：sort_order-》so_class-》soc_active
2、這樣的命名，減少層級（下面會講到少層級的好處）。你可能會問這樣不是會很容易命名沖突？其實只有前綴適合，是不會有這問題。我整一個網站下來，還沒碰到過。
3、層級明確方便修改，也方便加上html。有時后端的程序員可能不小心把我們的html結構搞亂了，我們可以根據css的層級還原。
4、減少命名困難。
小結
准則1：對網站同樣樣式使用global_或者原子類（1~3個屬性）。
准則2：少層級，提高渲染速度。css渲染速度是從右到左的，減少層級對渲染速度是有提升的。
<div id="test"> <ul class="test"></ul> </div>
#test test{}，ul.test{}，#test ul{}，.test{}哪個渲染速度最快？
如果單純的ul與.test PK，我還真拿不定誰的渲染速度更快些。但是，一旦牽扯到層級與標簽，我100%確定，.test這種最直接的命名方式渲染效率是最高的。
准則3：無ID，區分開JS與CSS，寫js中如果突然想改下ID的名稱，有得改CSS是不是很累。
准則4：少標簽，li.list{}這樣的寫法是很慢的。
多說兩句
上面寫的這些，在我實際項目使用中，暫時還沒發現什么問題，現在團隊前端只有我一個，代碼也考慮到了多個前端的情況。之后有啥改動在來探討下經驗。
上面的結論，都是我個人的一些觀點，經驗只談。有什么詫異之處還忘指點一二...
每個人的成長環境不同，工作環境不同，比然會在某些問題的看法上有許不同。
歡迎交流討論。
小tip：css的渲染速度測試：http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/