Reset CSS vs Normalize.css

필요할 때 찾기 편하게 기록으로 남긴다. 

Eric Meyer의 CSS reset 소스  

 

Reset CSS

모든 브라우저의 기본 스타일을 완전히 제거한다. 

모든 HTML 요소의 스타일을 초기화해서 완전 백지 상태에서 시작한다. 

모든 태그의 여백, 패딩, 글꼴 크기 등을 0이나 none으로 설정한다.

 

간단하고 빠르게 리셋할 수 있고 모든 스타일을 개발자가 제어할 수 있다는 장점이 있다. 

CSS 적용 순서를 잘못하면 스타일이 꼬이고, 브라우저가 업데이트 되면 새로운 스타일을 반영하지 못할 수도 있다. 

 

https://www.jsdelivr.com/package/npm/reset-css

 

설치할 때 

$ npm install reset-css

$ yarn add reset-css

 

HTML 코드 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">

 

CSS 

@import '/path/to/reset-css/reset.css';

 

원천 소스 위치 

https://meyerweb.com/eric/tools/css/reset/

 

Normalize.css

더불어 많이 사용하는 Normalize.css는 브라우저의 유용한 기본 스타일을 유지하면서 일치하지 않는 부분을 수정한다. 

브라우저 간 일관성을 유지하면서 유용한 기본 스타일은 보존한다. (크롬, 엣지, 파이어폭스 ESR+, IE 10+, Safari 8+, Opera) 

필요한 부분만 수정하기 때문에 브라우저 간 차이를 최소화한다. 

우선 순위에 의한 충돌 가능성이 적고, GitHub를 통해 지속적으로 관리되어 브라우저 업데이트에 대응한다. 

Reset에 비해 러닝 커브가 있을 수 있다. 

Twitter, GitHub, Soundcloud, Medium, Bootstrap 등에서 사용되고 있고 Nomalize.css를 더 많이 쓰는 추세다. 

 

https://github.com/necolas/normalize.css

 

$ npm install --save normalize.css 

 

특징	Reset CSS	Normalize.css
초기화 방식	모든 기본 스타일 제거	유용한 기본 스타일 유지
재정의 필요성	높음	낮음
코드 간결성	복잡할 수 있음	상대적으로 간결함
업데이트 대응성	브라우저 업데이트 시 수정 필요	지속적인 관리로 최신화 가능

 

완전한 초기화가 필요한 겨우나 처음부터 모든 스타일을 정의하려는 프로젝트라면 Reset CSS를 사용하고, 효율적으로 스타일을 유지하고 브라우저 간 일관성을 보장하면서 필요한 부분만 재정의하려면 Nomalize.css를 사용한다.

프로젝트의 요구사항과 개발자의 선호에 따라 선택