最近使用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;
}

开发中遇到的问题

本次开发的项目中，ele的样式组件是用的Postcss,而项目中主体框架和额外的样式就继续沿用以前的开发模式和LESS，但是通过PostCss构建出来的样式例如：.el-button样式，你在LESS文件中对这个样式进行重置是得不到任何效果的，只能在css样式表中对.el-button样式进行重置才行，处理方法是在最后的globel.css中对项目对应页面需要修改的样式中写css样式来进行覆盖，除非是多处需要共用的样式，才到对应的组件样式表中进行编写样式。
使用这个框架的好处对比以前的开发流程就是前端和重构可以同时进行开发，而不一定是等重构开发完静态页面前端才能开发。因为现在是同时对VUE页面进行开发，前端和重构的需求就可以交叉进行，然后重构再开始修改页面结构和组件的样式。但是在样式规范没有统一的前提下，前端会写内联样式，这样重构介入页面的时候难免会有遗漏没有把内联样式去掉。这个问题值得探讨一下。

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