[CSS] 1. 베이스 규칙

모든 프로젝트에서 어떤 형태가 되던 분류, 정리하는 것이 중요하다. 새로운 스타일을 생성할 때마다 파일의 맨 뒤에 코드를 붙여버린다면, 필요한 것을 찾기도 어렵고 협업하는데도 혼란을 줄 수 있다. 

ID 선택자(#), class 선택자(.) 등 사용할 수 있는 몇 가지 선택자 중에서 무엇을 사용할지는 어떻게 결정하는게 좋을까?
원하는 스타일을 적용 할 적절한 요소는 어떻게 선택해야 좋을까?
웹 사이트의 스타일을 이해하기 쉽게 정리하려면 어떻게 하면 좋을까?

 

이 때 필요한 것은 범주화(categorization)다. CSS 규칙을 범주화함으로써 규칙에서 패턴이 보이기 시작하고, 각 패턴을 더 적절하게 사용할 수 있게 된다.

 

CSS 5개 규칙

1. 베이스 (Base)
2. 레이아웃 (Layout)
3. 모듈 (Module)
4. 상태 (State)
5. 테마 (Theme)

베이스 (Base)

'베이스'는 기본 규칙이다. 이 규칙 대부분은 요소 선택자에 대한 스타일을 정의하는 것이지만, 아래 4가지도 베이스 규칙에 포함된다.  

• 속성 선택자: [속성이름 = "속성값"]
• 가상 클래스 선택자: ex) :link, :hover 등의 :가상이벤트
• 자식 전택자: ex) .mother > .son
• 형제 선택자: ex) h1~h2

* {margin: 0; padding:0;}
input [type = text] {border: none;}
a {color: #888888;}
a:hover {color:#123456;}

레이아웃 (Layout)

'레이아웃'은 페이지를 섹션으로 나누는 데 쓰인다. 그리고 레이아웃은 하나의 '모듈'을 포함하여 지정한다.

모듈 (Module)

'모듈'은 재사용이 가능하고, 조합이 가능한 여러개의 파트로 이루어졌다. 말풍선이나 사이드바, 제품목록을 예로들 수 있다.

상태 (State)

'상태'는 특정한 상태에서 '모듈'과 '레이아웃'이 어떤 식으로 표현되어야 하는지 기술한 규칙이다. 요소를 숨겨야 하는지, 확장해야 하는지, 요소가 활성/비확성인지 등을 기술한다. 

테마 (Theme)

'테마'는 '모듈'이나 '레이아웃'이 어떻게 보일 것인지를 기술하는 점에서 '상태'와 비슷하다.