축약형 표현 사용

때로는 축약형으로 작성하면 적절할 것을 여러개의 속성(Property)으로 나눠서 작성하는 경우가 있습니다.

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

다음과 같이 위 네개를 합쳐서 하나의 margin 속성으로 정리할 수 있습니다.

.mybox {
    margin: 20px 10px 30px;
}

축약형을 사용하면 CSS의 전반적인 용량을 줄이는데 도움을 줄 수 있을 것입니다.

규칙 상세설명

규칙(Rule) ID: shorthand

이 규칙은 하나로 합쳐질 수 있는 속성들을 찾아서 파일 용량을 줄이는 것을 목표로 합니다. 다음의 경우에는 문제로 판단합니다.

1. 하나의 규칙에 margin-left, margin-right, margin-top, margin-bottom이 함께 쓰인 경우
2. 하나의 규칙에 padding-left, padding-right, padding-top, padding-bottom이 함께 쓰인 경우

다음의 경우는 문제로 판단합니다.

.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;
}

다음의 경우는 정상적인 것으로 판단합니다.

/* margin 속성을 두개만 사용한 경우 */
.mybox {
    margin-left: 10px;
    margin-right: 10px;

}

/* padding 속성을 두개만 사용한 경우 */
.mybox {
    padding-right: 10px;
    padding-top: 20px;
}

---

원문: https://github.com/stubbornella/csslint/wiki/Require-shorthand-properties