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要解决的问题
- css命名冲突
- css模块组织方式
- ...
参考：
- 具体的实现应用可以使用weui
OOCSS是什么？
定义和设计css样式 书写方式的一种方案；强调按照视觉功能的角度组织 css样式定义；通过组合的方式实现通用和扩展性。
Bootstrap中OOCSS的应用：
Bootstrap
解决的问题
（1）样式的复用、扩展性
（2）减少重复的属性设置样式代码，比如设计稿中 很多的地方字号都是14px,不需要每一个样式定义中重复的设置 font-size: 14px
（3）如何进行覆盖，扩展
（4）...
OOCSS vs BEM
-
OOCSS从功能模块的角度来模块划分
比如：容器类、间距类、文案色值类
.container
.nav
.footer
.color-primary
.color-warning
.color-active
.color-desc
.color-info
.font-title
.font-desc
....
-
BEM中的模块 从页面功能结构上划分
比如：顶部导航、侧边栏、轮播图、弹窗等
.nav
.nav--item
.nav-item-active
.sidebar
.sidebar--list
-
BEM相比OOCSS本身更多的解决了命令空间和命名冲突的问题，OOCSS需要自己通过增加特殊前缀或者其他的方案来实现。 -
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，最终的目的都是提高我们开发和维护的效率。
网友评论