Product preview card component using CSS Flex

Community feedback

• 

  P

  Dean•480

  @DeanogitPosted 11 months ago

  Hey Abdulrahman Zaki,

  Your solution is looking fantastic! It is impressive to do this without the figma file

  I was just looking at the styles.css file and noticed the technique being used to apply the classes with regards to specificity. I am not familiar with this technique, is there something in particular you'd like to achieve with this?

  For example

  section .container .info-box .product-category{
      text-transform: uppercase;
      font-family: var(--s-font);
      margin-bottom: 24px;
      letter-spacing: 4px;
      color: var(--iv-color);
  }
  

  This has a specificity of (0,3,1) This is calculated by the section element tag (0,0,1) And three class names (0,3,0)

  I think I would instead write

  .product-category{
      text-transform: uppercase;
      font-family: var(--s-font);
      margin-bottom: 24px;
      letter-spacing: 4px;
      color: var(--iv-color);
  }
  

  This has a single class name so the specificity is (0,1,0)

  Taking a look at the documentation for specificity, it is my understanding its best to keep specificity as low as possible when applying property values to classes.

  In a small project I'm not sure it makes too much difference but as I understand, when working on larger codebases, specificity might impact the maintainability of the project.

  Let me know what you think,

  Thanks for reading & great job on completing this challenge

  Marked as helpful

  1
• 

  abhijeet•30

  @imabhijeetPosted 11 months ago

  Great work mate, Our solution can differ from the given prototype but the base design should be similar to it. One thing I would like to add that in your GitHub repo you didn't have any Readme file, maybe you missed it.

  1