前言
Coding 應當是一生的事業，而不僅僅是 30 歲的青春飯
本文已收錄 GitHub https://github.com/ponkans/F2E，歡迎 Star，持續更新
前端問後端：為啥做後端不是前端？
後端：你們前端簡直是玄學，CSS 簡直玄學，有一次我調個樣式，死活調不好！！
一些重複常用的CSS，確實沒有必要重複寫，封裝成公共的CSS 檔案，放到 CDN，用的時候，直接引入用就行。
其次，如果同樣的樣式，每個人都去自己寫一套，不同的團隊都各自去寫一套，那麼長遠來看，是很不好的一件事情。對新人後面看程式碼，也不友好~
架構圖
其實 CSS 也是有架構可言滴，比如reset.css，不過本文主要說下一lib.css。
簡單說一下：
- reset.css，css 重置嘛，但是要注意的是，沒必要的就不要寫到裡面去了
- lib.css，常用、公用的一些 css 樣式
圖片
這裡先稍微提一嘴，後續專門出一篇講企業中圖片處理的問題，比如頭部大 banner 怎麼搞？圖片太大了怎麼搞？
首先，UI 提供給前端的同學儘量規範，其次公司應該有圖片 CDN 上傳平臺，上傳的時候，CDN 這邊會進行一次壓縮，具體怎麼壓，壓到什麼程度，下次彙總一起講。
今天主要是簡單說一下 lib.css 應該包含哪些最基本的部分。
分類
按照平常使用頻率最高的CSS，進行分類處理
display
.dn { display: none; }
.di { display: inline; }
.db { display: block; }
.dib { display: inline-block; }
複製程式碼height
根據自己公司日常設計稿，使用最多的尺寸處理，我司12 到 20 用的較多，且一般是以 2 為間隔。
height
.h12 { height: 12px; }
.h14 { height: 14px; }
......
.h20 { height: 20px; }
複製程式碼line-height
.lh12 { line-height: 12px; }
.lh14 { line-height: 14px; }
......
.lh20 { line-height: 20px; }
複製程式碼width
這裡規則，同上 height。
數值
.w10 { width: 10px; }
.w20 { width: 20px; }
......
.w200 { width: 200px; }
複製程式碼百分比
.pct10 { width: 10%; }
.pct20 { width: 20%; }
......
.pct100 { width: 100%; }
複製程式碼margin
.m0 { margin: 0; }
.ml1 { margin-left: 1px; }
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
......
.ml30{ margin-left: 30px; }
......
// margin-right
// margin-top
// margin-bottom
複製程式碼padding
padding 同上 margin即可。
border
我司用的最多的顏色要屬於 #F46 蘑菇紅了~
來，感受一下，還是挺好看滴。
.bdm { border: 1px solid #F46; }
.bde { border: 1px solid #eee; }
......
複製程式碼color
background-color
.bgm { background-color: #F46; }
......
.bge0 { background-color: #e0e0e0; }
複製程式碼color
c0 { color: #000; }
......
c9 { color: #999; }
複製程式碼font
font-size
.f0 { font-size:0; }
.f10 { font-size:10px; }
......
複製程式碼font-style
.fs-n { font-weight: normal; font-style: normal; }
.fs-b { font-weight: bold; }
.fs-i { font-style: italic; }
......
複製程式碼常用
/* 塊狀元素水平居中 */
.auto { margin-left: auto; margin-right: auto; }
/* 清除浮動 */
.fix { *zoom:1; }
.fix:after { display: table; content:''; clear: both; }
/* 單行文字溢位虛點顯示 */
.ell { text-overflow: ellipsis; white-space:nowrap; overflow:hidden; }
/* 絕對定位隱藏 */
.abs-out { position: absolute; left: -999em; top: -999em; }
......
複製程式碼flex
能用 flex 的地方，都用 flex 吧~
.flex { display: flex; }
.inflex { display: inline-flex; }
.f-fd-r { flex-direction: row; }
.f-fd-rr { flex-direction: row-reverse; }
......
.f-ac-sb { align-content: space-between; }
.f-ac-fs { align-content: flex-start; }
......
.f-as-fe{ align-self:flex-end; }
複製程式碼總結
本文已收錄 GitHub https://github.com/ponkans/F2E，歡迎 Star，持續更新
本文只是拋磚引玉，提供一個簡單的思路。
如果你的公司還沒有公共的CSS庫（應該80%以上的公司都有了吧），那可以搞起來了~
PS：具體的細節，比如文章開頭提到的圖片壓縮、顯示的問題，放到前端優化系列來講~
近期原創傳送門，biubiubiu~
- 《吐血整理》系列 大廠前端元件庫工具集合（PC端、移動端、JS、CSS等）
- 《吐血整理》系列 大廠前端必備工具集合（抓包、除錯、Mock資料等等）
- 《大前端進階 Node.js》系列 P6必備腳手架/CI構建能力（上）
喜歡的小夥伴加個關注，點個贊哦，感恩??
聯絡我 / 公眾號
微信搜尋【接水怪】或掃描下面二維碼回覆”加群“，我會拉你進技術交流群。講真的，在這個群，哪怕您不說話，光看聊天記錄也是一種成長。（阿里技術專家、敖丙作者、Java3y、蘑菇街資深前端、螞蟻金服安全專家、各路大牛都在）。
接水怪也會定期原創，定期跟小夥伴進行經驗交流或幫忙看簡歷。加關注，不迷路，有機會一起跑個步? ↓↓↓