stats preview card component using scss and bem

Community feedback

• 

  Simon Davis•505

  @Skidragon

  Posted about 4 years ago

  Hi @AmanyadavFD, pretty good job on the responsiveness and styling, for the html, I would recommend the main element instead of a section element since you put that as your main. Also I think it's kind of redundant doing classes like main__heading-span. A .purple-accent class would make more since for that. Also I don't see the point of putting a .secondary-heading class when the h2 communicates that already. If I was going to put a class there, I would communicate what the h2 is referring to. For media queries, I think you took the desktop first approach, I would go with the mobile approach first. Use min-width instead of max-width to do a mobile first approach, you can then use $tablet and $desktop variables to place into here instead of this. bp doesn't give me much info.

  @media only screen and (max-width: $bp-small) {
        order: 1;
        border-radius: 0 0 1rem 1rem;
        text-align: center;
      }
  

  In summary to improve, I would work on more descriptive and concise class names and organization plus the mobile first approach to help other devs understand the code and save more time for yourself in the future.

  01