切圖崽的自我修養－合理組織CSS結構

前言

不要再叫我切圖崽，我很生氣，這樣很不禮貌，請叫我前！端！工！程！師！

從css方面來講，前端工程師和切圖崽的區別，並非指寫單條css技巧的高低，甚至不少工程師在一些css的奇技淫巧都比不上切圖崽. 那切圖崽到底和工程師之間的差異是什麼呢？ 差異是 N年工做經驗 視野，是格局，是從大方向上得出解決問題的能力

工程師們不多說哪一條css具體用到什麼技巧，但確定知道如何將項目按照科學的組織架構好，以及如此架構的原理，優劣性與侷限性. 剩下具體的工做只要交給切圖崽們去作就好

切圖崽在於他的眼界只限那一行一行特定的css. 而對整個項目的文件組織和代碼架構缺少清晰的認識. 一個網站，幾十個頁面，它的css文件時按照什麼邏輯組織起來纔不至於陷入混亂？樣式出bug如何儘快定位問題？

唉，這些問題好難，遠不如無腦切圖來的輕鬆. 是的，世界上歷來不缺無腦作事的人，但爲何你要成爲他們其中之一呢? 一旦認識到這一點，咱們切圖崽就離高大上的工程師又進一步了！

那麼話說回來，一箇中等複雜的web應用，到底它的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 這種形式

1. [ 地基 ] Reset.css用來重置與兼容瀏覽器自帶的一些 一般不是咱們想要的 屬性，好比瀏覽器自帶的 padding與margin 以及 list-style

2. [ 磚瓦 ] Atom.css就是將 網站常常用到 而且 不可再拆分的樣式 進行復用. 試想一下,一箇中等規模的網站 確定不止 有20多個界面，假如每一個頁面用到1次左浮動，咱們要寫20次 float:left ，這顯然違背了DRY——Don't Repeat Yourself的編碼原則

Base.css的設置就是爲了解決以上的兩個問題,從而知足重置+複用

/*reset*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h3,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
}
fieldset,img {
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;font-weight:normal;
}
q:before,q:after {
    content:''
}
abbr,acronym {
    border:0
}




/*atom*/

/*文字*/
.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f20{font-size:20px;}

/*定位*/
.tl{text-align:left}
.tc{text-aligh:center}
.tr{text-aligh:right}
.fl{float:left;}
.fr{float:left;}

/*寬高*/
.w10{width:10px}
.w20{width:20px}
.w40{width:40px}
.w60{width:60px}
.w80{width:80px}
.h50{height:50px}
.h80{height:80px}
.h100{height:100px}
.h200{height:200px}

/*邊距*/
.m10{margin:10px;}
.mt10{margin-top:10px;}
.ml10{margin-right:10px;}
.p10{padding:10px;}
.pt10{padding-top:10px;}
.pl10{padding-left:10px;}

Common.css

接下來咱們來製做窗戶吧 !

地基打好了，磚瓦也有了，如今咱們能夠開始來製做窗戶吧. 窗戶與整個房屋的關係，至關於一個UI組件與整個網站的關係

舉個栗子，不一樣的房屋之間可能用到的窗的樣式是不一樣的， 但針對特定一棟房屋的內部，窗的樣式卻基本是相同的. 因此在同一棟房屋內，咱們是能夠將窗戶進行復用。即，只要刻一個模子作出第一扇窗，那麼其餘的門窗只要照着這個模子來複刻就行了，而用不着每次都從刻模子作起

這也爲何common.css是網站級的緣由，不一樣的網站UI組件可能會差異很大，但同一個網站內部，必定遵循設計一致性原則. 因此common.css的職責就是把網站常常用到的總體樣式 [彈窗、表單、按鈕等] 抽象成UI組件進行復用

UI組件推薦根據功能劃分紅更小的子塊以便可以更好地進行管理，譬如劃分紅 common-form.css, common-btn.css, common-pop.css等

/* common-btn.css */

.lgBtn{...}
.mdBtn{...}
.smBtn{...}
.downloadBtn{...}

/* common-form.css */

input[type="text"]{...}
input[type="radio"]{...}
input[type="checkbox"]{...}

/* common-pop.css */

.msgPop{...}
.errPop{...}
.loadingPop{...}

---

Page.css

來點定製化的東西 !

門窗都弄好了，應該往房間裏掛上一兩副裝飾畫來彰顯本身的品味修養. 我我的比較喜歡二次元大胸萌妹子，因此固然在臥室掛滿了AKB48的海報. 可是若是把她們掛在客廳，就不太合適了. 客廳確定只能掛［ 財源廣進 ］［ 家和萬事興 ］［ 八駿圖 ］之類的阿摔！

若是說common.css的職責就是將網站內的 高度重用的總體樣式 抽象成UI組件實現複用，那麼對於網頁內的 非高度重用的樣式 我就把它們放在page.css裏

/* page.css */

/* index */
container .banner1{...}

/* contact us */
container .banner2{...}

/* about us */
container .banner3{...}

---

結語

在這個sass大行其道，各類組件框架層出不窮的時代，可能本文略顯過期.更但願借鑑前人的開發經驗以及基礎，從而更好的運用到現有的框架中去.

有關模塊化css, 命名， 繼承和組合的優劣性問題，就放在下一篇文章來講

文章參考自：編寫高質量代碼－Web前端開發修煉之道