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
Top comments (0)