Bem规范 && 命名空间

一个好的架构所需的4个标准：

• 类必须尽量少地添加，避免HTML膨胀
• 可以立即知道组件是否使用Javascript
• 可以立即知道是否可以安全的编辑一个类而不会影响其他
• 立即知道每个class是适用于什么，以防大脑过载

Bem规范 [block-element-modifier]

  .block { /*styles*/}   // 块
  .block __element { /*styles*/} // 元素
  .block-- modifier{ /*styles*/}  // 修饰符

  eg:
   <button class=".btn .btn--primary"> 块 & 修饰符</button >
   <button class=".btn .btn--default"> 块 & 修饰符</button >  
   <form class="form">
      <div class="form__row">元素</div>
   </form>

Tips：
Bem规范可以使class的数量尽量少。
可立即知道一个class放在这个伟大工程的哪边，以防大脑过载。
尽量不要链式命名BEM元素 比如：.commnets__commet-title。

命名空间

• .l- 布局
  面向对象的CSS（OOCSS）：表层与结构的分离。
  即影响块或其元素的属性应该被抽象为一个单独的类用于重复利用。
  在CSS中，定位块的行为也称为布局块。
  我们可分为全局布局 & 块级布局。全局布局是应用于所有页面的布局,每个块（对象或组件）有自己的布局。

<div class='l-container'>
  <form class='l-form'>
      <formItem class='l-form__item l-form__item--large'>
  </form>
</div>

• .o- 对象
  最小构建块，它们里面不能包含其他对象或组件。比如button
  对象独立于上下文，不会改变网站结构，即不能包含以下属性：

• absolute 和 fixed定位

• margin

• padding

• float 等

• .c- 组件
  组件可以任何位置可以引用的，可以注意下响应式。

• .js javascript的钩子
  表示该对象/组件是否需要JavaScript

  <div class='o-time jsCount'/>

• .is-/.has- 状态类
  表示对象/组件的当前状态， 当应用状态类时，可以立即知道对象/组件是否具有下拉（.has-dropdown）或当前处于打开状态(.is-open)

.object { &.is-animating { /*styles*/}}

• .t或.s 排版类

• .t1 - 最大的字体大小。

• .t2 - 第二大字体大小。

• .s1 - 第一字体大小较小的基本字体大小

• .u- 实用类
  通常只包含一个属性，并且包含!important声明。

相关参考：
编写模块化CSS：BEM
编写模块化的CSS:命名空间 © w3cplus.com