보통 HTML 코더가 CSS를 작성하다보면 HTML 요소에 클래스 이름을 부여하고, selector에 해당 클래스 이름을 적어 스타일을 적용하게된다. 근데 간혹 고민하게 되는 것이, 클래스 이름을 적다가 2개 이상의 단어로 이름을 부여해야 하는 일이 생긴다면(예를 들어 Centred Panel이나 Hidden Menu 같은) 단어 사이에 줄표(-, 영어로 dash)를 적어야 할까, 아니면 밑줄(_, 영어로 underscore)을 적어야 할까? 아니면 Java에서 메소드를 작성하는 것처럼 각 단어 맨 앞 알파벳은 대문자로 작성하고 클래스 이름 맨 앞에 알파벳은 소문자로 작성하는 것은 어떨까(영어로 Camel Case)?

우선 결론부터 말하자면, 그것은 팀이나 개인의 선호에 대한 차이로, 어떤 방법을 사용하던지 크게 문제될 것은 없다. 다만 줄표(-, dash)의 사용을 추천하는데, 그 이유는 다음과 같다.

우 선 전체적으로 CSS코드가 통일되어 보여 다른 코드와 구분되기 쉽다. CSS는 2개 이상의 단어가 사용된 속성(property)에도 이미 줄표가 사용되고 있다. (margin-left나 vertical-align같은 것들) 이것은 CSS의 눈에 띄는 특징이다. Java Script의 경우 맨 앞에 단어를 제외한 각 단어의 맨 앞 알파벳을 대문자로 작성하며(marginLeft나 verticalAlign같이) HTML은 보통 단어 구분없이 그냥 전부 붙여 쓰는 것이 일반적이다(onmouseclick혹은 valign).

두번째로 CSS 작성이 훨씬 용이해질 수 있다. 홈페이지에 다음과 같은 클래스가 부여된 요소들이 있다고 가정하자.

webboard-title
webboard-body
webboard-bottom
webboard-control-centre

앞 에 webboard라는 prefix가 붙은 것을 봐서 같은 colour scheme나 같은 theme를 사용했을 가능성이 높다. 만약 이 클래스들의 colour scheme를 바꿔야 하는 일이 발생 했을 때 혹은 그런 일에 대비하기 위해서는 CSS를 어떻게 작성하여야 할까? 각자 나름의 노하우가 있지만 위 같은 경우는 다음과 같이 작성하여 단 한줄로도 해결 할 수 있다.

[class|=”webboard”] { property:value; … }

클래스가 webboard로 시작하는 모든 요소에 적용하는 스타일인데 만약 줄표 대신 밑줄이나 단순히 단어를 나열하는 식으로 클래스를 지정했다면 적용되지 않는다.

주의할 점은 위와 같이 CSS를 작성하면 IE6에선 적용되지 않는다. (이건 정말 버릴 필요성이 있다.)

이런식으로 CSS를 좀 더 유연하게 작성할 수 있도록 해준다.

Q > 근데 [class*=”webboard”]로 하면 줄표 아니어도 된다. 근데 꼭 저렇게 적어야만 하는가?

A > 물론 그렇게 사용하면 적용되지만 문제가 있다. 만약 다음과 같은 html 요소가 있다고 가정하자.

<div class=”testImCamelCase”>
G’day mate!
</div>

<div class=”this-is-not-a-test”>
This thing must not be coloured!!
</div>

여 기서 우리가 스타일을 적용하고 싶은 클래스는 이름이 test로 시작하는 testImCamelCase이다. 근데  [class*=”webboard”]와 같은 방법을 이용하면 this-is-not-a-test에도 적용된다. 즉, 클래스 이름안에 해당 이름이 포함되어 있으면 무조건 적용하기 때문에 예기치 못한 결과를 야기할 수 있다. 그래서 클래스 이름에 줄표 사용을 권장하는 이유다

아래 첨부파일은 줄표 사용에 관한  CSS적용 예제가 있다.

dash-or-underscore