開始編寫寄幾的 CSS 基礎庫

標籤：soft   oat   怎麼辦   規模   overflow   協助   inpu   border   定義   

前言

在現在的互連網業務中，前端開發人員往往需要支援比較多的項目數量。很多公司只有 1-2 名前端開發人員，這其中還不乏規模比較大的公司。這時前端同學就需要獨擋一面支援整個公司上下的前端業務，項目如流水一般從手裡流過，此時更需要前端開發人員將工作工程化、流水線化。

 

一個栗子

現在需要編寫頁面中的一個按鈕，結構與樣式如下：

<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。

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

 

開始編寫寄幾的 CSS 基礎庫