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