Community feedback

• 

  Mike Stop Continues•100

  @mikestopcontinuesPosted 11 months ago

  Wow, this is the best solution I've seen. Here's some suggestions:

  1. Designers expect pixel-perfect results. Your component is smaller than it should be, and a few of the styles can be tweaked, including the font-weight. When building components, it's always best to start from the outside and work inward. Get the exterior size and styles right, and the rest will follow.

  2. You nailed the responsiveness. Your work is elastic. That's great. Preserve that when you update the size.

  3. Go back to the active state designs. Something else changes when you click. (Hint: Expand your focus.)

  4. Nice use of CSS vars. Next time, don't attach your vars to :root but to your component's top element .card. This will keep your component's styles from interacting with any other element on the page. Similar, consider giving your component a distinct class .ArticleCard and giving all sub-elements classes like .ArticleCard-image. When working in pure CSS, this is the best way to ensure the fewest bugs as your codebase grows. Similarly, avoid generic styles like a and .h3--style as well as utility classes like .mg-bottom. Put all of your styles on your component-specific classes. Duplicate rules compress really well and using CSS vars ensures you have a way to tweak the whole component at once.

  Nice work. Keep going!

  Marked as helpful

  1

  ---

  

  Bourlier Nathanaël•20

  @Nsven7Posted 11 months ago

  @mikestopcontinues

  Thank's about your feedback and happy new year! I updated my css, but I didn't understand this step:

  • Nice use of CSS vars. Next time, don't attach your vars to :root but to your component's top element .card.

  1

  

  Mike Stop Continues•100

  @mikestopcontinuesPosted 11 months ago

  @Nsven7 Happy to help!

  What I mean is: Try to "encapsulate" all of the styles related to a component. After all, the styles of a component are often related to one another, and repeated for visual harmony. One way to do this is to link the component's variables to the component itself:

  .ArticleCard {
    --ArticleCard-back-color: #FC0;
    --ArticleCard-text-color: #000;
  }
  

  This would allow your component to have "modes" that you can easily define in one place:

  .ArticleCard.inverted {
    --ArticleCard-back-color: #03F;
    --ArticleCard-text-color: #FFF;
  }
  

  But looking back at your repo, I see that your variables are more about the website's theme, rather than the component itself. In this case, :root {} is perfectly cool.

  Anyway, your code looks great. Nice work!

  Marked as helpful

  0