Interactive Rating Component using Vanilla CSS, JS, and HTML

Hi Acezalba,

Hope you're keeping well:) I really like your coding solution, and like how you've incorporated semantic tags in your HTML. How you used radio buttons for your rating buttons 1 to 5, and how you used a fieldset, because none of the other submissions I've seen have done that so far. In the CSS I also like how you used :where instead of the :is pseudo-selectors, because of it's zero specificity making it easy to override with your custom CSS.

However, I would make some changes to the code. Then again these are just my opinion so feel free to take this on board or take it with a grain of salt, I wish you all the best either way.

In the HTML:

• I'd recommend looking into BEM Naming Conventions for naming classes. It makes it easier for you to write your class names without having to think too much about it, and it also makes it easier other developers to understand your class names, because the naming convention is quite a logical one. There are two articles I'd recommend reading on it, and once you read them you're pretty much set. The first one talks about how to write using the BEM Naming Convention (https://codeburst.io/understanding-css-bem-naming-convention-a8cca116d252) and the second one talks about common problems you may run into when writing BEM and how to overcome them (https://medium.com/fed-or-dead/battling-bem-5-common-problems-and-how-to-avoid-them-5bbd23dee319)

In the CSS:

• I would recommend grouping your CSS properties into categories, for example sizing properties (padding, margin, width, height, border, etc.) typography-related properties (font-size, line-height, etc.), display properties (flex, grid, flex-direction, grid-template-rows, etc.), positional properties (position, top, left, etc.) appearance properties (color, opacity etc.). And by grouping them I simply mean having an empty line between them.
• If you want to center content in a container I'd recommend doing something like {display:grid; place-content: center}. If this doesn't give you the desired result you could also try place-items:center instead of place-content: center. Here's a video on the two and the difference between them: https://www.youtube.com/watch?v=vNwoDkn7AIc
• You could use variables to set your typography settings too. You could use the prefix fs for font-size, ff for font-family, and fw for font. So, you could have something like --fs-heading (for the heading font size), you could do something like --ff-base and --ff-accent (--ff-base for the base or regular font family used on the site i.e. paragraph text, links, button text, etc., and --ff-accent for the font-family for headings), and finally something like --fw-light for a thin font weight for example a font weight of 100, --fw-normal for font weights like 400, and --fw-bold for font weights like 700, etc. If you want to go for higher font weight you could do something like --fw-bolder, or --fw-black. Writing your variables this way will mean that you don't have to change the variable name from project to project all you have to really change is the value.
• Similarly, instead of writing something like --dark-blue, you’re better off pinpointing what the function of the colour is, whether it’s an accent colour (a colour used sparingly sort to highlight things on the page), a primary colour (the main colour used in the UI) or a neutral colour (white, shades of gray and black). You can also have different shades and tints of accent and primary colours too, and in that case you could do something like --col-primary-100 for a light version of the primary colours, --col-primary-400 for the primary colours in its normal state, and --col-primary-900 for a dark version of the primary colour. Here is an article that goes into more depth on what an accent or primary colour is: https://m2.material.io/design/color/the-color-system.html#color-theme-creation) Writing your colours variables like this also mean you don't have to change them from project to project, because the names aren't linked to the colours you use but rather their function.
• I'd recommend not using the hsl function in your color variables. You're better off just mentioning the values (i.e. '--soft-blue: 215, 51%, 70%' instead of '--soft-blue: hsl(215, 51%, 70%)'). This will allow you to later add an alpha value if needs be. For example, if you wanted the soft-blue colour to have an opacity of 50%, but used the variables the way you've written it you wouldn't have that flexibility to do so. However, if you only used the values, then you could do something like this. 'color: hsl(var(--soft-blue), 50%)'
• I'd recommend using utility classes for things that are repetitive, like display: flex, this reduces the amount of CSS you have to write. For example, instead of writing display: flex in each CSS rule, you could just make a utility class called flex-group, or flex, and have display flex in that CSS rule, and then simply add that class to any of the HTML elements that are either 'display: flex'.
• I'd recommend grouping your CSS and giving them headings to make them more easily navigable for yourself and for other developers too using comments. For example you could have a heading like /CSS Reset/ and then having all your CSS reset rules under it, and then /Global Stylings/ and having all your global stylings there for h1, p, link stylings that are custom to that project, and then /Custom CSS/ which are more specific CSS rules like in your case for selectors like .rating-card button, or .rating-card p, etc.

Hope this helps:)