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

Question

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

Ember CLI supports simple CSS out of the box. You can add your css styles to app / styles / app.css and it will be assets / applications name.css.

Is there a folder structure agreement? Sort of:

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

Or is it an agreement to store all custom css in app.css ?

Is there a special consideration that I have to consider when applying this to a Pods application?

Answer 1

You are not alone in dealing with the terrible global CSS issues that make a growing application cumbersome.

Luckily for you, the solution is around the corner in Ember 2.0, which will fall this summer. You can take advantage of this opportunity, however, if you feel it or just want to see what I'm talking about Ember Component CSS, the core member of Ember.js.

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

This is not a complete solution to your problem, because it is just for the components, but since the components are an integral part of the Ember workflow, I think you will find that writing off CSS / SASS with them will be convenient in the folder structure of folders.

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

Refresh . In a future version of Ember, obsolete versions will use obsolete versions for the new Ember module command to unify the module system for managing project resources. You can read more here: https://github.com/emberjs/rfcs/blob/master/text/0143-module-unification.md

Answer 2

We are developing an add-in that allows you to put your sass files in the pods directory!

Try:

https://github.com/DudaDev/ember-cli-sass-pods

Say that you have a contact route and a contact box component.

Generate a regular route and component:

 ember g route contacts -p ember g component contact-box -p 

Then use the power of ember-cli-sass-pods and create a style:

 ember g style contacts -p ember g style components/contact-box -p 

Your awesome file structure will be:

 app/ app/contacts app/contacts/route.js app/contacts/template.hbs app/contacts/style.scss app/components/ app/components/contact-box app/components/contact-box/component.js app/components/contact-box/template.hbs app/components/contact-box/style.scss 

Answer 3

I am not Ember Guru, however I wanted to call back with some useful conventions and tools that the Ember community accepts regarding style sheets when we adopt a component-based future.

Note: ember-cli and scss .

Via this mail: Agile Design Manifesto . You do not need to embed all your stylesheets in the pod structure to get benefits if you ...

"Organizing SCSS by route and component"

For components, the article assumes that you want your choices to be 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 use Ember identifiers and conventions to ensure that the template with the given ID will be displayed once, and your SCSS code may look like this:

> stylesheets/routes/_posts.scss

 /* Global Styling for the "Posts" resource. It an ID because it guaranteed to only ever appear on the page once. Thanks Ember! */ #posts { @import "show"; @import "new"; @import "edit"; } 

You can use this to override the global style and create an artificial CSS area.

Imported styles of the displayed route can be:

> stylesheets/routes/posts/_show.scss

 /* Styling here is specifically for this on the "Show" route of the "Posts" resource. Most likely, it empty, but it 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 can use a module, for example: ember-cli-sass-pods , so that you can create style sheets in your routes or components. Then you will need to add @import to the generated files in your app.scss file.