前言
在現在的互聯網業務中，前端開發人員往往需要支持比較多的項目數量。很多公司只有 1-2 名前端開發人員，這其中還不乏規模比較大的公司。這時前端同學就需要獨擋一面支持整個公司上下的前端業務，項目如流水一般從手里流過，此時更需要前端開發人員將工作工程化、流水線化。
本博文在發布之后有些爭議，有人認為如此書寫 css 並不規范。這點我認同，但不少框架也采用了這種方式，提升的開發效率也是明顯的。希望大家對這種思想去其糟粕，取其精華，過度使用必然導致可維護性下降，但絕對使用單一類名也不現實。最后祝大家工作順利。
一個栗子
現在需要編寫頁面中的一個按鈕，結構與樣式如下：
<div class='button'>開始</div>
有人說，這有什么難的，不到1分鍾就能寫好了：
.button { width: 100px; height: 40px; font-size: 16px; text-align: center; line-height: 40px; color: #fff; background-color: #337ab7; border-radius: 6px; cursor: pointer; }
但如果這個項目中有50個大小不一的這樣按鈕怎么辦？有人會說，那把 button 抽象成公共類名的不就好嘍，就像下面這樣：
<div class="button btn-begin"></div>
.button { font-size: 16px; text-align: center; line-height: 40px; color: #fff; background-color: #337ab7; border-radius: 6px; cursor: pointer; } .btn-begin { width: 100px; height: 40px; }
沒錯，這種確實是比較普遍的方法。但問題是，下一個項目風格改變，我們用不到 button 的公共樣式了。所以這種方式不適合流水線作業，也不在本篇的討論范疇中。
現在我們編寫了一個 base.css，它也就是標題所說的我們寄幾的基礎 css 庫，也是真正意義上的公共樣式。假設 base.css 中已經定義好了以下幾個樣式類：
.f-16 { font-size: 16px; } .c-white { color: #fff; } .text-center { text-align: center; } .radius-6 { border-radius: 6px; } .cursor { cursor: pointer; }
更改結構：
<div class="f-16 c-white text-center radius-6 cursor button">開始</div>
這樣我們只需寫少許 css 就能完成 button 的樣式。
.button { width: 100px; height: 40px; line-height: 40px; background-color: #337ab7; }
· 如上，當公共的樣式定義的足夠多時，可以極大的增加我們的開發效率，尤其是官網以及 CMS 這樣較大的項目，效果更加明顯。甚至某些結構只需要通過已有的樣式類名進行組合就能完整實現，而不需要另外起名並單獨編寫 css。
· 在實際生產中，你還可以動態擴展 base.css，比如項目的設計剛到手上時，發現使用 #c9c9c9 顏色的字體比較多，就可以在 base.css 中加入 .c-c9 { color: #c9c9c9 }。
· 市面上的 css 庫數都數不清，為什么還要大家寄幾編寫呢。主要有以下幾點：1. 有人可能會這樣想：“我 CSS 基礎這么好，讓我用別人寫的？鬧呢！”；2. 別人的庫可能有很多冗余的、自己用不到的樣式，白白增加項目體積；3. 別人的庫需要學習成本，自己寫的不僅符合自己的 css 書寫習慣，起的類名也是自己最好記的。
拋磚引玉
上面說了那么多，下面列舉下我個人在平常用的比較多的公共樣式，先付上源碼。
內外邊距初始化
html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input, textarea, ul, ol, li, hr { margin: 0; padding: 0; }
用 * 的同學回爐重造哈，：）
去除 list 默認樣式
ul, ol { list-style-type: none; }
去除 a 標簽默認樣式
a { text-decoration: none; }
左右浮動
.l { float: left; } .r { float: right; }
兩種常用背景圖展示
.bg-img { background-position: center; background-repeat: no-repeat; background-size: cover; } .ic-img { background-position: center; background-repeat: no-repeat; background-size: contain; }
不同字號字體（實時擴展）
.f-13 { font-size: 13px; } .f-14 { font-size: 14px; } .f-16 { font-size: 16px; } .f-18 { font-size: 18px; } .f-20 { font-size: 20px; }
字體粗細
.f-bold { font-weight: bold; } .f-bolder { font-weight: bolder; }
字體顏色（實時擴展）
.c-white { color: #fff; } .c-black { color: #000; }
行高（實時擴展）
.lh-100 { line-height: 100%; } .lh-130 { line-height: 130%; } .lh-150 { line-height: 150%; } .lh-170 { line-height: 170%; } .lh-200 { line-height: 200%; }
元素類型
.inline { display: inline; } .block { display: block; } .inline-block { display: inline-block; }
box-sizing
.border-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
清除浮動
.clear { clear: both; }
超出隱藏
.overflow { overflow: hidden; }
字符居左/中/右
.text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; }
字體超出隱藏，以省略號代替
.text-overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
首行縮進2字符
.text-indent { text-indent: 2em; }
強制文字換行
.text-wrap { word-wrap: break-word; word-break: normal; }
常用的3種定位方式
.absolute { position: absolute; } .relative { position: relative; } .fixed { position: fixed; }
浮動光標改變
.cusor { cursor: pointer; }
上面例舉了一部分公共樣式，希望能給大家一些啟發。命名和抽象方式可以按照自己的喜好來，將平常工作中用到的樣式慢慢積累，很快就會擁有自己專屬的強大 css 基礎庫。祝大家都能做好自己業務的工程化，流水化，下一篇博文是跟大家分享寄幾的公共 JS。
感謝你的瀏覽，希望能有所幫助