How to migrate an existing sass codebase to emotion ?

[raphaelbadia]

Hello,

I'm working on a quite large website built with sass and following (at least trying) atomic design rules. It's becoming very hard to maintain the existing css and we are willing to migrate to css in js.

The problem is that I don't know from what end we should start to refactor.
I fear that if we start from atoms (small components such as Buttons, Links, Text...), the generated classNames will break the specificity all over the website.

Maybe we should start from pages and go down, but it doesn't feel right...

If someone successfully managed to migrate its website from sass to styled-components slowly, please advise !

Thanks

[Andarist]

Refactoring from the atoms sounds good to me - create reusable components this way.

I don't think you should have many problems with specificity because Emotion will generate low-specificity classes, so whatever you have with stronger specificity should win over this.

[lucksp]

I couple of ideas here:

1. start with simple classnames being converted:
   <button class="myButton" /> to <StyledButton /> so that the styles can be easily ported:

export const StyledButton = styled.button`
  background-color: blue;
`;

2. if you have <button class="myButton override" /> then you can start taking advantage of CSS in JS like:

 `<StyledButton override/>` 

export const StyledButton = styled.button`
  background-color: ${props.override ? red : blue};
`;
or 

<OverrideButton />

export const OverrideButton = styled(StyledButton)`
  background-color: red;
`;

this will help break apart simple components before trying to convert bigger features...

3. which can still be done so your outer wrapper is using the unique generation classname & then you can reuse inner component classnames. This isn't necessarily "best practice" but lets you iterate.