In this article I will mention common CSS mistakes that are added to technical debt. All of the below mentioned issues are mistakes I've done during my internship which were detected by SonarQube as code smells. 💩

FYI: SonarQube is a tool used to analyze your code and provides reports based on the analysis.

Duplicated Styles

Noncompliant Code

p {
  font-size: 12px;
  letter-spacing: 2px;
  font-size: 16px;
}

Compliant Code

p {
  font-size: 12px;
  letter-spacing: 2px;
}

Missing Generic font family

We often use imported font families such as Poppins or Raleway, when we use such fonts we should also make sure to include a generic font family so that when the imported family is not available the browser will use the generic font family we have specified.

Noncompliant Code

a {
  font-family: Poppins;
}

Compliant Code

a {
  font-family: Poppins, sans-serif;
}

It doesn't have to be sans-serif, you can also use Helvetica, Arial, Verdana and Tahoma or all of them.

Order of properties

A shorthand property such as margin should not be used after longhand property such as margin-right, because it will completely override the value given above.

Noncompliant Code

div {
  margin-left: 20px;
  margin: 30px;
}

Compliant Code

div {
  margin: 30px;
  margin-left: 20px;
}

I have mentioned just three of the common CSS mistakes that are detected as smelly code in SonarQube. If you want to know mistakes related to JavaScript that makes your code smelly, let me know in the comments. Peace.