Product Preview Card using SCSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,120

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • Yeah, consider adopting a Mobile First approach in your next project. This helps to create a more user-friendly and accessible experience for all users.

  HTML 🏷️:

  • Wrap the page's whole main content in the <main> tag.

  • You can use the <picture> tag when you have different versions of the same image 🖼. Using the <picture> tag will help you to load the correct image for the user's device saving bandwidth and improving performance. You can read more about this here 📘.

    Example:

    <picture>
        <source media="(max-width: 375px)" srcset="/product-preview-card-component-main/images/image-product-mobile.jpg">
        <img src="/product-preview-card-component-main/images/image-product-desktop.jpg" alt="{your alt text goes here}">
    </picture>
    

  CSS 🎨:

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.

  • Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

  • Using too many selectors or too many level nesting in SASS can make your code more difficult to read and maintain. Additionally, using too many selectors can lead to specificity issues, making it difficult to override existing styles.

    body .container .context-container .price-container .current { . . . }
    

    You can use BEM naming convention to keep only one level of nesting in SASS. BEM (Block Element Modifier) is a popular naming convention for CSS classes that helps to better organize the code. It is especially useful when working with SASS because it allows to create more modular and reusable code.

    You can read more about this here: BEM and SASS a perfect match

  I hope you find it useful! 😄

  Happy coding!

  0

  ---

  

  Lim Tangmeng•80

  @ImFropZPosted almost 2 years ago

  @MelvinAguilar Thank you so much for your comments I will check it out.

  0