通用 css 样式库 rich.css

Posted 2023-01-01 sanxiandoupi

日期: 25 Dec 2018 ??

---

rich.css 用创新的方式，实现了动态的，可定制的，全覆盖的 css 样式库。无需开发 css 样式，也无需在 css html js 间切换，实现了样表库的名称编程。

传统的方式与问题

web base app 样式开发主要依赖 css 实现，css 的技术和高度定制要求开发者，必须有效组织大量的 css 文件和设计 css 对象。在页面众多的大型项目上，不得不编写大量 css 类，或者根据元素 id 定制 css 样式，甚至用内联在 html 上的样式。大量重复性的代码，维护上十分麻烦，虽然 sass，less 等优秀的项目一定程度带来提升。但是无法根本解决，开发页面先开发 css 的逻辑。

bnorth 的解决思路

bnorth 的解决思路是，生成丰富的 css 类库，开发者直接使用。但是对于定制部分并不是简单的循环全部的颜色或者尺寸。根据调查，一个应用中颜色和尺寸的使用是有限，且有场景的。比如说有主色调，辅助颜色，有标题大小，正文大小等，使得生成丰富全面的库成为可能。同时 bnorth 的 css 类库可以才用静态编译 css 和运行时动态生成类库的方式，在配置中可以修改各个场景的默认配置或者直接增加场景。尤其是动态生成类库的方式，可以方便的更换主题。

针对一些定制型更高，或者场景密集型的应用，比如画板程序。结合 react 的 style inline 特性，bnorth 提供了丰富的 style 生成函数，基本覆盖了 css 的全部使用场景。

样式库使用方法

rich.css 提供了丰富的样式库，涵盖了常用的 css 样式，无需开发 css ，直接使用提供的样式即可开发。样式库可以分为以下几类：

1. animation ：提供渐进动画和帧动画的样式
2. background ：提供了背景样式
3. base ：设置元素的基本样式，一些工具行样式库和基本的样式库，如行高等
4. border ：提供了边框样式
5. control ：提供了 web 控件的样式和状态
6. cursor ：提供了指针样式
7. display ：提供了显示样式，包括显示类型，透明度等
8. flex ：弹性布局的样式
9. position ：提供了位置相关的样式，包括定位类型，位置设置等
10. size ：提供了尺寸相关的样式
11. spacing ：提供了边距相关的样式
12. text ：提供了文字样式

在使用上有两种方式可以选择，css 静态文件方式和动态生成样式库方式。

css 静态文件方式

css 静态文件方式是直接引入 rich.css 生成完成的样式。如果希望调整样式的参数，需要下载 rich.css ，修改 config 文件，并自行编译

import ReactDom from 'react-dom';
import '@bnorth/rich.css/css/text.min.css';
import Button from '@bnorth/components/lib/Button';
ReactDOM.render(<Button className="text-color-primary">click</Button>, document.querySelector('#root'));

动态生成方式

动态生成方式是不引入 css 文件，而是引入 rich.css 提供的样式生成函数，执行生成样式后再使用。由于 css 样式库中有循环生成的样式，因此生成函数尺寸远小于 css 文件尺寸，生成又很高，进测试耗时相差无几，在网络不好环境下，反而表现更好。尤其动态生成，可以先修改配置在生成，样式修改灵活，还可实现换肤功能。

import ReactDom from 'react-dom';
import genCss '@bnorth/rich.css/';
import Button from '@bnorth/components/lib/Button';
genCss();
ReactDOM.render(<Button className="text-color-primary">click</Button>, document.querySelector('#root'));

静态与动态结合方式

以上两种方式也可以结合。不需要定制的部分，直接使用 css 。需要定制的部分在使用动态生成的方式替换或者覆盖。

import ReactDom from 'react-dom';
import '@bnorth/rich.css/css/....min.css';
import  gen  '@bnorth/rich.css/lib/gen';
import genFuncText '@bnorth/rich.css/lib/gens/text';
gen('richcss', genFuncText);
import Button from '@bnorth/components/lib/Button';
ReactDOM.render(<Button className="text-color-primary">click</Button>, document.querySelector('#root'));

样式扩展方法

除了样式库，rich.css 还提供了其他形式的样式操作方法。提供丰富的功能，还能解决一些样式。比如灵活的位置和尺寸的样式，需要样式函数的支持，单独的样式库是无法支持的。

样式库拼接函数

在组件的库的封装过程，经常会面对一个问题。组件库中使用了默认的样式库，使用时希望覆盖某些样式，比如组件库中使用了 text-color-primary ，使用时使用 text-color-alert 替换。可是由于 css class 的优先级并不是 class 数组的先后优先级，而是定义的样式库时的定义顺序决定的。

为此 rich.css 约定了样式库的名称的规则，任何名称都是由两部分组成，样式名与样式参数。对于 rich.css 的样式库在组件样式库拼接过程中遇到样式名相同的参数不同的样式，会删除前面的保留最后的。例如：

<Button className="text-color-primary text-size-sm text-color-alert" /> // class: 'text-size-sm text-color-alert'

除了替换还可以消除某个样式。一般是将参数部分使用 ‘-‘ 替换。 例如：消除 Button 默认的 text-align-center 居中样式。

<Button className="text-align--" /> // class: 'text-size-sm text-color-alert'

对于有些工具型样式库，没有参数部分，则直接在尾部增加 ‘-‘。

样式表生成函数

对于简单的样式表，比如设置宽度和高度，react 推荐 style inline 方式。react 的 HTML 是在 js 文件中实现，是灵活的可靠的。比如：

<Button style=width: window.innerWidth />

但是对于一些复杂的样式，比如设置阴影，一些浏览器兼容的样式，比如动画等，style inline 方式则显得复杂，容易出错。为此 rich.css 设计了一些样式函数：

1. animation ：提供了动画操作的一些函数，同时在 css 中还提供了大量的 帧动画定义

   比如设计一个跳动的文字

    import ReactDom from 'react-dom';
    import Panel from '@bnorth/components/lib/Panel';
    import animation from '@bnorth/rich.css/lib/styles/animation';
    import from '@bnorth/rich.css/css/keyframes.css';
    ReactDom.render(
      <Panel style=...animation('bounce')>ball</Panel>,
      document.querySelector('#root')
    );
   

2. background ：提供了背景操作的函数
3. flex ：提供了 flex 设置
4. shadow ：提供了阴影操作的函数
5. shape ：提供了 css 形状的函数

样式库用来最简单有效的使用样式，样式函数用于处理一些无法遍历的和无法主题化的样式，style inline 也是用来处理无法遍历和主题化的样式，但是需要是简单的不涉及浏览器兼容的。一个 3 种方式融合的例子：

比如设计一个跳动的小球

import ReactDom from 'react-dom';
import Panel from '@bnorth/components/lib/Panel';
import animation from '@bnorth/rich.css/lib/styles/animation';
import from '@bnorth/rich.css/css/keyframes.css';
ReactDom.render(
  <Panel 
    style=...animation('bounce'), width: 50, height: 50 
    className="border-radius-rounded">
    ball
  </Panel>,
  document.querySelector('#root')
);

浏览器标准化样式

rich.css 一般化了 html 元素样式，修复了一些浏览器的样式 bug，提供了跨浏览器的高度一致性。使用方法：

import '@bnorth/rich.css/css/normalize.css';

MediaQuery

TODO

样式配置

样式配置使 rich.css 可以适应不同的应用开发需求，创建丰富多彩的应用。比如设置文字的主颜色：

import  getCssConfig, setCssConfig  from '@bnorth/rich.css/lib/gen';
let  textColors  = getCssConfig();
textColors.normal = '#222222';
setCssConfig(textColors);

样式配置包括颜色库，字体库，尺寸等。还包括 css 属性常量的配置，对于配置里没有的可以自行增加，对于配置有的，但是项目完全用不到的，可以清除，减少生成的样式库大小。

具体参见 配置文档

flex 布局

网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。bnorth 中包括 bnorth 组件主要基于 flex 布局实现。

点击进入

原文:大专栏  通用 css 样式库 rich.css