feat: 考虑支持超合金组件

[XDcedar]

虽然现在应该不会考虑支持超合金组件，不过感觉还是有必要讨论一下这个问题，不希望新站点一出来所有超合金组件全都没法维护了。姑且先开个 Issue。

我想到两点需要考虑：

• 类名。超合金组件经常需要查找页面元素，如果新站点仅仅是布局变了，那组件作者跟进修改一下就好，但是新站点使用了 CSS Modules，页面元素的类名会有易变动的后缀，不方便解析，也比较影响组件代码的可读性。我觉得需要想个方法规避这个问题。比如，专门添加一个类，不添加样式，只为了方便组件通过类名查找元素？
  参考 @FoundTheWOUT 在 [Feature Request]: 支持超合金组件 server#266 (comment) 提供的思路：

  1. 区分网站样式与 design 包样式，比如加个前缀 _website_
  2. website 包下的组件样式可以直接取组件名作为 suffix
  3. 而页面样式比如 index.module.less 或者 style.module.less 可以从路径入手，也可以按照某种约定（比如路由地址）修改现有样式名，再直接用该名作为 suffix。

• 前端API。添加一个 API 方便超合金组件创建风格统一的页面元素，比如按钮、标签、菜单等。类似于 chiiLib（虽然 chiiLib 好像没有创建页面元素的功能）？

参考：bangumi/server#266

[cokemine]

我更加在意的是超合金组件在 CSR 下的实现问题。比如执行超合金代码的时候如果没有渲染完成，可能会出问题。不知道好不好实现

[XDcedar]

tampermonkey 有个 @run-at 的 metadata 可以控制，但现在超合金组件好像只会在页面加载完成、图片等资源加载之前执行，应该相当于 @run-at document-end 吧。毕竟做法是在页面里插入一个 <script> 标签..
感觉这个问题可以暂时交给组件作者考虑？

[Ayase-252]

考虑渲染完成 useEffect 里面抛一个自定义事件？组件作者监听这个事件。（但是对于需要请求 API 的还是难处理）

[FoundTheWOUT]

说实话，感觉就算修改 CSS Modules 的命名生成规则去解决这个问题感觉还是有点戴着镣铐跳舞。CSS Modules 本身的目的就是通过哈希建立css scope，现在改了这个感觉未来难免会出现什么问题。针对超合金组件之类的支持，用 BEM 也许才是更合理的方式。

[XDcedar]

说实话，感觉就算修改 CSS Modules 的命名生成规则去解决这个问题感觉还是有点戴着镣铐跳舞。CSS Modules 本身的目的就是通过哈希建立css scope，现在改了这个感觉未来难免会出现什么问题。针对超合金组件之类的支持，用 BEM 也许才是更合理的方式。

我的意思不是改，是添加一个没有哈希的 scope，这个 scope 没有样式，只是方便组件而已。组件之间的冲突可以交给组件开发者处理。
BEM 应该只是个命名规则吧，这怎么跟 CSS Modules 结合？

[FoundTheWOUT]

是添加一个没有哈希的 scope

你可以去尝试一下，其实没那么容易直接去掉哈希。

BEM 应该只是个命名规则吧，这怎么跟 CSS Modules 结合？

这两者的目标都是解决 css 污染问题。不是结合，而是选择哪种框架的问题。当然这两者并不冲突，使用 BEM 的时候可以用 CSS Modules，但既然已经使用 BEM 规则避免了污染了，还要 CSS Modules 干嘛。

[XDcedar]

你可以去尝试一下，其实没那么容易直接去掉哈希。

是嘛..我不懂这么深..但是按我在主楼引用的那段话的意思，直接用该名作为 suffix 就能去掉哈希了啊，这个命名应该是自定义的吧，文档也是这么写的：https://github.com/madyankin/postcss-modules#generating-scoped-names，有个 generateScopedName 的选项

这两者的目标都是解决 css 污染问题。不是结合，而是选择哪种框架的问题。当然这两者并不冲突，使用 BEM 的时候可以用 CSS Modules，但既然已经使用 BEM 规则避免了污染了，还要 CSS Modules 干嘛。

但问题是，现在的开发已经用上 CSS Modules 了，很难改了

[FoundTheWOUT]

直接用该名作为 suffix 就能去掉哈希了啊

要考虑冲突问题，比如两个不同的 CSS Modules 文件都是 wrapper 呢？你是不是需要根据一些其它的规则去建立 scope。

但问题是，现在的开发已经用上 CSS Modules 了，很难改了

所以才发出来讨论嘛，看大伙有什么看法和方案。 其实现在这个开发进度，页面也不是特别多，还是有机会的（逃

[XDcedar]

要考虑冲突问题，比如两个不同的 CSS Modules 文件都是 wrapper 呢？你是不是需要根据一些其它的规则去建立 scope。

有没有例子？我不太懂具体会产生什么样的 scope..
我现在觉得不用，两个 wrapper 就随便选一个。这个 scope 不影响布局，就是方便超合金组件引用的。比如 <h1 class="_website_title _title_[hash]">，只有 _title_[hash] 有对应的 CSS 文件，_website_title 没有，超合金组件里就可以直接 querySelector("._website_title")。冲突了就冲突了，让组件作者自己想办法。也许选择器写长一点就解决了？

其实现在这个开发进度，页面也不是特别多，还是有机会的（逃

那我全票支持换框架！感觉 bangumi 的页面应该也不需要考虑太多命名冲突问题..

[FoundTheWOUT]

可能你说的 prefix 和我说的 prefix 不是一回事，你的意思其实就是加多个类名作为锚点嘛。这个确实是对现在项目改动较小的方案，就是工作量和改框架没啥区别~

[XDcedar]

就是工作量和改框架没啥区别~

啊这..那，那我支持改框架 😂

哎呀，我刚发现主楼的引用就是你说的 😂

[cokemine]

说实话，感觉就算修改 CSS Modules 的命名生成规则去解决这个问题感觉还是有点戴着镣铐跳舞。CSS Modules 本身的目的就是通过哈希建立css scope，现在改了这个感觉未来难免会出现什么问题。针对超合金组件之类的支持，用 BEM 也许才是更合理的方式。

当时是考虑到组件库和主站都用 BEM 的（用prefix区分）后来觉得太麻烦了主站就CSS Modules了。
其实我更喜欢CSS IN JS，不过这样好像更不是很好做超合金组件了

[cokemine]

要考虑冲突问题，比如两个不同的 CSS Modules 文件都是 wrapper 呢？你是不是需要根据一些其它的规则去建立 scope。

有没有例子？我不太懂具体会产生什么样的 scope.. 我现在觉得不用，两个 wrapper 就随便选一个。这个 scope 不影响布局，就是方便超合金组件引用的。比如 <h1 class="_website_title _title_[hash]">，只有 _title_[hash] 有对应的 CSS 文件，_website_title 没有，超合金组件里就可以直接 querySelector("._website_title")。冲突了就冲突了，让组件作者自己想办法。也许选择器写长一点就解决了？

其实现在这个开发进度，页面也不是特别多，还是有机会的（逃

那我全票支持换框架！感觉 bangumi 的页面应该也不需要考虑太多命名冲突问题..

多加几个没样式的class和我之前说的多加几个id差不多吧（

样式迁移倒是不麻烦。主要是 CSR 下超合金脚本的执行时机问题还是有些麻烦

[XDcedar]

多加几个没样式的class和我之前说的多加几个id差不多吧（

那还是不一样，毕竟id不能重复（

样式迁移倒是不麻烦。主要是 CSR 下超合金脚本的执行时机问题还是有些麻烦

我觉得，既然 tampermonkey 有解决办法，那这个应该也会有吧。就算没有，像主站那样直接在页面里加个 <script> 标签也不是不可以（