QR Code Component Using Custom CSS Variables and CSS Grid Properties

Community feedback

• 

  LeikoRed•10

  @LeikoRedPosted 4 months ago

  I see you are using:

  not(ul, ol, li) {margin: 0; padding: 0;}
  

  since it targets all elements except ul, ol, and li, setting their margin and padding to zero. It'd be prefered to use the universal selector. The :not selector is used for more specific cases where you need to exclude particular elements, but in this scenario isn't necessary because you don't use ul, ol or li.

  *{
  margin: 0;
  padding: 0;
  }
  

  It is good tho

  0

  ---

  

  P

  Jan•170

  @NegligencePosted 4 months ago

  Hi @LeikoRed 👋🏻

  Me using not(ul, ol, li) {margin: 0;} was born from me wanting a shorter selector to target instead of using body, h1, h2, h3, h4, h5, h6, p {margin: 0;} to remove margins.

  My personal preference is to reuse the initial lines of code in /* #region Defaults */ over and over across multiple projects so I no longer have to worry about overwriting margins for these commonly used elements [body, h1, h2, h3, h4, h5, h6, p].

  While I did consider using the shorter * {margin: 0;}, it just personally felt weird to me when my lists did not have their default indentation in other projects like Recipe Page

  With the wildcard selector * literally selecting everything, I don't want to have to worry about moments where certain html elements not looking right without their margin and padding.

  This is just me being lazy, but I'm going to keep my not(ul, ol, li) {margin: 0;} selector for now until I find something better 😂

  Thank you for the comment though 🙌🏻

  0
• 

  Elian Pujols•30

  @ElianPujolsPosted 4 months ago

  Espero que tengas esto en cuenta. La solucion esta correcta, pero un punto en el codigo es la cantidad de comentarios repetidos que tiene, en realidad no interfiere directo con el codigo pero es algo que a mi opinión se debe de utilizar en la menor medida posible...

  0

  ---

  

  P

  Jan•170

  @NegligencePosted 4 months ago

  Hi @ElianPujols 👋🏻

  I appreciate your comment.

  Upon reviewing, it seems that the repeated comments that you were referring to are the regions I have put in place to organize my code.

  /* #region */ and /* #endregion */ are custom markers to enable code folding for longer lines of code.

  I find it incredibly convenient to collapse all of the regions at once using Ctrl+K Ctrl+8, then unfold only the current regions I am working on.

  It visually declutters my screen and allows me to focus on one code section at a time.

  This is a personal preference of mine and is subjective though, so we might not be on the same page on the matter.

  Here's where I learned it: Region Code Folding

  0

  

  Elian Pujols•30

  @ElianPujolsPosted 4 months ago

  Hola @Negligence Gracias por la aclaración y una disculpa...

  1