CSS 설계 7가지 포인트

모듈이란?
재사용을 전제로 하는 한 덩어리의 단위
사이트 내라면 위치에 관계없이 재사용할 수 있다는 의미를 전제로 함

1. 특성에 따른 분류

1) 베이스 그룹 정의 (요소형 셀렉터)
body, html, img 등

2) 레이아웃 그룹 정의 (위치, 크기 조정 담당 코드)

• position(static, relative 제외)
• z-index
• top / right / bottom / left
• float
• width
• margin

3) 모듈 그룹 정의
모듈 자체에 대한 처리 및 자녀 요소의 스타일링
레이아웃과 관련된 지정은 하지 않는다.

2. 느슨한 결합

HTML과 스타일링의 사이에 결합도를 낮춘다.

1) 요소형 셀렉터를 사용하지 않는다
어떠한 이유로 설정했던 요소가 바뀌었을 때 해당 스타일의 적용이 되지 않기때문이다.

2) 속성 셀렉터의 특정값을 사용한 스타일링은 사용하지 않는다.
속성의 특정 값을 지정했을 경우 그 외의 경우가 생겼을 때 추가로 계속 작업해야 될 수도 있다.1

3. 영향범위 좁히기

1) 범위를 좁힐 수 있는지 검토한다.
2) 베이스 스타일 등 영향 범위가 넓은 CSS에 포함되는 스타일링은 최소화한다.

• 가능한 가장 가까운 부모 요소까지 셀렉터 포함시키기
• 손자, 자녀 셀렉터의 사용가능성 검토하기
• 느슨한 결합을 위한 클래스 지정 여부 검토하기

#main span {}
#main .bl_module.main-module span
#main .bl_module.main-module .body > span
//보다...
#main .bl_module.main-module .body > .sub-text

4. 의존성 제거하기

특정 셀렉터를 벗어났을 때도 모듈 단위 스타일은 적용이 가능해야한다.
아래와 같이 #main이 붙어있으면 #main이라는 셀렉터에 대한 의존성(#main 안에서만 적용이 됨)이 생기므로 제거한다.

#main .bl_module.main-module .body > .sub-text
//보다...
.bl_module.main-module .body > .sub-text

5. 상세도 낮추기

-- 상세도가 높을 때의 단점 --

• 셀렉터를 예측하기 어렵다.
• 다른 요소(부모 등)에 대한 의존도가 높아진다.
• 덮어쓰기가 어렵다. (난무하는 !important 사용 등)
• 유지 보수에 들어가는 수고가 증가한다.

1) 셀렉터를 사용할 때는 클래스 셀렉터를 사용한다. (id 자체로도 상세도가 매우 높다)
2) 그 자체에 대해 특별한 스타일링을 수행하지 않는 클래스는 제거한다.
(의미론적으로 필요한 클래스는 css 스타일링에 굳이 포함할 필요는 없다.)

.bl_module.main-module .body > .sub-text
//보다...
.bl_module .body > .sub-text

6. 유추 가능한 클래스명

[1] 영향범위 유추

영향범위가 넓은지 좁은지 클래스 이름에서 확실하게 알 수 있도록 한다.
HTML만 봤을 때의 영향 범위와 CSS에서의 스타일링의 일치성을 확인한다.
(시험 삼아 클래스를 다른 위치에서 사용했을 때 적용되지 않는 상황발생 가능)

1) 모듈의 자녀의 요소에는 모듈의 루트 요소의 클래스 이름을 상속시킨다.

• 루트 요소 : 모듈의 기점이 되는(최상위 부모) 요소
  2) 모듈 밖에서도 사용 가능한 클래스 : 카멜 케이스
  모듈 안에서만 사용 가능한 클래스 : 하이픈/스네이크 케이스

.bl_module .title
.bl_module .sub-title
//보다...
.bl_module_title
.subTitle

-- 상세도를 낮춘 .bl_module_title 라 할지라도 '모듈 안에서 사용하는 타이틀'임을 확실하게 전달할 수 있음

-- subTitle만 보더라도 모듈 밖에서 사용이 가능함을 전달할 수 있음

[2] 형태, 기능, 역할 유추

1) 콘텍스트가 아니라 형태, 기능, 역할을 기반으로 만든다. (유추 가능성 고려)

• title1, title2, title3
  같이 모호한 이름 보다...
• page-title, section-title, sub-title
  처럼 CSS나 실제 표시된 내용을 보지 않더라도, 역할이 유추 가능한 클래스명 사용

2) media, accordion, slider 등 일반적 호칭 사용 (구체성, 범용성 균형 고려)

• 구체성이 높은 모듈 이름 (bl_aboutService, bl_aboutMedia)
  about처럼 특정하게 지정하는 단어를 사용하면, 그 위치가 아니면 절대 사용할 수 없다는 의미를 가지게 된다.
  이러한 모듈을 그 위치 이외에 모듈 사용시, 이름에 관계없이 어디서나 사용해도 좋다는 의미가 되므로 모듈 이름을 구체적으로 적을 필요없어지며, 모듈 이름에 대한 혼란만 야기시킨다.

• 특정 페이지를 나타내는 모듈 이름 (bl_service)
  개발 진행 당시에는 특정 위치에서만 사용할 수도 있으나, 운용하는 과정에서 새로운 페이지를 만듦에 따라 이전의 코드를 사용할 경우도 있다.
  이럴경우 모듈 이름의 상태와 사용되는 상황 사이의 괴리가 발생한다.
  모듈의 이름이 페이지 자체인지, 위치인지 판단하기 모호함으로 법용성이 낮다고 볼 수 있다.

• 특정 부분에 관계없이 범용적 사용 가능한 모듈 이름(bl_media)

• 구체성 완전 배체하고 범용성에만 특화된 모듈 이름(bl_migTitleText)
  클래스 이름에서 형태, 기능, 역할을 유추할 수 없고, 모듈이 늘어날수록 구별이 어려워진다.

7. 확장성 높이기

1) 싱글 클래스 (HTML 단순, CSS 복잡)
모듈 확장에 대한 유연성이 낮다
기본 모듈에서 조금만 다른 파생 모듈을 만들고자 하는 경우에도 반드시 전용 클래스를 새로 만들어야 한다.

2) 멀티 클래스 (HTML 복잡, CSS 단순)

• 덮어쓰기 개념 가능
  기본 형태를 기본 클래스로 간주 후, 특정한 요구사항 발생 시 해당 부분만 변경하는 클래스 만듦

• 범용적 클래스 사용 가능

• 가급적 CSS 파일에 손을 안댈수 있음(HTML 변경만으로 가능)

• 모디파이어 가능(기능 추가)
  모디파이어를 붙이는 위치는 제공할 기능(역할)마다 하나씩 만든다.

  • 루트요소 모디파이어 (.bl_media__rev)
    좌우반전(rev)의 경우, 반전시키고 싶은 루트 요소에 모디파이어를 붙인다.
    손자 셀렉터 사용으로 세트로 사용되는 단위로 묶는다.

  • 자녀요소 모디파이어 (.bl_media_imageWrapper__bordered)
    세부적으로 특정부분만 변경이 필요한 경우,
    변경 대상이 되는 자녀요소에 직접 모디파이어를 붙인다.

모디파이어 (Modifier)
기존 클래스에 대해 무언가 변경을 추가해 덮어쓰기 위한 클래스

헬퍼 / 유틸리티 클래스 (Helper / Utility Class)
한 가지 속성을 변경하기 위한 클래스

• 단순한 덮어쓰기의 경우, 헬퍼 클래스 사용여부 검토
• 모디파이어를 여러 개 붙인 것을 많이 사용하는 경우에는 새로운 모듈을 만들어 모디파이어를 덮어쓴다.