BEM规范与OOCSS

一、BEM样式命名规范

BEM(Block, Element, Modifier)是由Yandex团队提出的一种前端命名规范。其核心思想是将页面 拆分成一个个独立的富有语义的块（blocks）,从而使得团队在开发复杂的项目变得高效，并且十分有利于代码复用，即便团队引入新成员，也容易维护。在某种程度上，BEM和OOP是相似的。

• B，代表 Block块
• E，代表 Element块中的元素，用两个下划线来表示。
• M，代表 Modifier状态修饰，用两个中划线来表示。

<div class="order">
    <div class="order__info">
      <span class="order__time">订单时间</span>
      <span class="order__name">商品名称</span>
    </div>
    <div class="order__status">
      <span class="order__status--pay">待付款</span>
      <span class="order__status--receive">待签收</span>
      <span class="order__status--appi">待评价</span>
    </div>
</div>

.order {
  height: 50px;
  overflow: hidden;
}
.order__info {
  float: left;
  width: 80%;
}
.order__status {
  float: right;
  width: 20%;
}
.order__status>span {
  /**/
}
.order__status--pay {
  color: red;
}
.order__status--receive {
  color: green;
}
.order__status--appi {
  color: blue;
}

• BEM的命名规范

二、OOCSS样式设计

OOCSS不是一个框架，也不是一种技术，更不是一种新的语言，他只不过是一种方法，一种书写方式，换句话说OOCSS其核心就是用最简单的方式编写最整洁，最于净的CSS代码，从而使代码更具重用性，可维护性和可扩展性 （ 把原本写在一起的样式， 拆开多个class 写，提高可复用性）。

<button type="button" class="btn btn-danger btn-lg">使用danger的大按钮</button>
<button type="button" class="btn btn-primary btn-sm btn-radius5">使用primary的小按钮</button>

• OOCSS官网
• 思考Bootstrap Button的样式设计

本篇结束！！！