EmberJS CSS 选项

Question

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

SASS 语法（变量、嵌套、创建混合和扩展）
能够导入其他 CSS 库
Pod 支持（虽然我不确定目前是否会使用此功能，但我至少希望每个 route/component 能够有一个 CSS）
自动前缀

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

Answer 1

这可能是您正在寻找的最接近的东西：

https://github.com/ebryn/ember-component-css

它支持使用 pods 布局，并允许您使用 ember-cli-sass.

要使用自动前缀，有很多 sass 库可以帮助您，例如 Bourbon.io，您可以通过 npm 安装它们。然后，只需通过 ember-cli-build.js

中的 sass 选项配置导入路径即可

Answer 2

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

在服用蓝色 SASS 药丸之前，您应该深思熟虑。 SASS 是一种趋于过时的技术，主要是为了支持一些不好的 CSS 编码实践，以及克服 CSS.

早期版本的一些缺陷。

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

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

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

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

SASS 很慢，是分叉的（二进制版本与 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 方法，以一种不透明的方式，以成为 "helpful" 的名义做太多事情（直到它不是，这时你就完蛋了）。如果你想让你的 CSS 像 .my-component-a34fba 一样被类乱扔，这就很棒了。

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

为了避免需要不断更新的巨大 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 哲学本身可悲地助长了这种有害的一体化心态——我所有的问题都可以通过另一个附加组件来解决！

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

Answer 3

我推荐 PostCSS。最后我检查了一下，它不能与 ember-component-css 开箱即用，但你不需要 ember-component-css 来命名你的样式。

您可以将 Ember 的组件生成器/蓝图修改为（假设您使用的是 pods）：

将 classNames: ['component-name-here'], 添加到生成的 component.js 文件中。
在 app/styles/components（或类似的）中创建一个 _component-name-here.css file/partial，并使用 class .component-name-here 来包含部分中的所有样式。
如有必要，@import 您 app.css 中的新部分。

然后您所有的组件样式都将被命名空间。

要处理变量、嵌套和 Autoprefixer，您只需要使用正确的插件设置 PostCSS，例如：

  plugins: [
    {
      module: require('postcss-partial-import'),
    },
    {
      module: require('postcss-nested'),
    },
    {
      module: require('postcss-custom-media'),
    },
    {
      module: require('postcss-custom-properties'),
    },
    {
      module: require('autoprefixer'),
      options: { browsers: ['last 2 versions'] }
    },
  ],

我正在使用 ember-cli-css-preprocess，如果您愿意，您也可以选择使用 SASS（与 PostCSS 一起使用）。

EmberJS CSS 选项

EmberJS CSS options

css

ember.js

sass

ember-cli