BEM是指Block, Element, Modifier (通常叫做BEM ) ,是一种CSS的命名方法,可能在学习CSS的时候,各种各和来命名CSs的class的方式,大写加小写,全部小写,小写加下划线等等,哪种方式更合理一点,哪种方式便于扩展,都没有考量. BEM是一种相对规范的命名方式,现在很多开源的框架都在用这种方式。来看一个例子:
.btn {}
.btn__price {}
.btn–orange {}
.btn–big {}
- 在这个例子中, block是指顶层的一个组件,如按钮.btn
- 子组件或者子元素,用连个下划线来表示”,如例子中价格.btn_price
- 组件的修饰或者描述,用两个中划线来表示”,如例子的颜色.btn-orange
通过上面的描述,生成一个HTML的例子如下:
<a class=“btn btn–big btn–orange“ href=“https://css-tricks.com“> <span class=“btn__price“>$9.99</span> <span class=“btn__text“>Subscribe</span> </a>
BEM写起了很简单,那它的好处优势在哪里
- 新增一个组件,结构清晰明了;
- 代码易于理解和维护
- 开发者之间很容易通过代理来理解功能
BEM其实很好理解,使用也方便,如果你还没有找到一种合适的Css取名方法,不妨先就用这种方式。 参考文章:
httos://cssticks.com/bem-101