BEM(CSS命名規範)

在Web項目中規範css命名還是很有必要的，BEM傳送門。

通過閱讀Element-UI源碼來分析學習BEM規範, 使用BEM規範語義化更加鮮明，閱讀更容易理解， B意思是Block 塊，E意思是Element 元素，M意思是Modifier 修飾器。塊與元素之間使用__ 雙下劃線連接，塊或元素與修飾器之間使用-- 雙中劃線連接。

BEM中塊、元素、修飾器的命名如果存在多個單詞使用- 單中劃線連接

<button class="button">
 Normal Button
</button>
<button class="button--state-success">
  Success Button
</button>
<div class="footer">
  <button class="footer__button">footer button</button>
  <button class="footer__button--state-success">footer button</button>
</div>

.button {} /*基礎按鈕*/
/*通過雙中劃線連接修飾器 這樣語義化更加鮮明*/
.button--state-success {} /*狀態爲成功的button*/
.footer__button{} /*底部按鈕樣式*/
.footer__button--state-success{} /*底部狀態爲成功的按鈕樣式*/
/*state-success 多個單詞直接使用-連接*/