https://www.cnblogs.com/liaohongwei/p/9698687.html （CSS寫作規範）
如何組織css架構
一般來說，css推薦採用
-
page.css ［頁面級］
-
common.css [網站級]
-
base.css ［通用級]
這種自下而上的組織形式.各自的功能和定義如下:
-
page.css ［某個特定的頁面的特定樣式］
-
common.css［抽象出網站通用的組件樣式］
-
base.css ［提供樣式的reset以及原子類功能］
Base.css
如果把寫css看作建造房屋，那麼base.css相當於地基＋磚瓦
base.css和具體UI沒有關係，它具有高度移植性，從而能夠被任何風格的網站所引用. 一般來說base.css會採取 reset + atom 這種形式。
-
[ 地基 ] Reset.css（網上可以找到很多知名網站的reset.css做參考）
很多HTML標籤在瀏覽器裏有默認的樣式，例如 p 標籤有上下邊距，strong標籤有字體加粗樣式，em標籤有字體傾斜樣式。不同瀏覽器的默認樣式之間也會有差別，例如ul默認帶有縮進的樣式，在IE下，它的縮進是通過margin實現的，而Firefox下，它的縮進是由padding實現的。在切換頁面的時候，瀏覽器的默認樣式往往會給我們帶來麻煩，影響開發效率。所以解決的方法就是一開始就將瀏覽器的默認樣式全部去掉，更準確說就是通過重新定義標籤樣式，把瀏覽器提供的默認樣式覆蓋掉。
2. [ 磚瓦 ] Atom.css（可以根據自己的習慣或者公共習慣進行編寫）
將 網站經常用到 並且 不可再拆分的樣式 進行復用. 試想一下,一箇中等規模的網站 肯定不止 有20多個界面，假如每個頁面用到1次左浮動，我們要寫20次 float:left ，這顯然違背了DRY——Don't Repeat Yourself的編碼原則。
例如：/*文字*/
.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
Common.css
接下來我們來製作窗戶吧 !
舉個栗子，不同的房屋之間可能用到的窗的樣式是不同的， 但針對特定一棟房屋的內部，窗的樣式卻基本是相同的. 所以在同一棟房屋內，我們是可以將窗戶進行復用。
這也爲什麼common.css是網站級的原因，不同的網站UI組件可能會差別很大，但同一個網站內部，一定遵循設計一致性原則. 所以common.css的職責就是把網站經常用到的整體樣式 [彈窗、表單、按鈕等] 抽象成UI組件進行復用
UI組件推薦根據功能劃分成更小的子塊以便能夠更好地進行管理，譬如劃分成 common-form.css, common-btn.css, common-pop.css等
Page.css
來點定製化的東西 !
門窗都弄好了，不同的房間按照其功能或特色定製自己的軟裝。
如果說common.css的職責就是將網站內的 高度重用的整體樣式 抽象成UI組件實現複用，那麼對於網頁內的 非高度重用的樣式 我就把它們放在page.css裏。