== Why is this an issue?

A shorthand property defined after a longhand property will completely override the value defined in the longhand property making the longhand one useless. The code should be refactored to consider the longhand property or to remove it completely.


=== Noncompliant code example

[source,css]
----
a {
  padding-left: 10px;
  padding: 20px; /* Noncompliant; padding is overriding padding-left making it useless */
}
----


=== Compliant solution

[source,css]
----
a { 
  padding: 10px; /* Compliant; padding is defining a general behaviour and padding-left, just after, is precising the left case */
  padding-left: 20px;
}
----


== Resources

* https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties[Mozilla Web Technology for Developers] - Shorthand properties

