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.
.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: 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;
}
| Property | Shorthand For |
|---|