css-BEM OOCSS

BEM是什么？

关于BEM

简单来说 理解成css的命名一种规范。

B E M分别指：Block Element Modifier
BEM官网示例代码

BEM官网示例代码

weui的代码示例

.weui-btn_cell {
}
.weui-btn_cell__icon {
}
.weui-btn_cell-default {
}
.weui-btn_cell-primary {}
.weui-btn_cell-warn {}

BEM要解决的问题

1. css命名冲突
2. css模块组织方式
3. ...

参考：

1. 具体的实现应用可以使用weui

---

OOCSS是什么？

定义和设计css样式 书写方式的一种方案；强调按照视觉功能的角度组织 css样式定义；通过组合的方式实现通用和扩展性。

Bootstrap中OOCSS的应用：

Bootstrap

解决的问题

（1）样式的复用、扩展性
（2）减少重复的属性设置样式代码，比如设计稿中 很多的地方字号都是14px,不需要每一个样式定义中重复的设置 font-size: 14px
（3）如何进行覆盖，扩展
（4）...

---

OOCSS vs BEM

1. OOCSS 从功能模块的角度来模块划分
   比如：容器类、间距类、文案色值类

.container 
.nav 
.footer

.color-primary
.color-warning
.color-active
.color-desc
.color-info

.font-title
.font-desc

....

2. BEM中的模块 从页面功能结构上划分
   比如：顶部导航、侧边栏、轮播图、弹窗等

.nav 
.nav--item
.nav-item-active

.sidebar
.sidebar--list

3. BEM相比OOCSS 本身更多的解决了命令空间和命名冲突的问题， OOCSS需要自己通过增加特殊前缀或者其他的方案来实现。

4. OOCSS中的class类名定义和BEM中的modifier的命名，基本上都有两个方向，一个是以视觉来定义，一个是语义化定义

// BEM 规范
.nav {}
.nav--item {}
// 导航条中每一个导航单元的选中状态
// 1. 语义化（从具体的表达的意义角度命名）
.nav--item-active {
  color: red;
}
// 2. 视觉化（从视觉稿上的表现来命名）
.nav--item-red {
  color: red;
}

从长远规划的角度来讲，语义化是更好的选择方案；但是具体到落地的时候，还需要考虑团队大小、产品设计、UI 规范等各个方面的因素。
（1）语义化的定义需要开发人员之间的概念统一（一般采用文档规范输出以及和UI设计同学约定规范）以及对语义定义的准确性。
（2）视觉化的好处是对于当前的设计来说非常的直观，一一对应，我们看下设计稿的配色，就能快速的想起我们定义的class类名，缺点就是多套ui设计标准下通用性不强，需要整个修改。

有时候不妨两者结合的使用，毕竟不论是使用BEM还是OOCSS，最终的目的都是提高我们开发和维护的效率。