EmberJS 使用 Ember.js 时,写 CSS 的正确姿势是什么?

1c7 · 2018年04月16日 · 最后由 1c7 回复于 2018年04月18日 · 6693 次阅读

问题

怎么给不同组件专门的 css 文件?
或者说如何合理组织,便于编写?
(文件该放哪里?有哪些 addon 建议安装,可以简化工作流?)

问之前做过的调查

  1. 谷歌搜 "Ember css" "ember where to put css" 结果并没有什么卵用
  2. 没在 Ember 文档里看到沾边的说明(或者是我没找到):https://guides.emberjs.com/v3.0.0/

原因

最近在定制 Discourse,看代码的时候实在没理解如何避免 CSS 命名冲突:
https://github.com/discourse/discourse/tree/master/app/assets/stylesheets 感谢。

@nightire 有建议吗?感谢

因为你是定制 Discourse,所以你可以选择的余地并不算太灵活,尽管理论上 discourse 同样可以兼容绝大部分的 ember addons,但由于它本身就是一个足够庞大而复杂并且有着很长开发历史和相对多的约定的项目,所以如果你选择一些东西最终的结果恐怕你会给自己找麻烦。

我举个例子好了,如果抛开 Discourse 不谈,一般的 ember 项目想要实现 component scoped css,可以使用 ember-css-modules,这个就是解决你问题的最佳方案。并且它是一个通用的标准(而不是 ember 特有的),背后还有丰富的 postcss 生态支持。但是它不适合和 discourse 整合,因为 css modules 对于样式的编写(特别是 local classname / global classname)有特殊的约定,如果你把它用在 discourse 里,那么你需要改写 discourse 原本的样式(主要是转换类名成为 local or global scoped),这个工作量太庞大了,得不偿失。

至于说 Discourse 自己是怎么组织样式(避免命名冲突),我本人并不是特别了解,因为我没有定制过 discourse。我大概扫了一眼现在它的样式,也没什么特别的,就是自己做的一些命名约定而已,不是什么特别 fancy 的方案,但足够简单。按照 discourse 的架构设计,你要怎么组织 css 其实是绝对自由的,随便你怎么做都好。只要你把样式放在 styles 目录下,你可以自由做目录结构的划分和组织,反正最终会被 bundle 成一个样式文件而已;至于命名冲突,没有特殊的机制来管理,就靠你自己形成约定了。

回过头来再次抛开 discourse 不谈,单说 general ember app,可用的样式处理的方案实在是太多,难以一言蔽之,建议你参考 https://emberobserver.com/categories/styles,里面列举的很全了。

nightire 回复

非常感谢如此详尽的回答!

nightire 回复

是的没错,那个也是我发的贴

nightire 回复

你会时不时上 Ember.js 论坛回答问题?

@1c7 会经常看,很少说话,因为上面高手众多,很少有没人回答的问题,倒是 slack 里面更活跃一些。

nightire 回复

嗯原来这样

需要 登录 后方可回复, 如果你还没有账号请 注册新账号