開始編寫寄幾的 CSS 基礎庫

前言

在如今的互聯網業務中，前端開發人員每每須要支持比較多的項目數量。不少公司只有 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。

感謝你的瀏覽，但願能有所幫助