从观麦前端框架的角度看css

时间 2019-11-16

标签前端框架角度 css 栏目 CSS 繁體版

原文原文链接

兼容

pc web：好比 MA Station。基于chrome，能够手机访问（须要业务作适配）。 android 上兼容微信浏览器和 QQ浏览器，safari 支持 iOS > 8（safari 的版本随系统版本）。比较任性。css

mobile web：好比下单系统。主要在微信浏览器内访问。html

safari 的兼容测试能够用 mac 自带的模拟器 simulator 来测试，很是方便。react

bootstrap

基于老牌的 bootstrap，相对简单易用。v4 如今还在 beta 中，若是正式了仍是能够考虑迁移的。或者 beta 阶段迁移。android

less

由于 bootstrap3 是 less ，移动端基于因此也就用了 less，实际上 sass 更强大。bootstrap4 也采用了 sass。等迁移到 bootstrap4 后咱们也会采用 sass 的，就是这么任性。webpack

less 函数有个特性有点奇怪，我用过，不过不具有可维护性，不建议你们用。css3

// 正常状况

.fun1(){
    background: red;
}

.aaa{
    .fun1();
}

// 一个类名也能够当函数用，不建议用
.class1{
    background: red;
}

.aaa{
    .class1();
}

flex

web 开发都是基于 flex 的，这给咱们的布局很大的方便，很是的灵活，能够很简单的。web

上面系统的总体兼容性也基本是考虑 flex 的兼容上。chrome

要特别注意的地方是 flex-shrink 即项目的缩小比例，默认为1，即若是空间不足，该项目缩小。可是不推荐直接操做 flex-shrink，而是用 flex: none 或者 flex: auto。bootstrap

移动端高清屏1px

框架用的方法是 scale(0.5) 方法。不过多介绍，(网上文章不少)[https://juejin.im/entry/584e4...浏览器

命名

没有前缀的 btn 是 bootstrap，前缀 gm- 是 react-gm 库的。 b- 是业务内的。(链接符-)

模块内部的命名保留模块，即

// good 长是长了点，可是可维护性可读性很强
.b-home{
    .b-home-top{
        background: red;
        .b-home-top-btn{
            background: white;
        }
    }
}
// bad 由于可能其余库有定义了 top 这个样式。 这样就会有被覆盖的可能性。
.b-home{
    .top{
        background: red;
    }
}

特殊的类名除外，好比 disabled checked error in out on off 等除外。

.b-home{
    .b-home-top{
        .disabled{
            background: gray;
        }
    }
}

less 变量命名同上，只是换成了骆驼峰，去掉了链接符

命名上有个出名的 BEM ，不了解，哈哈。

组合思想

目标是开发者想实现什么样式，经过 react-gm bootstrap 提供的类名来组合便可，这要求他们提供的类名足够丰富。固然这个想法已经知足了。

至于可能会出现某些场景不知足的（确定会有），作法是

1 是否场景不合理？也多是故意约束，克制，不提供此功能。
2 提出来讨论，共同抽象，沉淀到 react-gm 上。
3 实在特殊的就特殊处理，直接写在style上。

那组合思想是，其实 bootstrap 也是组合思想

<div className="gm-border gm-padding-5 gm-bg"></div>

<btn className="btn btn-primary btn-lg disabled"></div>

组合思想带来的好处是

1 可读性和可维护性加强，经过 className 能想象出 UI。
2 速度快，直接写 jsx 便可。不用来回切换 js/html css 文件。

分离css

之前 css 是经过 webpack 打包在 js 内的，这样带来的坏处是

js 要处理这些 css，天然须要花费时间。同时还阻塞其余 js 代码的执行时间。
按照组合思想开发，理论上 css 会不多改动，js 确实常改动。这样 css 无法独立缓存。
若是有 dom 的话，会是先 dom 出来，以后加载 js 处理 css 部分。这时会看到页面没样式，忽然又有样式的闪烁，不太好。理论上 css 最好释放 head 提早 load。

因此就分离了呗。

降级处理

经过 autoprefixer 来作降级，好比

// 原来
display: flex;

// 处理后
display: -webkit-box;
display: -webkit-flex;
display: flex;

细心的同窗能够发现，只有 -webkit-，没有 -ms- -moz- -o-。从兼容性上来考虑，只处理 -webkit- 已足够。

css module

有短期引入了 css module，不过如今用的不多了。当成的目的是 css module 模块化，可是带来了一些问题

css(less) 模块化后随 js 的引入而引入，css 即异步加载的
以此同时 less 并无在主框架上，所以无法使用变量函数等。

因而慢慢废弃。

随着 react-gm 提供的类名组件完善，后面真正用到 css module 的地方少之又少。因此后面 css module 是会被废弃掉的。

react-gm.min.css

之前 react-gm 是提供 dist 文件的，即 js 和 css。这样在开发 Station 系统的时候没有问题。

可是 MA 要求换种颜色主题，那么就须要和 bootstrap 同样，提供一个 theme.css 的文件。要抽出这 part 须要进行改造，工做量是挺大的。

后来 react-gm 废弃了 dist 形式，直接引入 src 的 index.js 和 index.less 文件。

库的 css 怎么引进来

基于上点

// ma index.js
import 'react-gm';
import './index.less'

// ma index.less 覆盖主题色变量即完成换主题
@brand-primary: #2c9feb;

// react-gm index.js
import './index.less'

// react-gm index.less
@import "less/bootstrap.less";

浮层管理

这个话题也能够说浮层的管理。开发者越少关心 z-index 越好，组件提供了封装。固然就须要框架考虑的东西更多了。

层级大体是

正常的文档流 1
modal 1000
tip 9999

另外 modal 衍生出来的 Dialog 形态即对话框，要求只有一个。不能出现弹窗中有弹窗。技术上能够作到弹窗有弹窗，但克制，不提供相应的能力。

position fixed

移动端是禁用 position:fixed 的，不过多介绍 http://efe.baidu.com/blog/mob...

vm vh rem px

我我的是比较倾向于用 px 的。由于很简单，切和 pc web 的开发习惯一致，也是你们开发网页的默认单位。无须什么转换成本，上手就来。

固然若是是设计驱动的公司，要求高保真还原设计稿，就不太同样了，会考虑用 rem 方案。基于兼容性考虑，咱们能够直接用 vm vh。http://www.w3cplus.com/css/vw...

btw，我的还以为 rem 在执行上很麻烦，也有对 rem 不了不深的缘由。

毛玻璃

场景是对话框弹起来的时候背景出现毛玻璃效果。

这里的关键是背景的 dom 和对话框不能是包含关系，而后对背景 dom 作 filter:blue(2px)。只要管理好对话框的 dom 便可。

另外关键是，背景 dom 什么时机设置 filter，何时取消 filter。因而引入了事件。对话框弹起关闭都发出事件通知到背景 dom 便可。

框架层架构

框架层采用了 flex 布局，给了指定区域作业务，业务只需也只能关心该区域，不能干扰其余区域，如需，须要讨论商量好。

业务区域作内滚动，这 part 其实不太好，后面想重构掉。很差的地方有，1 滚动只要指定 dom 非 document.body。 2 跟随 dom 的弹窗很差作，须要计算位置。

css3

因为浏览器的环境很良好，因此能够尝试不少 css3 的特性，也不必定是 css3，大体意思是能够用上不少高级的功能。好比 calc、filter 等。

图标

坚定不采用 img 来作图标。采用 iconfont ，咱们的字体托管在 iconfont.cn 平台。 iconfont 只能作单色，多色等不复杂的图片。若是知足不了则考虑 css3 或者 svg 方向。