css - EmberJS CSS 选项

Question

我正在尝试筛选可用于 EmberJS 的所有 CSS 选项/包，并正在寻找建议。我想如果我列出我需要的东西会有所帮助:

1. SASS 语法(变量、嵌套、创建混入和扩展)
2. 能够导入其他 CSS 库
3. Pod 支持(虽然我不确定目前是否会使用此功能，但我至少希望每个路由/组件能够拥有一个 CSS)
4. 自动前缀

是否有一个一体化的 Ember 包可以提供所有这些？谢谢!

Answer 1

SASS syntax (variables, nesting, creating mixins, and extending)

在服用蓝色 SASS 药丸之前，您应该深思熟虑。 SASS 是一种趋于过时的技术，它的设计主要是为了支持一些糟糕的 CSS 编码实践，以及克服早期 CSS 版本的一些缺陷。

postCSS 插件以一种与即将推出的 CSS 变量语法兼容的标准方式支持变量。

嵌套是寻找问题的答案。它助长了一种糟糕的编码风格，涉及对 HTML 结构的过度依赖。正确构造的 CSS 类系统，与 HTML 正交，使嵌套变得不必要。

关于 mixins，我还没有看到真正需要 mixins 或其他更高级的 SASS 功能的真实情况。使用它们，你最终会学习另一种(奇怪的)编程语言，你必须调试它，并确保你团队中的所有人都知道。

当谈到扩展时，CSS 专家反对它。除了潜在的性能和代码大小问题外，它们还隐藏了 CSS 代码的逻辑，并且需要在文件之间来回跳转以进行维护、扩展和调试。通过扩展完成的一切都可以通过适当设计的 CSS 类来处理。

SASS 很慢，是 fork 的(二进制版本与 Ruby 版本)，并且可以产生 strange npm installation problems .我的建议是避免它。

有一篇关于 SASS vs. postCSS 的有趣读物在这里。

Ability to import other CSS libraries

导入其他 CSS 库的能力与您做出的任何其他决定或您选择的包无关。您可以简单地导入这些。

Pod support (although I'm not positive I'll be using this feature at the moment, but I at least want to be able to have one CSS per route/component)

的确如此。至少有一个 new-ish Ember add-on做到这一点(可能还有更多)，恕我直言，它的设计非常糟糕，而且设计过度。它遵循 Ember 的方法，以一种不透明的方式，以“乐于助人”的名义做太多事情(直到没有，这时你就完蛋了)。如果您希望您的 CSS 中充满类似 .my-component-a34fba 的类，这非常好。

除非有更好的选择，否则我会手动执行此操作，这很容易。只需将您的 CSS 文件放入 pod 中，然后从您的 styles/app.css 或等效文件导入您想要的 pod 中的 CSS 文件，例如 @import '../pods/thingie/; 以导入其 index.css 文件。是的，您必须自己对这些导入进行一些维护，但是您有多少个 pod？

为了避免需要不断更新的巨大 styles/app.css，我所做的是在每个 pod 中放置一个 index.css 文件并导入它。从那里，为该目录本身和任何必要的子目录导入样式表:

/* styles/app.css */
@import '../app/pods/thingie';

/* app/pods/thingie/index.css */
@import `./style`;
@import `./subdir1';
@import `./subdir2';

Autoprefixer

你只需看看优秀的 postcss/autoprefixer。

Is there an all-in-one Ember package that will give me all these?

如果我们所有的问题都可以通过一体化软件包来解决，那就太好了。不幸的是，一体式软件包总是缺少我们想要的两个功能，而且我们永远无法弄清楚如何添加它们。他们总是做一件我们不希望他们做的事情，我们永远不知道如何关闭它。他们导入旧版本的子包。当有 Ember 升级时，它们会中断。他们停止维护。可悲的是，Ember 哲学本身助长了这种有害的一体化心态——我所有的问题都可以通过另一个附加组件来解决!

您最好了解各项技术，选择它们的简单、有界、可靠的实现，然后自己将它们组合在一起。只是我的两分钱。