Submitted 8 months ago

Interactive Rating without framework

DevAilurus•10

@DevAilurus

A solution to the Interactive rating component challenge

Preview Code

Solution retrospective

What challenges did you encounter, and how did you overcome them?

Rediscovering native JavaScript is a pleasure after spending six years working with JS frameworks.

What specific areas of your project would you like help with?

It's possible that the naming of my classes is more suited to SCSS. Do you have specific naming conventions when you're using just plain CSS?

Code

Please log in to post a comment

Community feedback

tOnski86•330
@tOnski86
Posted 8 months ago
This is a great question and hopefully can spark some sort of a discussion. Since you're referring to vanilla CSS, I'll come up with my two cents and hopefully the experts can weigh in on this.

My take: Vanilla CSS Checking out your code, I see that there are a few routes you can go to. For one, you are prefixing most of your classes with .card-content. Here's how I would probably approach it.
- Using the child combinator. Let's use both .card-content-title and .card-content-description as an example. These refer to both your H1 and p in your HTML markup. I would probably go with .card-content > H1 and .card-content > p on this, explicitly specifying that I only want styles to apply to the direct children of a .card-content div.
- Using nesting. Although this is still not fully supported - I actually like writing styles this way. Using the same example I would probably nest my selectors like this:
```
.card-content {
  &__header {
  }
  &__text{
  }
}
```
Modern Options Having tried a few options for my React projects - vanilla CSS, SASS, CSS Modules and recently Tailwind, I would prefer going the Tailwind route for styling. Although it uses utility classes which are directly applied to the element you are styling, I feel like being able to focus on the core logic of the application instead of having to figure out naming CSS classes has been a big advantage.

This obviously depends on whether you are working as a web designer, where better options are available.

Hope we get other opinions on this issue. Best of luck and keep going!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord