使用ElementUI開發系統（介紹與開發中遇到的問題）

最近使用ElementUI開發項目，遇到一些問題，因爲網上能找到相關的資料實在太少了，因此把此次項目中的問題總結一下。

首先你能夠從github上面fork他們的代碼下來這裏就很少加闡述：https://github.com/ElementUI/theme-default-scss

下載下來後你會發現，他們提供了一個element-variables.css給你設置你的主題色，幫助你快速設置你項目的主題顏色甚至是組件的長寬圓角。

若是你是想沿用ele的交互而又想有一點點本身的風格的話，這樣的修改相信已經能夠知足你的需求了。

可是若是你想進入更深層次的定製，甚至二次開發，那你就要去熟悉它的樣式風格，去編寫新的交互或者組件。

開始二次開發

一開始看到它生成的樣式的時候，我感受到它構建前確定是用了相似預處理來處理它的樣式，看到源代碼後果真印證了個人想法，它是基於PostCss來編譯的，雖然跟我以前想的應該是LESS/SCSS來進行預處理有出入，可是它的想法跟預處理差很少，PostCss是什麼？網上不少人的說法是下一代CSS風格，可是CSS3都沒有很好的規範完，這樣的說法感受仍是有待商榷，既然知道它是經過什麼來處理CSS，可是仍是感受到哪裏怪怪的。

我隨便截的其中一個組件的圖，當時我就很納悶那些變量的做用是什麼呢？

而後我去查看對應的源碼，這個自動補充組件，生成後有一個樣式 .el-autocomplete 我就推測了一下，是否是@b 這個變量在底層構建的時候會幫樣式生成前綴 .el 而後 @e 後面的 suggestions 生成的是 .el-autoconplete__suggestions 當我看到這裏的時候我有點點恍然大悟，想起了我曾經看到過的一個命名法則「BEM」。想了解的人麻煩看看《BEM思想》 。

機緣巧合下，我就獲得了ele-ui是經過PostCss結合BEM語法來進行樣式開發的，我也感覺獲得它們應該是先肯定使用BEM命名規則才選擇使用PostCss進行樣式處理的，你看完大漠總是的BEM思想以後或許也會有跟我同樣的想法。

接下來介紹PostCss與BEM在項目中是怎麼結合的。

先看看PostCss的特徵（其實跟預處理差很少）

• 能夠進行定義，:root {}中定義，eg:--color-primary: #20a0ff;
• 一樣能夠支持嵌套寫樣式(一樣能夠跟LESS他們同樣可使用&來控制樣式的層級關係)
• 能夠@import只能是CSS
• 能夠在底層設置獨立的語法

接下來就是ele獨特的地方，他是怎麼把PostCss和BEM結合的呢。

1.上圖中@component-namespace el{}

@component-namespace 樣式名 會讓接下來嵌套的樣式的前綴都變成樣式名，就像上面的el那樣會讓下面的樣式前綴都變成el。

2.@b 後面帶的樣式就會變成 el-樣式名(有點把上面的namespace繼承下來的感受)

@b autocomplete{}複製代碼

↓

el-autocomplete{}複製代碼

3.@modifier或者@m後帶的樣式會變成(m就表明修飾類的樣式名BEM)

@b button{
  @modifier large{...}
  @m small{...}
}複製代碼

↓

el-button--large{...}
el-button--small{...}複製代碼

4.@e後面的樣式就會BEM的E，元素的意思

@b alert{
  @e content{...}
}複製代碼

↓

el-alert__content{...}複製代碼

5.@when後的樣式就會被渲染成 .is-樣式名

@b button{
  @m small{
       @when disabled {...}
  }
}複製代碼

↓

el-button--large.is-disabled{...}複製代碼

6.PostCss還能夠封裝好不少組建樣式

相似按鈕組件

@b button{
  @mixin button-size 10px 20px 30px 40px;
}複製代碼

↓

.el-button{
  padding: 10px 20px;
  font-size: 30px;
  border-radius: 40px;
}複製代碼

7.還提供了不少函數，例如tint()和shade()函數，分別用來使顏色提高亮度、顏色下降亮度用的。接受兩個參數，第一個是顏色值，第二個是明暗百分比。

.foo {
  color: tint(#BADA55, 42%);
}

.bar {
  background-color: shade(#663399, 42%);
}複製代碼

↓

.foo {
  color: #e2efb7;
}

.bar {
  background-color: #2a1540;
}複製代碼

開發中遇到的問題

1. 本次開發的項目中，ele的樣式組件是用的Postcss,而項目中主體框架和額外的樣式就繼續沿用之前的開發模式和LESS，可是經過PostCss構建出來的樣式例如：.el-button樣式，你在LESS文件中對這個樣式進行重置是得不到任何效果的，只能在css樣式表中對.el-button樣式進行重置才行，處理方法是在最後的globel.css中對項目對應頁面須要修改的樣式中寫css樣式來進行覆蓋，除非是多處須要共用的樣式，纔到對應的組件樣式表中進行編寫樣式。
2. 使用這個框架的好處對比之前的開發流程就是前端和重構能夠同時進行開發，而不必定是等重構開發完靜態頁面前端才能開發。由於如今是同時對VUE頁面進行開發，前端和重構的需求就能夠交叉進行，而後重構再開始修改頁面結構和組件的樣式。可是在樣式規範沒有統一的前提下，前端會寫內聯樣式，這樣重構介入頁面的時候不免會有遺漏沒有把內聯樣式去掉。這個問題值得探討一下。

個人我的博客：http://zengjinchao.com/wordpress/