What's the best way to handle styles/CSS?

[wilsongomes-swe]

Hi guys!
We're migrationg our web app to Next, in our current app we uso a lot of SCSS... What is the best way to handle styles on Next.js?

Can we use SCSS without any performance threats? Is this ok, or you consider a bad practice?

Thanks so much!!

[Timer]

You should use the built-in support via [file].module.scss! This is the most performant.

https://nextjs.org/docs/basic-features/built-in-css-support

[brunocrosier]

CSS modules are the most performant, but not necessarily the best for readability.

My personal preference is the css prop in styled-components

It looks like this:

<MyComponent
css={css`
color: yellow;
background: blue;
`}
/>

This way you can see each component's styles easily. You can use a custom .babelrc file to enable the css prop without even needing to import it in each file

https://github.com/zeit/next.js/blob/canary/examples/with-styled-components/.babelrc