如何高效地实施 CSS 方法论中的BEM？

css 预处理工具

 1. less
 2. sass
 3. stylus
 4. postCSS

css方法论

 1. BEM
 2. SUIT CSS
 3. OOCSS
 
 css 加载器
 
 1. CSS MODULES
 2. CSS Loader
	

css方法论 : 为了提高CSS的可维护性和扩展性 而衍生的一种CSS样式名的原则,概念及其明明规范

BEM (Block Element Modifier)

Block 表示一个模块 black可以包含block

Element 表述DOM是什么  不是dom的外观和特性 element 不能包含element 

BEM 中规定了两种定义Modifier 的方法
	
 1. 一种是布尔值命名方式  (disabled focused)
 2. 键值对命名方式 (描述DOM的某些属性等于什么值)

BEM最核心的命名范式是什么

 1. 经典范式
 2. bem-like


经典范式

 1. 全部小写 <header class="header></header>
 2. 同一个类型之间的单词用短线 - 线连接 <form class="search-form" />
 3. black和element 之间使用两个下划线__连接 <span clas="menu__item"></span> 
 4. 而Modifier 与Black 和Element 之间 用一个短线连接_ <div class="menu_hidden"></div>

bem-like

驼峰命名范式

.black-name__elem-name_mod-name_mod-val 经典命名范式
.blackName-elemName_modName_modVal 驼峰命名范式
.BlackName-BlemName_odName_modVal React命名范式

对于BEM带来大量重复声明的问题处理方案
使用 CSS MODULES 是css向模块一样引用并能你能够管理css之间的引用依赖
为了小区样式名全局污染的问题 使用hash 替代样式名

css modules

module.exports = {
    module: {
        rules: [{
            test: /\.css$/i,
            loader: 'css-loader',
            options: {
                modules: true, //开启css Modules 功能
            }
        }]
    }
}


module.exports = {
    module: {
        rules: [{
            test: /\.css$/i,
            loader: 'css-loader',
            options: {
                modules: {
                	localIdentName:'[name]__[local]__[hash:base64:5]'
                }, //开启css Modules 功能
            }
        }]
    }
}