6 Tips For Transitioning To Ember CSS Modules

A few tips as you transition your SASS, LESS, PostCSS or plain CSS to using CSS Modules, and specifically for Ember (not sure what the differences are).

Use local-class Instead of class

This is Ember only, and is just a requirement at the moment. This attribute is used to convert the generated classes and insert them into your template.If you pierce component styles (see next section), you should leave your old class until you migrate away.

Add Classes to Components Used In Templates

CSS Modules don't let you style inside of components you use in your template, so you need to add a class.

<User local-class="user" />

Is required to target that component, otherwise you'd have to use :global, which should be used sparingly. If you need to expose deeper classes, then it's recommended to add arguments, like @roleClass and using the helper:

<User local-class="user" @roleClass={{local-class "role"}} />

Use :global Sparingly

It's alright to use :global if you do lots of component piercing and are migrating, but I recommend setting up stylelint and using the selector-pseudo-class-no-unknown rule, so you can catch missed globals when you go to refactor:

module.exports = {
  rules: {
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: ["global"],
      },
    ],
  },
};

Wrap IDs in :global

IDs get transformed, not sure why, so use :global(#my-id) {}.

Refactor Away From Component CSS Parent Selector

The following is not supported to target the default element (in classic components, or the route namespace):

& {
  display: flex;
}

You need to wrap that template in a new class, like .page. This is especially true if you are transitioning to Glimmer components.

Don't Use Element Selectors In The Top-Level

You must include selectors like h1, a, p inside of a class in your style file, otherwise those will apply to your whole app.This is because the style file doesn't get its own namespace, only the classes (and IDs) inside the file are renamed.

Works Well With TailwindCSS

In the past I've used Tailwind and have wondered about the case where you need to define your own components, it seemed like back to the same old CSS with it's normal limitations. CSS Modules enter stage right, and it's a great combination of using a subset of CSS and for the last 10% you dip into CSS Modules which live right next to your components.

I've also been working on SubsetCSS as a side project and it helps with keeping the same subset of CSS that Tailwind uses, so you can keep consistent styles across your whole codebase.

Repost of https://ilyaradchenko.com/6-tips-for-transitioning-to-ember-css-modules