Responsive CSS Cards - Plain CSS

Community feedback

• 

  Sicro01•60

  @Sicro01Posted over 1 year ago

  Hi Jack - fairly new to CSS & JavaScript myself - hopefully this is useful.

  For CSS tips and guidance I refer to Kevin Powell's content on YouTube (https://youtu.be/3Y03OSNw6zo). His way to organize his CSS is broadly as follows:

  • /* root level vars / e.g. - --clr-bg-xx: / for coloring a background */

  --wd-mobile:

  --wd-desktop:

  • --fs-base:

  • --ff-base:

  • --fw-regular:

  • --fw-bold:

  • --fw-dark:

  • /* CSS Reset */

  see CSS Reset from https://www.joshwcomeau.com/css/custom-css-reset/

  • /* Components */

  • /* Bespoke */

  • Structure within a class:

  /* Section vars */

  /* display */

  /* positioning */

  /* box model */

  /* typography */

  /* manipulation */

  Re your 2nd question - again I'm in the early part of my journey! Kevin talks about:

  • avoiding unnecessary CSS code e.g. adding width everywhere or height: auto as a couple of examples
  • spotting where there is commonality across a number of classes and drawing them out to a common reusable class

  I've tried to use Kevin's approach in my solution posted just after yours.

  All the best with your future coding!

  Marked as helpful

  0

  ---

  

  Jack•10

  @JFrancis23Posted over 1 year ago

  @Sicro01 Hey man! Thanks for taking the time! Yeah he is a CSS wizard! Will definitely try to learn to organise it better as he does. It's a lot to learn !

  1