I'm no Ember Guru, however I wanted to chime in with some helpful conventions and tools the Ember community is adopting regarding stylesheets as we embrace a component based future.
Note requires: ember-cli and scss.
Via this post: An Agile Design Manifesto.
You don't necessary need to insert all your stylesheets into a pod structure, to get the benefits, as long as you...
"Organize SCSS by Route & Component"
For components, the article suggests you want to keep your selections global:
> stylesheets/components/_flash_messages.scss
/*
Base Styling for the Flash Messages component - how it will appear globally.
*/
.flash-messages {
background-color: $default-flash-color;
}
For resources you can leverage ID selectors and Ember's conventions to ensure that a template with a given ID only appears once and your SCSS code might look like:
> stylesheets/routes/_posts.scss
/*
Global Styling for the "Posts" resource.
It's an ID because it's guaranteed to only ever appear on the page once.
Thanks Ember!
*/
#posts {
@import "show";
@import "new";
@import "edit";
}
You can use this to override global styling and create a faux CSS scope.
The imported show route styles could then be:
> stylesheets/routes/posts/_show.scss
/*
Styling here is specifically for this on the "Show" route of the "Posts" resource.
Most likely, it's empty, but it's a good place to override the global appearance of components, and ensure those changes are contained to this route only.
*/
#posts-show {
.flash-messages {
background-color: $posts-show-flash-color;
}
}
Given these recommendations you could use a module like: ember-cli-sass-pods to allow you to generate stylesheets in your routes or component pods. You would then need to add the @import declarations to the generated files in your app.scss file.
