👉👉 Important things you should avoid in CSS Style Sheet



  • alt text

    Avoid put px to 0 values.


    ❌ Wrong

    .className {
          padding-top: 0px;
    }
    

    ✔ Correct

    .className {
          padding-top: 0;
    }
    

    Optimize styles.


    ❌ Wrong

    .className {
          padding-top: 0;
          padding-right: 5px;
          padding-bottom: 7px;
          padding-left: 10px;
          margin-top: -3px;
          margin-right: -30px;
          margin-bottom: -8px;
          margin-left: -4px;
    }
    

    ✔ Correct

    .className {
          padding: 0 5px 7px 10px;
          margin: -3px -30px -8px -4px;
    }
    

    Use small letters for Color Code


    ❌ Wrong

    .className {
          background-color: #6f8CBA;
          color: #FFFFFF;
    }
    

    ✔ Correct

    .className {
          background-color: #6f8cba;
          color: #ffffff;
    }
    

    Do not put unwanted Spaces,Line Breaks


    ❌ Wrong

    .className{
    
          font-size : 15px;
          font-family: sans-serif, arial;
    
    }
    

    ✔ Correct

    .className {
          font-size : 15px;
          font-family: sans-serif, arial;
    }
    

    Do not put Duplicate styles


    ❌ Wrong

    .className1 {
          font-size : 15px;
          font-family: sans-serif, arial;
    }
    
    .className2 {
          font-size : 15px;
          font-family: sans-serif, arial;
    }
    
    .className3 {
          font-size : 15px;
          font-family: sans-serif, arial;
    }
    

    ✔ Correct

    .className1, .className2, .className3 {
          font-size : 15px;
          font-family: sans-serif, arial;
    }
    

    Do not create too much Class names


    ❌ Wrong

    <div class="section-one">
          <div class="section-one-title">
               Title 1
          </div>
    </div>
    
    
    <div class="section-two">
          <div class="section-two-title">
               Title 1
          </div>
    </div>
    
    .section-one {
          background-color: #000000;
    }
    
    .section-one-title {
          font-size : 15px;
          font-family: sans-serif, arial;
          color: #ffffff;
    }
    
    .section-two {
          background-color: #57d675;
    }
    
    .section-two-title {
          font-size : 5px;
          font-family: sans-serif, arial;
    }
    

    ✔ Correct

    <div class="section-one">
          <div class="title">
               Title 1
          </div>
    </div>
    
    
    <div class="section-two">
          <div class="title">
               Title 1
          </div>
    </div>
    
    .section-one {
          background-color: #000000;
    }
    
    .section-one .title {
          font-size : 15px;
          font-family: sans-serif, arial;
          color: #ffffff;
    }
    
    .section-two {
          background-color: #57d675;
    }
    
    .section-two .title {
          font-size : 5px;
          font-family: sans-serif, arial;
    }
    

  • Web Development

    @b6 Thank you Bro


  • Linux Help

    Nice post b6, valuable information.



  • @Malith 😊😊





  • very usefull @b6



  • @dev_lak thank you