前言

在現(xiàn)在的互聯(lián)網(wǎng)業(yè)務(wù)中，前端開發(fā)人員往往需要支持比較多的項(xiàng)目數(shù)量。很多公司只有 1-2 名前端開發(fā)人員，這其中還不乏規(guī)模比較大的公司。這時(shí)前端同學(xué)就需要獨(dú)擋一面支持整個(gè)公司上下的前端業(yè)務(wù)，項(xiàng)目如流水一般從手里流過(guò)，此時(shí)更需要前端開發(fā)人員將工作工程化、流水線化。

本博文在發(fā)布之后有些爭(zhēng)議，有人認(rèn)為如此書寫 css 并不規(guī)范。這點(diǎn)我認(rèn)同，但不少框架也采用了這種方式，提升的開發(fā)效率也是明顯的。希望大家對(duì)這種思想去其糟粕，取其精華，過(guò)度使用必然導(dǎo)致可維護(hù)性下降，但絕對(duì)使用單一類名也不現(xiàn)實(shí)。最后祝大家工作順利。

一個(gè)栗子

現(xiàn)在需要編寫頁(yè)面中的一個(gè)按鈕，結(jié)構(gòu)與樣式如下：

<div class='button'>開始</div>

有人說(shuō)，這有什么難的，不到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;
}

但如果這個(gè)項(xiàng)目中有50個(gè)大小不一的這樣按鈕怎么辦？有人會(huì)說(shuō)，那把 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;
}

沒(méi)錯(cuò)，這種確實(shí)是比較普遍的方法。但問(wèn)題是，下一個(gè)項(xiàng)目風(fēng)格改變，我們用不到 button 的公共樣式了。所以這種方式不適合流水線作業(yè)，也不在本篇的討論范疇中。

現(xiàn)在我們編寫了一個(gè) base.css，它也就是標(biāo)題所說(shuō)的我們寄幾的基礎(chǔ) css 庫(kù)，也是真正意義上的公共樣式。假設(shè) base.css 中已經(jīng)定義好了以下幾個(gè)樣式類：

.f-16 {
    font-size: 16px;
}.c-white {
    color: #fff;
}.text-center {
    text-align: center;
}.radius-6 {
    border-radius: 6px;
}.cursor {
    cursor: pointer;
}

更改結(jié)構(gòu)：

<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;
}

· 如上，當(dāng)公共的樣式定義的足夠多時(shí)，可以極大的增加我們的開發(fā)效率，尤其是官網(wǎng)以及 CMS 這樣較大的項(xiàng)目，效果更加明顯。甚至某些結(jié)構(gòu)只需要通過(guò)已有的樣式類名進(jìn)行組合就能完整實(shí)現(xiàn)，而不需要另外起名并單獨(dú)編寫 css。

· 在實(shí)際生產(chǎn)中，你還可以動(dòng)態(tài)擴(kuò)展 base.css，比如項(xiàng)目的設(shè)計(jì)剛到手上時(shí)，發(fā)現(xiàn)使用 #c9c9c9 顏色的字體比較多，就可以在 base.css 中加入 .c-c9 { color: #c9c9c9 }。

· 市面上的 css 庫(kù)數(shù)都數(shù)不清，為什么還要大家寄幾編寫呢。主要有以下幾點(diǎn)：1. 有人可能會(huì)這樣想：“我 CSS 基礎(chǔ)這么好，讓我用別人寫的？鬧呢！”；2. 別人的庫(kù)可能有很多冗余的、自己用不到的樣式，白白增加項(xiàng)目體積；3. 別人的庫(kù)需要學(xué)習(xí)成本，自己寫的不僅符合自己的 css 書寫習(xí)慣，起的類名也是自己最好記的。

拋磚引玉

上面說(shuō)了那么多，下面列舉下我個(gè)人在平常用的比較多的公共樣式，先付上源碼。

內(nèi)外邊距初始化

html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input, textarea, ul, ol, li, hr {
    margin: 0;
    padding: 0;
}

用 * 的同學(xué)回爐重造哈，：）

去除 list 默認(rèn)樣式

ul, ol {
    list-style-type: none;
}

去除 a 標(biāo)簽?zāi)J(rèn)樣式

a {
    text-decoration: none;
}

左右浮動(dòng)

.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;
}

不同字號(hào)字體（實(shí)時(shí)擴(kuò)展）

.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;
}

字體粗細(xì)

.f-bold {
    font-weight: bold;
}.f-bolder {
    font-weight: bolder;
}

字體顏色（實(shí)時(shí)擴(kuò)展）

.c-white {
    color: #fff;
}.c-black {
    color: #000;
}

行高（實(shí)時(shí)擴(kuò)展）

.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;
}

清除浮動(dòng)

.clear {
    clear: both;
}

超出隱藏

.overflow {
    overflow: hidden;
}

字符居左/中/右

.text-left {
    text-align: left;
}.text-center {
    text-align: center;
}.text-right {
    text-align: right;
}

字體超出隱藏，以省略號(hào)代替

.text-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

首行縮進(jìn)2字符

.text-indent {
    text-indent: 2em;
}

強(qiáng)制文字換行

.text-wrap {
    word-wrap: break-word;
    word-break: normal;
}

常用的3種定位方式

.absolute {
    position: absolute;
}.relative {
    position: relative;
}.fixed {
    position: fixed;
}

浮動(dòng)光標(biāo)改變

.cusor {
    cursor: pointer;
}

上面例舉了一部分公共樣式，希望能給大家一些啟發(fā)。命名和抽象方式可以按照自己的喜好來(lái)，將平常工作中用到的樣式慢慢積累，很快就會(huì)擁有自己專屬的強(qiáng)大 css 基礎(chǔ)庫(kù)。祝大家都能做好自己業(yè)務(wù)的工程化，流水化，下一篇博文是跟大家分享寄幾的公共 JS。

感謝你的瀏覽，希望能有所幫助

http://www.cnblogs.com/ghost-xyx/p/7229621.html

延伸閱讀

• CSS外邊距合并問(wèn)題 2017-07-25
• 談?wù)勔恍┯腥さ腃SS題目（十五）-- 談?wù)?CSS 關(guān)鍵字 initial、inherit 和 unset 2017-07-19
• CSS規(guī)范 2017-07-16
• CSS變量variable 2017-07-16
• 【css技能提升】css高級(jí)技巧 2017-07-14
• css加載會(huì)造成阻塞嗎？ 2017-07-13
• Css繪制形狀 2017-07-13
• 【CSS/JS學(xué)習(xí)】如何實(shí)現(xiàn)單行／多行文本溢出的省略（...）--老司機(jī)繞過(guò)坑道的正確姿勢(shì) 2017-07-07
• 【CSS】如何用css做一個(gè)愛心 2017-07-05
• CSS Why 2017-07-04

CSS外邊距合并問(wèn)題