核心：Base层

通过前文可知，Base层是高频样式/方法的集中层级。Base层具有高频率、轻量性、不涉及业务的特征，也可作为UI库或框架组件组的基础依赖库。

权重计算参考公式

1 / （样式资源量 / 样式属性耦合度 * 0.4 + 0.3 / 样式使用率 ^ 2 + 选择器权重 * 0.3）

数值越大权重越高，高权重可归入Base层。

其中，样式资源量可由样式代码量和引入资源大小进行衡量；样式属性耦合度是指在多样式属性的样式中，属性直接的耦合度，如溢出显示'...'这样的耦合度就非常高；样式使用率主要考虑多页面（包括路由页面）的样式使用率；选择器权重计算值越小越好。权重公式仅做参考，简单来说就是提取高频使用且不占用大量资源的原子样式/方法。

比如说下面几个样式可纳入Base层：

.f-tc { text-align: center }	/* 满足高使用率、低资源量高耦合度、选择器较低权重 */
[s-bgc_gray] { background-color: #999 }	/* 满足低选择器权重、低资源量 */
.f-ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden } /* 满足高耦合、高使用率、低选择器权重 */

再举几个反例

[s-type="red"] { color: white; background: red; box-shadow: 0 0 10px red }	/* 满足低权重但样式耦合度低 */
.z-index_max { z-index: 99999 !important } /* 满足低样式资源高耦合度但是选择器权重很高且使用率并不高 */
.u-ques { width: 20px; height: 20px; background-image: url(./i-question.png) }  /* 满足高耦合但是样式资源量较高 */

由于Base层的独特地位，该层选择器命名必须严格遵守样式属性模块命名规范。确认并封装Base层样式库之后，这套共用的样式库便可以在今后的项目中持续使用，前文也有提过，Base层确立之后便建议后续维护中只渐进添加，不删减。

moo-css-base

Moo-CSS base为本人从团队多年项目中抽离的公用CSS样式/方法库，遵守Moo-CSS规范，作为页面样式的Base层在全局使用。

功能：浏览器默认样式reset、提供常用原子样式、组件样式基础、颜色变量及常用mixins方法库。
兼容：移动端安卓4.4及以上/ios8.1及以上；PC除flex外兼容IE6。
体积：其css压缩版本大小（gizp）为移动端3.5k、PC端4.2k。
预处理支持情况：less/sass/stylus。

moo-css-base可直接在项目中按需引用，或者可以作为Base层的划分参考。

安装如下：

npm i -D moo-css-base

使用如：

初始化注入

初始化注入将reset浏览器默认样式，并且提供高频率的全局样式使用，包括(grid、function、unit、skin、status、component基础样式)，具体可见词典 moo-css-base样式

@import '~moo-css-base/mobile.less';	// init less mobile style
@import '~moo-css-base/pc.less';	// init less pc style

@import '~moo-css-base/mobile.scss';	// init sass mobile style
@import '~moo-css-base/pc.scss';	// init sass pc style

@import '~moo-css-base/mobile.styl';	// init stylus mobile style
@import '~moo-css-base/pc.styl';	// init stylus pc style

css直接引用

<!-- 使用移动版 -->
<link rel="stylesheet" href="./moo-css-base/mobile.css"/>
<!-- 使用PC版 -->
<link rel="stylesheet" href="./moo-css-base/pc.css"/>

使用样式方法

moo-css-base提供的样式方法为高频率样式方法集合，部分为较高样式，具体可见词典 moo-css-base方法

@import '~moo-css-base/mobileMixins.less';	// import less mobile functions

.m-test {
	.wh(1vw, 1vh);
}

@import '~moo-css-base/pcMixins.less';	// import less pc functions

.m-test {
	.opacity(0.5);
}

@import '~moo-css-base/mobileMixins.scss';	// import sass mobile functions

.m-test {
	@include wh(1vw, 1vh);
}

@import '~moo-css-base/pcMixins.scss';	// import sass pc functions

.m-test {
	@include opacity(0.5);
}

@import '~moo-css-base/mobileMixins.styl';	// import sass mobile functions

.m-test
	wh(1vw, 1vh);

@import '~moo-css-base/pcMixins.styl';	// import sass pc functions

.m-test 
	opacity(0.5);

使用颜色变量

moo-css-base提供的颜色变量为变量形式，全部颜色可见词典 moo-css-base颜色

@import '~moo-css-base/mobileColors.less';	// import less mobile colors

.u-error {
    color: @red;
}

@import '~moo-css-base/mobileColors.less';	// import less pc colors

.u-error {
    color: @blue;
}

@import '~moo-css-base/mobileColors.less';	// import sass mobile colors

.u-error {
    color: $red;
}

@import '~moo-css-base/mobileColors.less';	// import sass pc colors

.u-error {
    color: $blue;
}

@import '~moo-css-base/mobileColors.less';	// import stylus mobile colors

.u-error
    color: $red;

@import '~moo-css-base/pcColors.less';	// import stylus pc colors

.u-error
    color: $blue

各模块代码：

demo及说明

为了便于理解，这里提供了几个简单样例。

移动demo1(Zepto原生+less)

访问地址：http://blog.michealwayne.cn/Moo-CSS/demo/mobile/dist/mobileIndex.html
代码地址：github mobile demo

DOM结构如下： mobile demo 1 structure

其中Module层由BEM实现。

移动demo2(VueJS+less)

访问地址：http://blog.michealwayne.cn/Moo-CSS/demo/mobile/dist/mobileIndex.html
代码地址：github mobile demo

DOM结构如下： mobile demo 2 structure

其中Module层由css modules实现。

PC demo1(ReactJS+sass)

访问地址：http://blog.michealwayne.cn/Moo-CSS/demo/pc/dist/#/
代码地址：github pc demo

DOM结构如下： pc demo 1 structure

其中Module层除Footer外(Footer使用了CSS in JS)均由css modules实现。

# 核心：Base层

# 权重计算参考公式

# moo-css-base

# 初始化注入

# css直接引用

# 使用样式方法

# 使用颜色变量

# less

# sass

# stylus

# demo及说明

# 移动demo1(Zepto原生+less)

# 移动demo2(VueJS+less)

# PC demo1(ReactJS+sass)