Where to place CSS files in Ember.js?

Question

We have some custom style definitions in our application. Currently all developers are adding styles to the app.css. But we don't want to make it a huge file. And also we don't want to mess the style classes.

How can we place our custom styles on our application? Is there a best practices to do it? (All guide/document references are welcome.)

And a second question: Is there a place to put styles of a specific route or component?

Updated: To be more specific, I want to apply the following style to only a specific route or component:

body {
  font-size: 13px;
}
table {
  table-layout: fixed;
}

Answer 1

Organization of your CSS files is rather subjective. Many people have different approaches. Here's an approach that works well for me. Note that I am using ember-cli-sass.

app/styles/app.scss

@import "defaults/variables";
@import "defaults/typography";
// etc...

@import "components/buttons";
@import "components/modals";
// etc...

@import "sections/about";
@import "sections/home";
// etc...

All of the files listed above would be considered "partials", so the filenames would be prefixed with an underscore:

├── app.scss
├── defaults
│   ├── _typography.scss
│   └── _variables.scss
├── components
│   ├── _buttons.scss
│   ├── _modals.scss
│   └── _my-specific-component.scss
└── sections
    ├── _about.scss
    └── _home.scss

The "default" stylesheets are meant to provide generic styles that apply throughout the app. This includes typically CSS reset styles.

The "section" stylesheets apply styles that are specific to certain pages. In the templates, usually there is some sort of wrapper element with an ID or class that is unique to that page/section.

<section id="home">
  <h1>Welcome to my homepage</h1>
<section>

Lastly, the "component" stylesheets apply styles that are specific to the type of component. Some of these are for various generic button styles, while others are extremely specific.