z-data 4.0 发布: 内置原子化 CSS 引擎

← 目录
作者: 一了 <[email protected]>
日期: 2026-08-17

z-data 一周年
z-data 二周年
z-data 前端框架的来历
https://github.com/Funlang/z-data

- 2026-08-16
  z-data v4.0.0 开源发布
  tag: v4.0.0, 发布说明: "+ atomic CSS engine"

z-data 是一个极轻量的嵌入式前端框架:

  - 无虚拟 DOM, 直接操作 HTML DOM, 性能好
  - 零配置, 零依赖, 无需构建, 单个 JS 文件即插即用
  - 极小: 压缩后约 8K, gzip 后 < 5K
  - 可用 <template> 做 for / if / else / use
  - 支持 : / :: / . / .. / # / ! / @ 等丰富的语法糖
  - 可与 Vue、Alpine 等框架共存 (加 z-none / x-ignore 即可)

4.0 的重点, 是内置一套"原子化 CSS"规则引擎.

什么是原子化 CSS?
  传统写法是给元素一个 class, 再在 <style> 或 CSS 文件里
  写 .card { padding: 16px; border-radius: 8px; ... }.
  原子化则是把每一条样式拆成一个"原子": 一个属性名只对应
  一个属性值, 例如 p1 = padding, brad2 = border-radius.
  想要哪条样式, 就把对应原子拼到 HTML 上即可.
  纯数字原子默认按 N/4 rem 换算 (源码 css/atomic-css-rules.txt 的
  NUMS 规则): p1 = 0.25rem, p4 = 1rem.

z-data 的原子化 CSS 有什么不同?
  它不需要 Tailwind, 不需要构建工具. 规则定义写在仓库 css/
  目录 (css/atomic-css-rules.txt 为规则定义, rule-compiler.fun
  为编译器, z-css.js 为运行时), 编译后并进 z-data.min.all.js.
  你在 HTML 属性里直接写缩写标记, 运行时把它编译成 CSS 选择器,
  并自动注入到 <style id="z-data-ss"> 中. 即开即用.

示例 (在线演示):
  
    https://www.funlang.org/z-data/#url=./test/test-css.html

先看模板循环部分:

  z-data
  <div>
    <template for="k:i in ['a','b','c']">
      <template for="kk:ii in [1,2,3]">
        <div :text="i+','+ii"></div>
      </template>
    </template>
    ...
  </div>

  双层 for 循环, 渲染出 a,1 ... c,3 一共 9 个格子,
  :text=... 是文本绑定语法糖.

再看原子化 CSS 的 Hello world 部分:

  <div
    hover=c#88f
    c#f88
    b#0af
    p18
    m18
    brad50%
    bd="width: 12px; style: dashed; color: #ff0"
    font="size=100px; weight: bolder; variant: small-caps"
    !ta=center
    !-webkit-text-stroke="3px gold"
    !text-shadow="4px 4px 8px white"
    !box-shadow="4px 4px 28px 1px #000"
    after="content-+ pos-absolute l0 b0"
  >Hello world</div>

  逐条解释:
    hover=c#88f    :hover 时 color: #88f        (状态伪类)
    c#f88          color: #f88                 (颜色简写)
    b#0af          background: #0af            (背景简写)
    p18            内边距 padding
    m18            外边距 margin
    brad50%        border-radius: 50%
    bd="..."       边框分组: 宽度/线型/颜色
    font="..."     字体分组: 字号/字重/小型大写
    !ta=center     text-align: center          (! 表字符串值)
    !text-shadow / !box-shadow / !-webkit-text-stroke
                   文本阴影 / 盒阴影 / 文字描边
    after="..."    ::after 伪元素: content "+", 绝对定位
                   l0 左 0, b0 底 0

再看一个更花哨的"超极菜单":

  <div d-none mt-40 ml-20 p20 pos-absolute w200 h80 font7.5 lh9
       !font-variant=small-caps
       !--c=#fa0 !--b=#fff !--a=#0000
       !bg=var(--c) !c=var(--b)>
    <div pos-absolute t15 l36 w20 lh16 p2 !ta=center !c=var(--c) font10
         !bg='linear-gradient(...)' !background-position=...
         !background-size='16px 16px' !font-weight=bolder
         !-webkit-text-stroke='2.2px var(--b)'>美牛</div>
    <div pos-absolute l60 font20>超极菜单</div>
    <div pos-absolute t38 l59 p2 font11 !letter-spacing=6px>super</div>
    <div pos-absolute t38 l92 p2 font11 !font-weight=bold
         !letter-spacing=6px>menu</div>
    <div pos-absolute t39.5 l126 p.9 px1.8 brad2
         bd="width: 1px; style: solid">S</div>
  </div>

  这里用到的技巧:
    d-none         display: none              (display 缩写)
    mt-40 ml-20    margin-top / margin-left
    pos-absolute   position: absolute         (位置缩写)
    w200 h80       宽 / 高
    t15 l36        定位 top / left
    !--c=#fa0      定义 CSS 变量 --c          (用 ! 写字符串值)
    !bg=var(--c)   背景引用变量
    纯用原子标记 + CSS 变量, 就拼出一个图文并茂的菜单.

规则速查 (摘自 css/README.md):
  内边距/外边距   pm        p0, m.1, pl2, mt3px, px4%, m--varname
  尺寸/行高/圆角   h/w/font/lh/gap/brad    h1, w2, font12px, lh2, brad2
  方位             l/t/r/b                 l0, t1, r2pt, b3px
  透明度/层级       op/ord/z                op.1, ord2, z3
  定位/显示         pos/d/cs/v/ws/us/pe     pos-absolute, d-block
  溢出             o/ox/oy                 o-scroll, oy-hidden
  内容/颜色/背景    content/c/b             content-x, c#000, b#fff
  媒体查询         s:p0, sm/md/lg/xl/2xl/print
  状态伪类         hover/focus/active/after/before/(first|last)
  前置伪类         a- / a^ / a+ / a~ / not-
  分组             bd/bl/bt/br/bb/bg/a/al/font/flex/grid/mask

常用属性简写对照 (编程 API):
  ZData.ss('pos')    -> "position"
  ZData.ss('brad')   -> "border-radius"

  // 直接注入一段 CSS
  ZDataStyle.add({ '.foo': { color: '#f00' } });

浏览器兼容:
  z-data.min.js              2017: Chrome 61, Firefox 55, Opera 48
  z-data.min.es2015.js / all 2016: Chrome 49, Firefox 44, Opera 36

小结:
  4.0 让"样式"这件事也能像数据绑定一样, 直接写在 HTML 属性里,
  零构建、零依赖, 保持了 z-data 一贯的"极轻量"哲学.
  想体验的, 打开在线演示拖一拖就明白了.