NFT preview card using flexbox and BEM

Community feedback

• 

  Aakash Verma•9,520

  @skyv26Posted 2 months ago

  Hi @MolinaEf,

  Great job on the project! Your code structure is clean and easy to follow. 🙌 Here are a few suggestions to further optimize your implementation:

  1️⃣ Use CSS for Horizontal Lines:
  Instead of adding the <hr> tag, consider using a CSS border for the main tag. This approach reduces unnecessary elements and keeps the HTML cleaner. You can use:

  main {  
      padding-bottom: 1rem;  
      border-bottom: 1px solid var(--neutral-very-dark-blue-line);  
  }  
  

  2️⃣ Simplify html, body Styles:
  The following CSS code appears unnecessary as it doesn’t directly contribute to the layout or functionality:

  html, body {  
      width: 100%;  
      height: 100%;  
  }  
  

  Removing this can help streamline your stylesheet.

  3️⃣ Remove Redundant hr Styles (if Point 1 is Implemented):
  If you adopt the border approach for main, you can safely remove this CSS:

  hr {  
      margin-top: 1rem;  
      border: none;  
      border-top: 1px solid var(--neutral-very-dark-blue-line);  
  }  
  

  4️⃣ Avoid Extra Wrapping Elements:
  You can directly apply a class to the main tag instead of wrapping it inside a div. For example, replace this:

  <div class="card">  
      <main>  
  

  With this:

  <main class="card">  
  

  This reduces unnecessary lines of code and simplifies the structure.

  ✨ Final Note:
  Rest assured, you've done an excellent job overall! These are just minor tweaks to make your code even more efficient and elegant. Keep up the great work! 🚀

  Warm regards,

  0