Where do we store css styles in and Ember CLI Pods app?

Question

I am reading http://www.ember-cli.com/#stylesheets which says:

Ember CLI supports plain CSS out of the box. You can add your css styles to app/styles/app.css and it will be served at assets/application-name.css.

Is there a folder structure convention I should follow? Something like:

app/styles/application.css
app/styles/users/index.css
app/styles/users/new.css
etc

Or is the convention to store all custom css in app.css?

Is there special consideration I should take into account when applying this to a Pods app?

Answer 1

You are not alone in the struggles of dealing with the dreaded global CSS problems that make growing an app unwieldy.

Luckily for you a solution is just around the corner in Ember 2.0 which will be dropping this summer. You can take advantage of this feature now however if you are feeling up to it or simply want to see what I'm talking about in regard to Ember Component CSS by a core member of Ember.js.

https://www.npmjs.com/package/ember-component-css

This isn't a full solution to your problem of course because its simply for components, but since components are an essential part of the Ember workflow now I think you'll find that stashing the CSS/SASS with them will be handy in a pods folder structure.

Most people seem to be breaking css files down into folders named after their routes for organizational purposes.

Update: Pods will be deprecated in a future version of Ember in favor of the Ember core team's new adaptation of a module unification system for managing project resources. You can read more here: https://github.com/emberjs/rfcs/blob/master/text/0143-module-unification.md