BEM命名规范结合SCSS

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 是一个非常有用，强大，简单的命名约定，虽然看起来有点儿奇怪，但可以让你的前端代码更容易阅读和理解，更容易团队协作，更容易控制，更加健壮和明确而且更加严密。

转载于:https://juejin.im/post/5b6a7b0e5188251abc15aca1