BEM命名規範結合SCSS

一、CSS命名規範

參考BEM命名規範

BEM的意思是塊(block)、元素(element)、修飾符(modifier)

1. block 表明了更高級別的抽象或組件。
2. block__element 表明.block的後代，用於造成一個完整的.block的總體。
3. block--modifier表明.block的不一樣狀態或不一樣版本，用於修飾。

air-table{} /* 塊 */  
  air-table__footer{} /* 元素 */  
  air-table--full{} /* 修飾符 */  
複製代碼

二、VUE組件中使用以下

<template>
    // wrapper主要用於sass嵌套，以避免父（子）組件裏的css衝突
    <div class=」air-table(組件名)-wrapper」>  
        <el-table class=」air-table」>   
		</el-table>
        <div class=」 air-table__footer air-table__footer--full」>
	        <button class=」 air-table__footer--prev」>上</button>
            <button class=」 air-table__footer--next」>下</button>
        </div>
    </div>
</template>
<style lang=」scss」 scoped>
    . air-table(組件名)-wrapper{
        .air-table{ }
        . air-table__footer{ 
            .air-table__footer—prev{ }
            .air-table__footer—bext{ }
            &.air-table__footer--full{ }
        }
</style>

複製代碼

BEM 是一個很是有用，強大，簡單的命名約定，雖然看起來有點兒奇怪，但能夠讓你的前端代碼更容易閱讀和理解，更容易團隊協做，更容易控制，更加健壯和明確並且更加嚴密。