리셋 스타일(reset style) 또는 CSS 리셋(CSS reset)은 브라우저 마다 서로 다른 기본 스타일 차이를 없애기 위해서 브라우저의 기본 스타일을 날리는 것을 말한다. 상당히 많은 사람들이 이 리셋 스타일을 사용하고 있는 것으로 알고 있다. 그리고 리셋된 스타일을 다시 살릴 수 있는 방법이 있느냐는 질문도 커뮤니티에 간간히 올라온다.

CSS는 너무나 막강하기 때문에 사이트 전체에 적용되는 CSS 룰을 만들 때에는 충분히 고민해야만 한다. 예를 들어서 상위 요소 없이 .title과 같은 전역 클래스를 만들 때에는 매우 주의를 해야 한다. title과 같은 클래스명은 워낙 광범위하게 사용될 수 있기 때문에 언제 어떤 상황에서 충돌이 발생할지 예측이 힘들기 때문에다. 마찬가지로 리셋 스타일에 있는 모든 CSS 룰도 전역 선언이기 때문에 매우 주의해야 한다.

에릭 메이어 조차도 자신의 리셋 스타일을 많은 사람들이 그냥 가져다 쓰기를 바라지 않았다. 리셋 스타일을 시작점으로 삼아서 각자가 자신들의 기술과 스킬을 개발하기를 바랬었다. 하지만 결과는 정반대로 많은 사람들이 별 생각없이 의례 스타일을 리셋해야 하는 것으로 생각하게 되고 문제와 논쟁만 끊임없이 생산되었다.

리셋 스타일을 사용하면 여러가지 문제점들이 발생될 수 있다. 아마 이와 같은 문제들을 실제로 이미 겪어본 사람들도 많을 것이다.

• 리셋 스타일 기반으로 제작된 스타일은 나중에 문제가 발생했을 때, 리셋 스타일 부분만 수정하거나 지울 수 없다. 이미 모든 코드가 리셋 스타일에 의존적으로 작성이 되었기 때문에 모든 스타일을 다시 확인하고 재 작성해야 한다.
• 콘텐츠 중에 브라우저 기본 스타일이 필요한 HTML 콘텐츠가 있거나 위지윅 에디터로 생성된 콘텐츠를 사용할 경우 리셋 스타일이 브라우저 기본 스타일을 없애버리기 때문에 브라우저 기본 스타일을 재정의해야 하는 경우가 생기게 된다.
• 리셋된 스타일들은 어떤 방식으로든지 디자인 적용할 때 다시 정의되어야만 한다. 똑같은 선언을 값만 바꿔서 두번 하는 일은 분명 불필요한 작업이다.
• 브라우저 호환성을 리셋 스타일로만 해결할 수 있는 것은 아니다. 브라우저간 다른 스타일을 새로 정의하기만 하면 호환성 문제는 사라진다.

나는 지금까지 스타일을 리셋해야 겠다고 생각하거나 리셋 스타일이 없어서 문제를 겪었던 적이 없다. 오히려 스타일 리셋을 너무 광범위하게 해서 문제가 생겼던 적은 많다. 대신 항상 base.css 파일을 만들어서 기본 광역 설정을 만들어서 써왔다. 프로젝트를 거듭할 수록 base.css는 조금씩 수정이 됐고 계속해서 나만의 base.css를 발전시켜왔다. 하지만 어느 사이트 하나 다른 사이트의 base.css를 그냥 가져다 쓴 적은 없다. base.css는 모든 세팅을 초기화(reset)하는 목적이 아니라 기본(base) 스타일을 정의하는 목적을 가지고 있기 때문이다.

@charset "utf-8";
/*
 * default style definition
 */
body {
	margin: 0;
	padding: 0;
	font-size: 75%;
	line-height: 1.5em;
	font-family: "Malgun Gothic", "Lucida Grande", Tahoma, Verdana, AppleGothic, UnDotum, sans-serif;
}
form {
	margin: 0;
	padding: 0;
}
hr {
	display: none;
}
p, div, th, td, select, input {
	color: #333;
}
a:link, a:visited {
	color: #666;
	text-decoration: none;
}
a:active, a:hover {
	color: #000;
	text-decoration: none;
}
a img, 
input.type-image {
	border: 0 none;
}
input.type-text, 
textarea {
	border: 1px solid #ddd;
	background: #fff;
	padding: 1px;
}
input.type-text:hover, 
input.type-text:focus, 
textarea:hover, 
textarea:focus, 
select:hover, 
select:active {
	background-color: #ffd;
}
input, select, textarea {
	vertical-align: middle;
	font-size: 1em;
	color: #333;
}
select {
	font-size: 11px;
	font-family: Dotum, "돋움", sans-serif;
}
span.button, 
img.button, 
a.button {
	cursor: pointer;
	vertical-align: middle;
}

워낙 오래전에 사용하던 기본 스타일이기 때문에 문제도 좀 있고 불필요한 부분도 있다. 하지만 ul { margin: 0; padding: 0; list-style: none; }이나 table { border-collapse: collapse; }와 같이 경우에 따라 유용할 수 있는 브라우저의 기본 스타일을 날려버리는 코드가 없다는 것을 유념할 필요가 있다. 문제가 된다면 a img에 border: 0 none;을 전역으로 선언한 정도가 될 것이다. 나 말고도 기본 스타일 선언을 권장하는 사람들이 많이 있다.

리셋 스타일을 그냥 가져다 쓰지 말고 자신만의 기본 스타일 설정을 개발하는 것이 바람직하다. 이 기본 스타일은 사이트 제작을 시작할 때 기본 웹 스타일 가이드를 정의하는데 유용하게 사용될 수 있고 전체 CSS 구조나 제어를 이해하는데 큰 도움이 될 수 있을 것이다.