CODEWITHSUNDEEP
cssember.jsember-components
ykaragol
ykaragol

Reputation: 6221

Where to place CSS files in Ember.js?

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

Upvotes: 7

Views: 8040

Answers (3)

Andrew
Andrew

Reputation: 238667

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.

Upvotes: 11

TameBadger
TameBadger

Reputation: 1590

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:

Upvotes: 2

Amol Udage
Amol Udage

Reputation: 3075

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

example:

app/styles/app.css

Upvotes: 4

Related Questions