Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.
Sign upRequire shorthand properties
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;
}Using shorthand properties where possible helps to decrease the overall size of the CSS.
Rule Details
Rule ID: shorthand
This rule is aimed at decreasing file size by finding properties that can be combined into one. As such, it warns in the following cases:
- When
margin-left,margin-right,margin-top, andmargin-bottomare used together in a single rule. - When
padding-left,padding-right,padding-top, andpadding-bottomare used together in a single rule.
The following patterns are considered warnings:
.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;
}The following patterns are considered okay and do not cause warnings:
/* only two margin properties*/
.mybox {
margin-left: 10px;
margin-right: 10px;
}
/* only two padding properties */
.mybox {
padding-right: 10px;
padding-top: 20px;
}
Press h to open a hovercard with more details.