Sometimes when editing a rule you may end up defining multiple properties that can better be represented using shorthand. For example:

.mybox {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
  margin-bottom: 30px;
}
These four properties can actually be combined into a single margin property, such as:
.mybox {
  margin: 20px 10px 30px;
}

This rule helps decrease file size by finding properties that can be combined into one.

Noncompliant Code Example

.mybox {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
  margin-bottom: 30px;
}

.mybox {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 30px;
}

Compliant Solution

/* Compliant: Shorthand magin property */
.mybox {
  margin: 20px 10px 30px;
}

/* Compliant: Shorthand padding property */
.mybox {
  padding: 20px 10px 30px;
}

/* Compliant: Only two margin properties */
.mybox {
  margin-left: 10px;
  margin-right: 10px;

}

/* Compliant: Only two padding properties */
.mybox {
  padding-right: 10px;
  padding-top: 20px;
}

See

Shorthand Properties

[[shorthandProperties]]
Property Shorthand For

stylelint Related Rules