Results Summary Component with JS Webpack and SCSS

Hey,

First off, your solution looks great. And it's nice that you made a detailed README, as well. To answer your questions - or more like, I guess to just add my own take on it:

You will not get a clear answer from ChatGPT, documentation, etc purely because there isn't one best way to write CSS, or code in general. Everyone has their own preferences. In professional settings, there will be company/team guidelines you will need to follow. If you work alone, you can set your own rules. You should ask yourself, how readable your code is. Would you understand it even if you came back to it in a few months?

But to be a bit more useful, I can give you my own opinion on this.

CSS vs SCSS

For small projects, I tend to go for vanilla CSS. Nowadays vanilla CSS is great and it has almost every feature you'd ever need. With the exception of nesting, which doesn't have a great browser support as of yet. If the code is getting longer and I'm not using a framework and my CSS lives in one file, then I go for SCSS. I love it, nesting is easily and improves readability, especially if you follow BEM class naming. +1: If you feel comfortable with CSS, you could look into Tailwind. I'm using Tailwind for most of my projects as of late, and I hugely prefer it over regular CSS or SCSS. If you know what you're doing, it can be an incredibly fast way of styling a page.

Units

Eh, this is a tough one. I use em/rem for almost everything (paddings, margins, max-width, etc). For very small things, like border-radius or box-shadow, I use px. vh/vw I use if I want to position stuff in the background - or giving the body a min-height of 100vh. % I honestly rarely use, but I'm sure there are use cases of it. I'd suggest you try a few approaches, but don't stress over this too much. As long as you're using rems and not pixels and not setting a fixed width and height on things, you're mostly good to go.

Looking at your code what you could do: stop using px for font-size. Rem is the most optimal for this. The height on the body has to be min-height. Margins, paddings you can set in em or rem, vmin... (Kevin Powell has loads of videos on this, with examples).

Grid&Flexbox

Again, whatever works for you. In this regard, as long as it looks good, there isn't really a bad way to do it or such things as too much flexbox.

Ok, I think I wrote enough. :)) As I mentioned, if you don't already know Kevin Powell's channel, do check it out, he has a video on everything that is CSS related, probably. You did great, I'd suggest not to stress too much and just practice. :) You'll get a feel to it.