QR code component using HTML, CSS , also some Css variables

Community feedback

• 

  irthifa•140

  @irthifaPosted 3 months ago

  Hello there, Nice effort on this challenge!

  I tried viewing your code to give you specific feedback but unfortunately, the link doesn't work. Hence, I decided to drop some general styling tips.

  • Having all of the common styling first in the stylesheet is a good idea. This means all the styles which will generally apply unless you do something special with that element. You will typically have default rules set up for: body p h1, h2, h3, h4, h5 ul, ol table and links

  • We could define a few utility classes. If you have a few styling choices you know you will want to apply to lots of different elements, they can be put in this section. For example, a class that removes the default list style for lists we're going to display.

  /* || UTILITIES */
  
  .nobullets {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  /* … */
  

  • Include CSS for specific things, broken down by the context, page, or even component in which they are used. Example :

  /* || STORE PAGES */
  
  .product-listing {
    /* … */
  }
  
  .product-box {
    /* … */
  }
  
  

  By ordering things in this way, we at least have an idea of which part of the stylesheet we are looking at.

  • Avoid overly-specific selectors If you create very specific selectors, you will often find that you need to duplicate chunks of your CSS to apply the same rules to another element. Example :

  article.main p.box {
    border: 1px solid #ccc;
  }
  

  If you then wanted to apply the same rules to something outside of main, or to something other than a <p>, you would have to add another selector to these rules or create a whole new ruleset. Instead if you use below,

  .box {
    border: 1px solid #ccc;
  }
  

  This will apply your rule to any element that has the class box. But, remember there will be times when making something more specific makes sense; however, this will generally be an exception rather than usual practice.

  You can read more about this here

  I hope you find this useful!

  Happy coding!

  Marked as helpful

  0