BEM解决问题思路
由于项目开发中,每个组件都是独一无二的,其名字也是独一无二的,组件内部元素的名字加上组件名,并用元素的名字座位选择器,自然组件内的样式就不会与组件外的样式冲突了
通过组件名的唯一性来保证选择器的唯一性,从而保证样式不会污染到组件外
BEM命名规则 : block-neme__elment-name--modifier-name 也就是 模块名 + 元素名 + 修饰器名
一般来说 根据组件目录名来座位组件名字: 比如分页组件 :
/app/components/page-btn/
那么该组件模块就命名为 page-btn, 组件内部的元素命名都必须加上模块名 , 比如:
<div class = "page-btn" > <button type = "button" class="page-btn__prev">上一页</button>
<button type = "button" class="page-btn__next">下一页</button> <?div>
