+++
title = "暴论：ImGui是后现代 CSS-in-JS。"
date = 2023-08-17
authors = ["135e2 (Mole Shang)"]
[taxonomies]
tags = ["随想", "技术"]
+++

* 注：本文中所有出现的 `ImGui` 一词，均代指「即时模式GUI框架(Immediate mode GUI)」，而非 [Dear ImGui](https://github.com/ocornut/imgui) 。

<!-- more -->

闲来无事，尝试了一堆 [ImGui 框架](https://en.wikipedia.org/wiki/Immediate_mode_GUI) 。

想法很美好，现实倒是依旧一样地骨感。一旦涉及复杂layout嵌套、多种样式排版、动态窗口大小适配等种种甚至不算高级的需求，就不得不依赖开发者自己造轮子解决。suckless.org [早已把 Nuklear 列入了推荐库列表](https://suckless.org/rocks/)，但当我们做一个GUI框架、面对一切UI/UX设计体验问题的时候，「Keep it simple, stupid」的哲学又是否依旧适用？

Just an FYI, nuklear 的 CJK 支持[目前依旧半死不活](https://github.com/Immediate-Mode-UI/Nuklear/issues/542)。什么，你不想引入ICU和Harfbuzz？等着处理114514个edge case吧。Unicode留下的历史债，你不还没人帮你还.jpg

没有人会反对Glib + GTK是依托答辩，但连Gnome都懂得帮你包好底层图形栈、顺便仍给你一套 [UI Builder](https://wiki.gnome.org/Apps/Glade) 跟 [设计规范](https://developer.gnome.org/hig/)，大家骂归骂，满足需求的东西才不会止步于「开发者的玩具」。

做GUI绝对不只是开发这一环的事情。不用写事件驱动爽是真的爽，但在ImGui社区能拿出一套完备的体系之前，我依旧难对这套东西持乐观态度。散了散了，大家都去用Qt吧。

---

> BTW: ImGui 这一套样式写法，无端幻视 css-in-js 🤔 🤔 🤔

```javascript
// JSS
jss.setup(preset())
const style = {
  myButton: {
    color: 'green'
  }
}
const sheet = jss.createStyleSheet(style)
sheet.attach()
```

```c
/* Nuklear */
struct nk_color table[NK_COLOR_COUNT];
table[NK_COLOR_SCROLLBAR] = nk_rgba(50, 58, 61, 255);
table[NK_COLOR_SCROLLBAR_CURSOR] = nk_rgba(48, 83, 111, 255);
nk_style_from_table(ctx, table);
```

```cpp
/* Dear ImGui */
ImGuiStyle* style = dst ? dst : &ImGui::GetStyle();
ImVec4* colors = style->Colors;

colors[ImGuiCol_Text] = ImVec4(1.00f, 1.00f, 1.00f, 1.00f);
colors[ImGuiCol_ScrollbarBg] = ImVec4(0.02f, 0.02f, 0.02f, 0.53f);

```

![css-in-js.png](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/05/aKsPahlPZ8qr6R8aVCancNsC_LOuKlcpBo-Ys44a1ya3QDvoLabbiBTYf36xX90hAfgMxgvBjMxxuBgIGnzH-_NId-71NfK7hh-ZFBJizZF6l3A4sLgb2vyYKgwnod86YBoLsE4.png)