後端轉前端 起步 css理論 OOCSS/SMACSS 實戰心得

序言：不管什麼工做，最好都帶上本身的思想，明悟一條清晰的行爲方針。

2019年，後端轉前端工做數月後，認爲前端開發樣式書寫太繁瑣，樣式之間的覆蓋問題也讓人頭疼，身爲一個懶人，得想辦法簡化本身的工做！

網上查看了2014年的一些css理論，如oocss/smacss。面向對象的css？感受又回到了後端老本行了。一番仔細閱讀後，值得一試！如下爲理論連接

http://www.javashuo.com/article/p-tptoueqj-hd.html

又通過數月的實戰應用，已經逐漸適應了本身寫的css"框架(?)"，而且也成功安利同事使用，同事用了都說好！

目錄結構：

首先，網上下載了一個reset.css，清理一些body邊框，設置box-sizing之類的事情

其次，主要分爲3類：

• lay-index 框架佈局基礎樣式
• pro-index 項目功能性的組合樣式
• fuc-less width/height/margin/padding等自動生成

最後，則是element-ui的組件樣式重置，與主題切換。

1、lay-index核心代碼之flex(less語法)：

lay-index是佈局css文件，而目前最實用的佈局天然是flex彈性佈局,還不瞭解flex的同窗請戳：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

lay-index作的工做則是，將複雜flex語法屬性簡化，好比我要實現縱向自適應排列：

<div class="flex col"> <div class="flex1" style="width:100%"> 佔據(100%-30px)*100/170的高度 </div> <div class="flex07" style="width:100%"> 佔據(100%-30px)*70/170的高度 </div> <div class="flex-none" style="height:30px"> 佔據30px的高度 </div> </div>複製代碼

若是我但願一個div內容 水平居中和垂直居中(畫重點，要考！)

<div class="flex"> 內容居中了 </div>複製代碼

lay-indnx內其餘代碼，例如：

2、pro-index裏的核心代碼

這裏存儲一些由項目產生的組件樣式，方便下次開發快速應用。

<div class="in-flex pro-box width">
   內容居中了,我有邊框了
</div>複製代碼

3、fuc-less裏的核心代碼

在框架完善過程當中發現，逐漸添加的 單元樣式，已經能知足平常的工做須要了，惟一很差處理的是：width、height、padding、margin這樣的不定數值

爲了代碼寫起來舒暢，因而利用less的循環自增語法，來解決這個問題。

最終會獲得：

.height30,.width200,.padding5,.marginT15 這些批量產生的css

如下爲最終代碼：

<div class="WH flex col">        <headerSub class="width flex-none paddingL30"></headerSub>        <div class="width flex1 flex row padding10 pro-box">            <leftMenu :leftMenu="leftMenu" ></leftMenu>            <router-view class="flex1 height"></router-view>        </div>    </div>複製代碼

整個css框架，是在幾個月內逐漸累積下來的，也通過了數次迭代，大概在作第三個項目時，發現框架已經沒有什麼須要新增或修改的東西了。

每次書寫頁面也比之前快了不少，也不用再記太多的css代碼，甚至都再也不須要UI出效果圖，直接對着原型寫前端。

我也仔細思考了下，爲何oocss並無流行起來：

1. 市面上有適應面更廣，能直接使用的，諸如 bootstrap這樣的框架
2. oocss須要前端開發人員帶着本身的想法，去推演一段時間才能成行
3. 最終成型的結果，帶有濃郁的我的風格，其它人不必定能徹底適應
4. 屬於奇技淫巧，會忽視掉代碼基礎（長期簡寫，一些樣式的完整寫法我也忘了）

我又認真的考慮了下，我爲何要繼續用這個框架：

                概因：天下武功，無堅不摧，惟快不破

最後，將此安利給那些在小公司獨自奮戰的前端們，但願大家用更少的時間完成工做，更多的時間學習進步

console.log(`以爲有幫助的話，點個贊吧\(^o^)/~`,huhuche);複製代碼