Question

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

SASS语法（变量，嵌套，创建混合和扩展）
能够导入其他CSS库
Pod支持（虽然我不肯定，我现在将使用此功能，但我至少希望每个路由/组件能够拥有一个CSS）
Autoprefixer

是否有一个一体化的Ember套餐会给我这些所有这些？谢谢！

Answer 1

SASS语法（变量，嵌套，创建混合和扩展）

在服用蓝色SASS药丸之前，你应该认真思考。 SASS是一种趋向于过时的技术，主要用于支持一些不良的CSS编码实践，以及克服早期版本CSS中的一些缺陷。

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

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

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

在扩展方面，CSS专家对此提出建议。除了潜在的性能和代码大小问题外，它们还隐藏了CSS代码的逻辑，并且需要在文件之间来回跳转以进行维护，扩展和调试。通过适当设计的CSS类可以处理通过扩展完成的所有操作。

SASS很慢，分叉（二进制版本与Ruby版本），并且可以产生strange npm installation problems。我的建议是避免它。

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

能够导入其他CSS库

导入其他CSS库的能力不是您做出的任何其他决定或您选择的包的功能。你可以简单地导入它们。

Pod支持（虽然我不肯定，我现在将使用此功能，但我至少希望每个路由/组件能够拥有一个CSS）

事实上。至少有一个new-ish Ember add-on可以做到这一点（可能更多），恕我直言设计极其糟糕且过度设计过度。它遵循Ember方法，以一种不透明的方式，以“有帮助”的名义做太多的方式（直到它不是，此时你被搞砸了）。如果你希望你的CSS充满.my-component-a34fba这样的类，那就太棒了。

除非有更好的选择，我会手动完成，这很容易。只需将CSS文件放入窗格中，然后从styles/app.css或等效文件中导入所需窗格中的CSS文件，例如@import '../pods/thingie/;即可导入其index.css文件。是的，您必须自己对这些进口进行一些维护，但是您有多少个吊舱？

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

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

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

Autoprefixer

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

是否有一个一体化的Ember套餐能给我这些所有这些？

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

您最好了解各项技术，选择简单，有限，可靠的实施方法，并将它们自己编织在一起。只是我的两分钱。

Answer 2

这可能是您最接近的事情：

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

支持使用pods布局，并允许你使用ember-cli-sass。

要使用自动前缀，有很多sass库可以帮助你，比如Bourbon.io，你可以通过npm安装。然后，只需通过ember-cli-build.js中的sass选项配置导入路径

Answer 3

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

您可以将Ember的Component generator / blueprint修改为（假设您正在使用pod）：

将classNames: ['component-name-here'],添加到生成的component.js文件中。
在_component-name-here.css（或类似）中创建app/styles/components个文件/部分，并使用类.component-name-here包含部分中的所有样式。
如有必要，@import app.css中的新部分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'] } }, ],。{/ 1>

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

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

@Html.Raw(Json.Encode(Model.MyFormats)

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

EmberJS CSS选项

3 个答案: