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;
}

https://github.com/discourse/discourse/tree/master/app/assets/stylesheets — YOU, May 11 '16 at 07:08
If you use sass/less you can break them down into multiple files and import them in `app.scss` — Patsy Issa, May 11 '16 at 07:58

Andrew · Answer 1 · 2016-05-11T17:34:29.053

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.

score 4 · Answer 2 · answered May 11 '16 at 09:54

4

You can add your css files into app/styles/ directory.

example:

app/styles/app.css

answered May 11 '16 at 09:54

Amol Udage

2,917
19
27

Worked for me like this. – R Sun Sep 13 '17 at 20:33
@SiteTester Great. Please `upvote` if you found this answer helpful. – Amol Udage Sep 14 '17 at 09:17

score 2 · Answer 3 · answered May 11 '16 at 14:37

For your components, ember-component-css is close to perfect, for your routes I echo what kitler said, using a pre-processor like sass/less will help you create a folder structure for your styles that match your app.

You'll be able to do that with a

app.scss/.less/.styl file in

// app/styles/app.scss

@import 'routes/lovelanguage';

Here are links to all the preprocessors:

Where to place CSS files in Ember.js?

3 Answers3