CSS的BEM命名方式知多少?

BEM是指Block, Element, Modifier (通常叫做BEM ) ,是一种CSS的命名方法,可能在学习CSS的时候,各种各和来命名CSs的class的方式,大写加小写,全部小写,小写加下划线等等,哪种方式更合理一点,哪种方式便于扩展,都没有考量. BEM是一种相对规范的命名方式,现在很多开源的框架都在用这种方式。来看一个例子:
/* Block component */
.btn {}
/* Element that depends upon the block */
.btn__price {}
/* Modifier that changes the style of the block */
.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写起了很简单,那它的好处优势在哪里
  1. 新增一个组件,结构清晰明了;
  2. 代码易于理解和维护
  3. 开发者之间很容易通过代理来理解功能
BEM其实很好理解,使用也方便,如果你还没有找到一种合适的Css取名方法,不妨先就用这种方式。 参考文章:

PHP的语法糖有哪些
Tags:,