BEM命名規範結合SCSS

lixinchao發表於2018-08-08
CSS

1、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{} /* 修飾符 */  
複製程式碼

2、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 是一個非常有用，強大，簡單的命名約定，雖然看起來有點兒奇怪，但可以讓你的前端程式碼更容易閱讀和理解，更容易團隊協作，更容易控制，更加健壯和明確而且更加嚴密。

相關文章