我们的应用程序中有一些自定义样式定义。目前所有的开发者都在为app.css. 但我们不想让它成为一个巨大的文件。而且我们也不想弄乱样式类。
我们如何将自定义样式放置在我们的应用程序中？有最佳实践吗？（欢迎所有指南/文档参考。）
第二个问题：是否有地方放置特定路线或组件的样式？
更新：更具体地说，我想将以下样式仅应用于特定的路由或组件：
body {
font-size: 13px;
}
table {
table-layout: fixed;
}
问问题
6702 次
3 回答
10
CSS 文件的组织是相当主观的。许多人有不同的方法。这是一种对我很有效的方法。请注意，我正在使用ember-cli-sass.
应用程序/样式/app.scss
@import "defaults/variables";
@import "defaults/typography";
// etc...
@import "components/buttons";
@import "components/modals";
// etc...
@import "sections/about";
@import "sections/home";
// etc...
上面列出的所有文件都将被视为“部分”，因此文件名将带有下划线前缀：
├── app.scss
├── defaults
│ ├── _typography.scss
│ └── _variables.scss
├── components
│ ├── _buttons.scss
│ ├── _modals.scss
│ └── _my-specific-component.scss
└── sections
├── _about.scss
└── _home.scss
“默认”样式表旨在提供适用于整个应用程序的通用样式。这通常包括 CSS 重置样式。
“部分”样式表应用特定于某些页面的样式。在模板中，通常有某种包装元素，其 ID 或类对于该页面/部分来说是唯一的。
<section id="home">
<h1>Welcome to my homepage</h1>
<section>
最后，“组件”样式表应用特定于组件类型的样式。其中一些用于各种通用按钮样式，而另一些则非常具体。
于 2016-05-11T17:25:36.853 回答
3
您可以将 css 文件添加到app/styles/目录中。
例子：
app/styles/app.css
于 2016-05-11T09:54:17.240 回答
2
对于您的组件，ember-component-css接近完美，对于您的路线，我回应了 kitler 所说的，使用像 sass/less 这样的预处理器将帮助您为与您的应用程序匹配的样式创建文件夹结构。
你将能够做到这一点
app.scss/.less/.styl 文件在
// app/styles/app.scss
@import 'routes/lovelanguage';
以下是所有预处理器的链接：
于 2016-05-11T14:37:26.600 回答