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/

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页