👉👉 Important things you should avoid in CSS Style Sheet

[b6]

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;
}

[Nubelle]

@b6 Thank you Bro

[root]

Nice post b6, valuable information.

[b6]

@Malith 😊😊

[b6]

@root ✌✌

[dev_lak]

very usefull @b6

[b6]

@dev_lak thank you