Lanka Developers Community

    Lanka Developers

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Shop

    👉👉 Important things you should avoid in CSS Style Sheet

    Web Development
    css web designing html5 html beginner
    4
    7
    1278
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • b6
      b6 last edited by b6

      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;
      }
      
      1 Reply Last reply Reply Quote 2
      • Nubelle
        Nubelle Web Development last edited by

        @b6 Thank you Bro

        b6 1 Reply Last reply Reply Quote 1
        • root
          root Linux Help last edited by

          Nice post b6, valuable information.

          b6 1 Reply Last reply Reply Quote 1
          • b6
            b6 @Nubelle last edited by

            @Malith 😊😊

            1 Reply Last reply Reply Quote 0
            • b6
              b6 @root last edited by

              @root ✌✌

              1 Reply Last reply Reply Quote 0
              • dev_lak
                dev_lak last edited by

                very usefull @b6

                b6 1 Reply Last reply Reply Quote 1
                • b6
                  b6 @dev_lak last edited by

                  @dev_lak thank you

                  1 Reply Last reply Reply Quote 0
                  • 1 / 1
                  • First post
                    Last post

                  0
                  Online

                  3.6k
                  Users

                  1.3k
                  Topics

                  5.3k
                  Posts

                  • Privacy
                  • Terms & Conditions
                  • Donate

                  © Copyrights and All right reserved Lanka Developers Community

                  Powered by Axis Technologies (PVT) Ltd

                  Made with in Sri Lanka

                  | |