Almost perfect!! Responsive 4-card layout - Grid & Pseudo

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted almost 3 years ago

  This looks ok but you’ve made it way longer and more complex than it needs to be

  You don’t need the pseudos or all that repeating code, don’t need so many changes to widths etc, and all the media query needed to do was change the grid template.

  It’s really hard to read this css because of all the nested selectors. That’s really practice, definitely not something you wanna be doing because it increases css specificity drastically as well as impacting readability.

  Once all the nesting is gone it will be easier to see how this layout is being done. Usually you only define the sizes of the grid items in the template - I think that’s what you’ve done(?) but it was hard to read like I say, so not sure from my quick read through

  The icons on this are definitely decorative imo, so I’d empty out those alt texts.

  Last thing, you’ve used em a lot, which is unusual. Did you mean to use rem? The approach you’re taking with ems can become very unpredictable in larger projects

  Hope this helps

  Marked as helpful

  1
• 

  Najib Zuraiqat•60

  @nabzayPosted almost 3 years ago

  Hey Grace! Thank you so much for your feedback :)

  I'll be happy to clarify some of my thought process while doing it.

  • So for the pseudos, I honestly didn't have time to research that much about how to make the borders look like that. Tried using border-top but it looked ugly lol so I just tried to be creative.

  • Im having a hard time figuring out the best way to write css. When should I include the parents in the declaration (e.g .parent .child .nested) and when should it just be (.child). Very confused on this aspect!

  • With regards to why I used a lot of em's, it was because after watching a bunch of Kevin Powell videos he brings up that he only uses rem's for font-sizes, and em for everything else. Is this not best practice? Should I be using some px's here and there?

  Also sorry for the code being a bit blocky and excessive. I just wanted to get as close to the design as possible. I noticed that when shifting from mobile to desktop, there are some changes in: spacing, font-sizing, etc. And that's what I wanted to change in the media queries as well.

  Sorry I know these are a lot of questions!

  Any and all help is appreciated :)

  0