Firejune

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}

위에서 언급한 팁들 중에는 자동으로 처리할 수 있는 것들이 있습니다. 온라인 도구를 사용하거나 서비스 빌드과정에 포함하여 자동화 할 수도 있다는 사실을 잊지 마세요. 그리고 규모가 큰 프로젝트는 배포/개발 버전을 구분해서 관리하는 것이 가장 효율적입니다.