Interactive Rating without framework

Community feedback

• 

  tOnski86•240

  @tOnski86Posted 2 days 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!

  0