Jeff Starr씨는 스타일 시트를 경량화(Micro-Optimization)하는 11가지 팁을 소개했습니다. 이것은 코드 전체를 압축(Minify)하는 것이 아닌, CSS 코드 자체를 효율적으로 작성하거나 배포하는 방법입니다.
Tip #1: 색상 값을 짧게 쓰기
색상을 지정하는 속성에 값을 기입할 때 가능하면 가장 짧은 값을 사용합니다.
article { background-color: rgb(255,255,255); } /* WTF? */
article { background-color: #ffffff; } /* better */
article { background-color: #fff; } /* good */
Tip #2: 중복되는 속성을 병합하기
반복적으로 중복되는 속성들은 통합합니다. 이 작업을 자동으로 처리해 주는 온라인 CSS 최적화 서비스도 있으니 참고하세요.
/* before */
#wrap p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.22em;
}
.
.
.
p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.33em;
}
/* after */
p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.33em;
}
Tip #3: 가능한 한 몰아쓰기
CSS 속성들 중에는 여러 값을 인식하는 것들이 있습니다. font나 background, padding, border 등이 그렇습니다. 이런 경우 한줄로 몰아씁니다.
/* before */
p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.33em;
}
/* after */
p {
font: normal 1.33em/1.33 Georgia, serif;
}
/* these 4 properties */
background-color: #fff;
background-image: url(i/dope.png);
background-repeat: repeat-x;
background-position: 0 0;
/* can be written as */
background: #fff url(i/dope.png) repeat-x 0 0;
/* these 4 properties */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
/* can be written as */
margin: 10px 20px 10px 20px;
/* these 3 properties */
border-width: 1px;
border-style: solid;
border-color: red;
/* can be written as */
border: 1px solid red;
Tip #4: 같은 값은 결합하기
padding 혹은 margin 속성의 값이 동일한 경우 통합하여 지정할 수 있습니다.
/* before */
margin: 10px 20px 10px 20px;
padding: 10px 10px 10px 10px;
/* after */
margin: 10px 20px;
padding: 10px;
Tip #5: 불필요한 "0"은 생략하기
소수점 이하의 수를 사용하거나 무의마한 "0"은 생략할 수 있습니다.
/* before */
padding: 0.1em;
margin: 10.0em;
/* after */
padding: .1em;
margin: 10em;
Tip #6: 값이 "0"이면 단위 생략하기
값의 크기가 0이라면 단위는 생략해도 무방합니다.
/* before */
padding: 0px;
margin: 0em;
/* before */
padding: 0;
margin: 0;
Tip #7: 마지막 세미콜론 생략하기
속성 기입이 끝나는 마지막의 세미콜론(;)은 생략해도 무방합니다.
/* before*/
p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.33em;
}
/* after */
p {
font-family: Georgia, serif;
font-weight: normal;
line-height: 1.33em;
font-size: 1.33em
}
/* optimized */
p { font: normal 1.33em/1.33 Georgia, serif }
Tip #8: 배포하기 전 코멘트 제거하기
작업과정에서 주석을 사용하는 것은 분명 도움이 되고 협업에도 유리합니다. 그러나 사용자에게는 100% 불필요한 데이터이며 무의미한 서버자원과 대역폭을 소비하므로 배포하기 전에는 반드시 코멘트를 제거하도록 합니다.
Tip #9: 공백 제거하기
값을 구분하기 위한 공백을 제외한 나머지 빈 공간은 모두 제거합니다.
/* before */
body {
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
background-color: #333;
text-align: center;
margin: 0px auto;
font-size: 62.5%;
color: #FFF;
}
/* after */
body{font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;text-align:center;background:#333;margin:0px auto;font-size:62.5%;color:#fff}
Tip #10: 줄바꿈 제거하기
효율적인 관리를 위해 탭(또는 공백) 그리고 줄바꿈을 삭제합니다. 싱글-라인 포멧으로 작성하는 것이 미친짓으로 보일지 모르겠지만 의외로 실용적인 작성법입니다. 성능 향상을 꾀하면서도 스크롤을 줄일 수 있고 프로퍼티 단위 디버깅이 가능하기 때문입니다.
/* before */
hr {
margin: 25px 0 25px 0;
background: #CF7400;
text-align: left;
padding: 15px 0;
display: block;
border: 0 none;
color: #CF7400;
height: 1px;
clear: both;
width: 96%;
}
acronym, abbr {
border-bottom: 1px dotted #514031;
cursor: help;
}
ins { text-decoration: underline; }
del { text-decoration: line-through; }
sup {
font-size: 10px;
line-height: 0;
color: #cccc99;
}
em { font-style: italic; }
small { font-size: 10px; }
strong { font-weight: bold; }
strong:target, h3:target, h4:target {
background: #CF7400;
padding-left: 25px;
}
code, kbd, samp, tt, var {
font-family: "Courier New", Courier, monospace, sans-serif;
color: #cccc99; /* #cc9933 #cccc66 #cccc99 */
font-size: 11px;
}
h3 code { font-size: 13px; }
pre {
border-left: 1px solid #CF7400;
padding: 10px 0 12px 10px;
background: #3B2E22;
overflow: auto;
margin: 25px 0;
width: 525px; /* 95% of 555px = 525px */
}
pre:hover {
border-left: 1px solid #FFFFCC;
background: #3B2E22;
}
/* after */
hr { background:#CF7400;margin:25px 0;text-align:left;padding:15px 0;display:block;border:0 none;color:#CF7400;height:1px;clear:both;width:96%; }
acronym,abbr { border-bottom:1px dotted #514031;cursor:help; }
ins { text-decoration:underline; }
del { text-decoration:line-through; }
sup { font-size:10px;line-height:0;color:#cc9; }
em { font-style:italic; }
small { font-size:10px; }
strong { font-weight:bold; }
strong:target,h3:target,h4:target { background:#CF7400;padding-left:25px; }
code,kbd,samp,tt,var { font-family:"Courier New",Courier,monospace,sans-serif;color:#cc9;font-size:11px; }
h3 code { font-size:13px; }
pre { border-left:1px solid #CF7400;padding:10px 0 12px 10px;background:#3B2E22;overflow:auto;margin:25px 0;width:525px; }
pre:hover { border-left:1px solid #FFC;background:#3B2E22; }
Tip #11: CSS 유효성 검사하기
끝으로, W3C에서 제공하는 CSS 유효성 검사기를 이용하여 오류가 있는지를 검토하세요. 당신이 놓쳤을 수도 있는 잡다한 오류들을 빠르게 찾아줍니다.
Bonus Tips: 보너스 팁들
이 게시물을 작성하는 동안 몇 가지 다른 아이디어가 떠올랐습니다.
a:link, a:visited {} /* before */
a:link,a:visited{} /* after */
/* before */
h1{color:#111}
h2{color:#333}
h3{color:#777}
/* after */
h1{color:#111}h2{color:#333}h3{color:#777}
위에서 언급한 팁들 중에는 자동으로 처리할 수 있는 것들이 있습니다. 온라인 도구를 사용하거나 서비스 빌드과정에 포함하여 자동화 할 수도 있다는 사실을 잊지 마세요. 그리고 규모가 큰 프로젝트는 배포/개발 버전을 구분해서 관리하는 것이 가장 효율적입니다.
스타일 시트를 경량화하는 11가지 팁 - Firejune Blog
