其他
生态及展望
1 Chrome插件
前端辅助Chrome插件fe-tools已经接入了Moo-CSS模块，提供CSS样式属性查询，moo-css的分类查询，moo-css-base的检索功能。
2 VSCode插件
为方便 moo-css-base 在 IDE 中快速提示开发，已创建了 vscode 提示插件moo-css-plugin。
3 loader
当前css开发中，不存在于moo-css-base中的样式还需要我们手动写CSS代码，如.g-fs88，结合即将完成的moo-loader，我们可以使这部分工作由loader自动添加完成，以更高效得完成业务样式开发工作。
4 自动化转化
目前很多的设计稿是以sketch文件的形式提供，那么就可以设计一套解析规则，提取CSS样式及节点特征，结合Moo-CSS规则自动生成符合Moo-CSS规范的HTML标签及CSS样式，目标是实现样式的自动化开发操作。
相信未来样式开发会变得更加自由和高效。
常见问题
1.主流前端框架中的Component和Module
前文也有提过，在使用主流前端框架，如Vue，Module层可根据在路由views目录文件中各自定义；Component可在组件components目录中定义，易于区分和维护。可参考移动demo2以及PCdemo。
SFC——Vue/Angular(1.x)
如views/a.vue
<template>
<div class="m-a">...</div>
</template>
<style>
.m-a {}
</style>
或直接使用css modules
<template>
<div :class="$style.a">...</div>
</template>
<style module>
.a {}
</style>
components/b.vue
<template>
<div class="u-a">...</div>
</template>
<style>
.u-a {}
</style>
css in js——React/Angular(2.x)
如
import React, {Component} from 'react';
import styled from 'styled-components';
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
class A extends Component {
render () {
return (<Wrapper>
<Title>
<h1 className="u-w30 g-mt20">...</h1>
</Title>
</Wrapper>)
}
}
2.Component为何没有独有的命名前缀
- 保证Component单元特质：在很多模块划分的CSS策略中，组件层和模块层的一直存在划分模糊的问题。Moo-CSS建议Component样式只保留组件核心特征，不推荐样式封闭，从而具有更好的拓展性。
- Component以及Module命名前缀的非必要性：Component以及Module推荐使用css modules，其命名前缀并不像样式属性或Base般必要。
3.关于预处理的mixins和skins
mixins和skins通常在项目样式Base层和Component层，由于预处理定义的方法跟变量不会影响生成后的css体积，因此原则上是越精细越好，也是业务中较频繁维护的部分。moo-css-base的mixins方法库也将逐步优化和添加。
如mixins.less
// border-top 1px mobile
.bdt1px(@color) {
position: relative
&:after {
left: 0;
top: 0;
width: 100%;
height: 1px;
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
background-color: @color;
}
}
module.less
@import 'mixins.less';
.m-nav {
.m-nav__item {
.bdt1px(red);
}
}
4.关于font-size及line-height归类为gird而不是function的争议
有人质疑为什么把font-size及line-height归为gird而不是function，原因有2：font-size以及line-height会影响整体布局，特别是一些还在用rem作为自适应布局单位的项目；font-size缩写同font-style(fs)。
5.关于moo-css-base移动端样式库自适应使用vw作为长度单位
rem本身作为自适应的过渡属性已经承载了多年，viewport在当下移动设备兼容问题已完全不用考虑。使用vw即可避免rem单位换算的过程消耗，同时也避免了各开发团队rem换算单位不一致带来的尴尬。
6.用moo-css-base与其他UI库或组件库样式冲突吗
不冲突。因为Moo-CSS较特殊的命名前缀规则，以及moo-css-base只提供原子样式，冲突的概率非常小。
7.关于过渡和动画
过渡和动画的业务场景较为复杂和特殊，moo-css-base中并没有直接的封装效果或方法，可以直接使用animate.css或自行封装一个动效库（a-标识前缀、Base层）。