What is the ideal architecture for styles files?

1

I am currently learning Ember by working on a project, and I’ve been searching for best practices on organizing component-related files (template, controller, and styles) in a way that keeps them co-located. Specifically, I’m unsure whether it’s better to include individual style files within the component folder or to place all .css files in the central styles folder.

For example, here’s the structure I’m following:

components/test-component/test-component.hbs
components/test-component/test-component.js
components/test-component/test-component.css

However, this setup leads to the following error:

localhost/:1 Refused to apply style from ‘http://localhost:4200/app/components/downloadable-files.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I’m not using SCSS; I want to use plain CSS in my project. Currently, the only solution that works is placing all styles in app.css, but I know that isn’t considered a good practice.

I’ve come across various, often inconsistent answers online, and the guidance seems to vary depending on the Ember version and Ember-CLI setup. Could you share the architecture you follow for styling components and what you consider best practices for managing styles in Ember?

2

often inconsistent answers online, and the guidance seems to vary depending on the Ember version and Ember-CLI setup

yea, in modern ember, we like co-locating everything.

To make css work how you have it, co-located, you’ll want to import the styles as a side-effecting import, e.g.:

import './my-styles.css'

or, using use the imported json structure to to assign styles

// my-component.gjs
import styles from './my-styles.css'

<template>
  <div class="global-style {{styles.scopedStyle}}">...</div>
</template>

Or you can use an addon to have behaviors in addition to what the default webpack behavior defines, such as:

which has you define styles in your <template> tags / gjs/gts files and automatically scopes them:

<template>
  <div class="foo"></div>

  <style>
    .foo {
      color: red
    }
  </style>
</template>

See another approach: Exploring Ember Polaris: CSS Modules Without Addons

1 Like
3

Not an answer for everyone but on small projects I tend to have the following file structure:

app
├── components
│   └── my-component
│       └── index.hbs
└── styles
    ├── app.css
    └── components
        └── my-component.css

My app.css will have an import:

@import './components/my-component.css';

My index.hbs will make sure to have a reference to the component name in the class:

<div class="my-component" ...attributes>
  <div class="child">....</div>
  .. stuff ..
</div>

And the my-component.css uses nested scopes:

.my-component {
  /* .. nested selectors/rules/etc. .. */
  .child 
    font-weight: bold;
  }
}