EmberJS CSS options

Question

I'm trying to sift through all the CSS options / packages available for EmberJS and am looking for suggestions. I suppose it will help if I list what I need:

1. SASS syntax (variables, nesting, creating mixins, and extending)
2. Ability to import other CSS libraries
3. Pod support (although I'm not positive I'll be using this feature at the moment, but I at least want to be able to have one CSS per route/component)
4. Autoprefixer

Is there an all-in-one Ember package that will give me all these? Thanks!

Answer 1

SASS syntax (variables, nesting, creating mixins, and extending)

You should think long and hard before taking the blue SASS pill. SASS is a technology trending towards obsolescence, which was designed mainly to support some bad CSS coding practices, as well as overcome some deficiencies in earlier versions of CSS.

Variables are supported by postCSS plugins in a standard way which is compatible with the upcoming CSS variable syntax.

Nesting is an answer in search of a problem. It promotes a bad style of coding involving excessive dependency on HTML structure. Properly constructed systems of CSS classes, orthogonal to HTML, make nesting unnecessary.

With regards to mixins, I have not seen a real-life situation in which mixins or other more advanced SASS features were actually necessary. Using them, you end up learning yet another (weird) programming language, which you have to debug, and make sure all the people on your team know.

When it comes to extending, CSS experts counsel against it. Besides potential issues of performance and code size, they hide the logic of the CSS code, and require jumping back and forth from file to file to maintain and extend and debug. Everything that is accomplished with extending can be handled with properly-designed CSS classes.

SASS is slow, is bifurcated (binary version vs. Ruby version), and can give rise to strange npm installation problems. My advice is to avoid it.

There is an interesting read about SASS vs. postCSS here.

Ability to import other CSS libraries

Ability to import other CSS libraries is not a function of any other decision you make, or what package you choose. You can simply import these.

Pod support (although I'm not positive I'll be using this feature at the moment, but I at least want to be able to have one CSS per route/component)

Indeed. There is at least one new-ish Ember add-on to do this (and probably more), which IMHO is designed extremely poorly and grossly over-engineered. It follows the Ember approach of doing way too much, in an opaque way, in the name of being "helpful" (until it isn't, at which point you're screwed). This is great if you want your CSS to be littered with classes like .my-component-a34fba.

Until there is a better alternative, I'd do this manually, which is quite easy. Simply place your CSS files in the pod, and then import, from your styles/app.css or equivalent file, the CSS files from the pods you want, such as @import '../pods/thingie/; to import its index.css file. Yes, you will have to do some maintenance of these imports yourself, but how many pods do you have?

What I do to avoid a huge styles/app.css that would require constant updating is to place an index.css file in each pod and import that. From there, import a stylesheet for that directory itself and any necessary subdirectories:

/* styles/app.css */
@import '../app/pods/thingie';

/* app/pods/thingie/index.css */
@import `./style`;
@import `./subdir1';
@import `./subdir2';

Autoprefixer

You need look no further than the excellent postcss/autoprefixer.

Is there an all-in-one Ember package that will give me all these?

It would be nice if all our problems could be handled by all-in-one packages. Unfortunately, all-in-one packages are always missing two features we wanted, and we can never figure out how to add them. They always do one thing we didn't want them to do, and we can never figure how to turn it off. They import old versions of their subpackages. They break when there's an Ember upgrade. They stop being maintained. The Ember philosophy itself sadly promotes this pernicious all-in-one mentality--all my problems can be solved by yet another add-on!

You are better off understanding individual technologies, choosing simple, bounded, reliable implementations of them, and weaving them together yourself. Just my two cents.

Answer 2

This might be the closest thing you're looking for:

https://github.com/ebryn/ember-component-css

Which supports using pods layout, and lets you use ember-cli-sass.

To use auto-prefixing, there are plenty of sass libraries out there to help you out, like Bourbon.io, which you can install via npm. Then, it should just be matter of configuring the import paths via the sass options in the ember-cli-build.js

Answer 3

I recommend PostCSS. Last I checked, it doesn't work out-of-the-box with ember-component-css, but you don't need ember-component-css to namespace your styles.

You can modify Ember's Component generator / blueprint to (assuming you're using pods):

• Add classNames: ['component-name-here'], to the generated component.js file.
• Create a _component-name-here.css file/partial in app/styles/components (or similar), with a class .component-name-here to contain all styles in the partial.
• If necessary, @import that new partial in your app.css.

Then all your Component styles will be namespaced.

To handle variables, nesting and Autoprefixer, you just need to set up PostCSS with the right plugins, e.g.:

  plugins: [
    {
      module: require('postcss-partial-import'),
    },
    {
      module: require('postcss-nested'),
    },
    {
      module: require('postcss-custom-media'),
    },
    {
      module: require('postcss-custom-properties'),
    },
    {
      module: require('autoprefixer'),
      options: { browsers: ['last 2 versions'] }
    },
  ],

I'm using ember-cli-css-preprocess, which gives you the option to use SASS as well (alongside PostCSS), if you wish.