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/