Feat: Move to SCSS modules in site

[manishprivet]

Summary

Right now we're using normal scss files and class names for styling across the page. But it's starting to show it's side-effects as unrelated/unimported class names/styles are affecting certain pages.

One example can be found here: https://github.com/nodejs/nodejs.dev/pull/1448#issuecomment-865507441

Should we move to use SCSS modules instead? According to Gatsby, it might even give performance benefits while keeping styles scoped to a component.

https://www.gatsbyjs.com/docs/how-to/styling/css-modules/#when-to-use-css-modules

C.C. @nodejs/nodejs-dev

[ovflowd]

@manishprivet do you think you could work on this Issue?

[benhalverson]

What do you mean by scss modules? Is it the newer @use syntax https://css-tricks.com/introducing-sass-modules/

[rodion-arr]

@benhalverson It's about technic for scoping styles to components. This allows to use more generic class names without fear of affecting other components' styles that used same classes

[ovflowd]

Yes, using CSS modules would prevent the styles that are created within file A from affecting other styles or global styles.

The styles defined within layout.scss and mobile.scss should be kept if they're global styles.

Any other style (eg.: component or page-specific style) should move to a new SCSS file, and they should be imported with named imports (import * as styles) so that they're not globally applied.

This is on my list of things to be done.