웹사이트를 계속해서 만들어 놓는 경우 아래와 같이 css를 구분하여 작성하는게 일반적입니다. 가장 크게 아래와 같이 reset, common, base로 나뉠 수 있죠.

  • reset.css
  • common.css
  • base.css

위 파일들을 구분한 차이와 왜 나누어 사용할까요? 아래에서 알아보세요.



# reset, common 그리고 base css 파일의 사용
이처럼 구분하는 이유는 사용 목적에 따라 뚜렷히 구분될 수 있고 재사용성을 높일 수 있기 때문입니다. 또 향후 업데이트 역시 하나의 긴 파일보다는 용이합니다.

- 재사용성의 목적
- 업데이트의 용이
- 사용 목적에 따라 뚜렷히 구분되는 css 파일 


@ 재사용성의 목적
먼저 재사용성의 목적이라면 상황에 따라 reset.css만 아니면 common.css만 필요한 경우가 있기 때문입니다. 필요한 파일만 빨리 가져다 적용할 수 있겠죠.


@ 업데이트의 용이
새로운 스타일을 정의하는 새로운 css 룰의 업데이트가 필요하다면? 다른 css 파일이 아닌 common.css만 새로 업데이트 하면 되겠죠. 또한 같은 목적의 스타일만 모아두므로 분류하기도 훨씬 수월합니다.


@ 사용 목적에 따라 뚜렷히 구분되는 css 파일
이처럼 구분하여 사용할 수 있는 이유가 바로 뚜렷히 구분 가능하다는 점입니다. 한 마디로 얘기하면 reset은 스타일의 리셋을 위해 필요한 것들을 모아두고 common은 스타일 룰에 따라 편하게 정의할 수 있는 스타일의 셋(set)입니다. 마지막으로 base.css는 현재 웹페이지에 정의되는 기본적인 스타일을 사용하게 됩니다.

하지만 모두 이와 같은 방식으로 사용되는 것은 아닙니다. 더 편리한 방법, 또는 다른 목적으로 관리 및 분리되어 사용될 것입니다. 이런 방식 역시 하나의 예라고 알아두시기 바랍니다.



! reset.css
reset은 말뜻처럼 리셋, 초기화로 처음 웹페이지를 불러올때 동일한 조건으로 만들어 주는 역할을 합니다. 이 css가 가장 필요한 이유는 아래와 같이 구분할 수 있습니다.

  • 다른 css가 적용될때 동일한 효과가 적용되기 위함
  • 브라우저에 따라 다른 스타일을 동일하게 맞추기 위함

여기서 가장 큰 이유는 '같은 스타일 속성도 각각 환경 및 브라우저에 따라 전혀 다른 스타일로 다르게 적용될 수 있다'입니다. 이를 통일화하기 위해서 지우개로 지우고 같은 하얀 백지의 캔버스를 준비한다고 생각할 수 있겠죠.



! common.css
공통적으로 적용되는 스타일이 여기에 위치합니다. 예를들어 테이블 태그에 항상 적용하는 동일한 스타일이 있거나 아니면 비슷한 폼 양식의 태그를 조정할 경우 common.css에 정의해서 항상 똑같은 스타일을 적용할 수 있겠죠.
@ common.css
.table {
  table-layout: fixed;
  width: 100%;
}

위 코드는 하나의 예입니다. 그 외에도 스타일의 일부를 조정할 경우에도 사용할 수 있습니다. 예를들어 margin값 또는 padding값을 0으로 조정한다면 아래처럼 사용합니다.
.margin-no {
  margin: 0;
}
.padding-no {
  padding: 0;
}

common.css의 스타일 구분은 대부분 UI 컴포넌트에 따라 구분되어 정의되고 작성되는게 일반적입니다. navigation bar, sidebar, pagination, modal 그리고 button, icon 등등 여러가지 UI 컴포넌트의 스타일을 미리 common.css에 정의해서 사용하면 좋겠죠?



! base.css
base.css는 우리가 흔히 사용하는 그리고 가장 많이 사용되는 css입니다. 웹페이지에 필요한 설정들을 이 곳에 사용할 수 있습니다. 개별 페이지로 구분할 수도 있습니다. 만약 common과 reset이 없다면 base 내부에 하나의 파일로 관리되어 사용되기도 하죠.



# 마지막으로
여기까지 reset.css, common.css, base.css의 사용과 목적에 대하여 간략하게 알아보았습니다. 요즘은 css를 어떻게 효과적으로 사용하느냐에 따라 생산성의 차이가 매우 큽니다. css도 매우 복잡해지고 있으며 수 많은 스타일 들을 보다 쉽게 관리하고 사용하는 방법은 계속 연구되고 있습니다.