CSS命名BEM规范

css命名是前端开发经常遇到的问题，不同的开发人员css命名规范不同，不好合作，也不好维护。这里介绍一下css命名的BEM规范，即‘Block__Element--Modifier’(模块__元素--修饰符规范。BEM的命名规范是模块名加上双下划线（__），加上元素名，加上双短横线（--），最后加上修饰符。内部用短横线连接，举例说明：

// button.btn{  border: none;  color: white;}.btn--red{  background-color: red;}.btn--green{  background-color: green;}// modal.modal{  }.modal__background{  position: fixed;  width: 100%;  height: 100%;  left: 0;  top: 0;  z-index: 10000;}.modal__window{  }.modal__window-head{  }.modal__window-body{  }.modal__window-bottom{  }.modal__window--big{  }

我们在实际的项目中，使用起来还是挺方便的。很容易找到。

原文地址：http://getbem.com/introduction/