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

kinchao發表於2018-01-08
UI

最近使用ElementUI開發專案，遇到一些問題，由於網上能找到相關的資料實在太少了，所以把這次專案中的問題總結一下。

首先你可以從github上面fork他們的程式碼下來這裡就不多加闡述：https://github.com/ElementUI/theme-default-scss

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

如果你是想沿用ele的互動而又想有一點點自己的風格的話，這樣的修改相信已經可以滿足你的需求了。

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

開始二次開發

一開始看到它生成的樣式的時候，我感覺到它構建前肯定是用了類似預處理來處理它的樣式，看到原始碼後果然印證了我的想法，它是基於PostCss來編譯的，雖然跟我之前想的應該是LESS/SCSS來進行預處理有出入，但是它的想法跟預處理差不多，PostCss是什麼？網上很多人的說法是下一代CSS風格，但是CSS3都沒有很好的規範完，這樣的說法感覺還是有待商榷，既然知道它是通過什麼來處理CSS，但是還是感覺到哪裡怪怪的。

ele_01

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

然後我去檢視對應的原始碼，這個自動補充元件，生成後有一個樣式 .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/


相關文章