我们的应用程序中有一些自定义样式定义.目前,所有开发人员都在为app.css添加样式.但我们不想把它变成一个巨大的文件.而且我们也不想弄乱风格类.
我们如何将自定义样式放在我们的应用程序上？有最好的做法吗？ (欢迎所有指南/文件参考.)
第二个问题：是否有地方可以放置特定路线或组件的样式？
更新：更具体地说,我想将以下样式仅应用于特定路由或组件：
body {
font-size: 13px;
}
table {
table-layout: fixed;
}
解决方法
组织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重置样式.
“section”样式表应用特定于某些页面的样式.在模板中,通常有某种包装元素,其ID或类对于该页/节是唯一的.
<section id="home"> <h1>Welcome to my homepage</h1> <section>
最后,“组件”样式表应用特定于组件类型的样式.其中一些用于各种通用按钮样式,而另一些则非常具体.
