组合思路带来的好处是1.增强了可读性和可维护性，可以通过className想象UI。2速度快，直接写jsx就可以了。无需来回切换js/htmlcss文件。在分离css之前，css是通过webpack打包在js中的。这样做的缺点是js处理这些css需要时间。同时也阻塞了其他js代码的执行时间。按照组合的思路开发，理论上css很少会变，而js确实经常变。这样css就不能独立缓存了。如果有dom，那么dom先出来，然后再加载js处理css部分。这时候你会看到页面没有样式，突然样式又闪烁了，不太好。理论上，css最好放开head，提前加载。于是我们分开了。降级过程是通过autoprefixer完成的，比如//originaldisplay:flex;//afterprocessingdisplay:-webkit-box;display:-webkit-flex;display:flex;细心的同学可以发现只有-webkit-，没有-ms--moz--o-。为了兼容性，只处理-webkit-就足够了。css模块介绍css模块的时间很短，但是现在已经很少用了。目的是将css模块模块化，但是带来了一些问题。css（less）模块化是随着js的引入而引入的。CSS是异步加载的。同时less不在主框架上，所以变量不能用function等，所以慢慢被废弃了。随着react-gm提供的类名组件的完善，后面真正用到css模块的地方已经很少了。所以后面的css模块会被丢弃。react-gm.min.css以前react-gm提供的是dist文件，即js和css。这样在开发Station系统的时候就没有问题了。但是MA需要不同的颜色主题，所以需要像bootstrap一样提供一个theme.css文件。提取这部分需要修改，工作量比较大。后来react-gm舍弃了dist形式，直接引入了src的index.js和index.less文件。如何导入库的css是根据上面的点//maindex.jsimport'react-gm';import'./index.less'//maindex.less覆盖主题颜色变量，改变主题@brand-primary:#2c9feb;//react-gmindex.jsimport'./index.less'//react-gmindex.less@import"less/bootstrap.less";浮层管理话题也可以简称为浮层管理。开发人员越不关心z-index越好，组件提供封装。当然，框架需要考虑的东西更多。层级大致就是正常的文档流1modal1000tip9999另外，modal派生出来的Dialog形式是对话框，只需要一个即可。弹出窗口中不能有弹出窗口。弹窗在技术上是可以的，但是受到限制，没有提供相应的能力。固定位置在移动端被禁用。position:fixed，但是我会介绍更多http://efe.baidu.com/blog/mob...vmvhrempx我个人比较喜欢用px。因为很简单，所以符合pcweb的开发习惯，也是大家开发网页的默认单位。没有转换成本，只需开始。当然，如果是设计驱动型公司，需要对设计稿进行高保真还原，那就另当别论了，会考虑rem方案。基于兼容性的考虑，我们可以直接使用vmvh。http://www.w3cplus.com/css/vw...btw，个人感觉rem实现起来很麻烦，也有rem不够深的原因。磨砂玻璃场景是弹出对话框时背景上的磨砂玻璃效果。这里的关键是不能包含背景dom和对话框，然后在背景dom上做filter:blue(2px)。只需管理对话框的dom。还有一个关键点就是后台dom什么时候设置filter，什么时候取消filter。所以引入了事件。对话框弹出关闭，向后台dom发送事件通知。FrameworkLayerArchitectureFramework层采用flex布局，在指定区域提供业务。业务只需要关心这个区域，不能干涉其他区域。如果有必要，需要讨论和讨论。业务区域进行内部滚动。这部分其实做的不是很好，后面想重构。有不好的地方，1scroll只要指定的dom不是document.body即可。2跟着dom做弹窗不好做，需要计算位置。由于浏览器环境对css3非常好，你可以尝试css3的很多特性，不一定是css3，大致意思就是可以使用很多高级功能。比如calc，filter等。图标坚决不要用img做图标。使用iconfont，我们的字体托管在iconfont.cn平台上。iconfont只能做单色、多色等不复杂的图片。如果不是，请考虑css3或svg方向。