CSS 선택자에 절대경로는 위험

최근 배포한 워드프레스의 테마를 태터 스킨으로 변환하면서 여러 태터 스킨들을 살펴보게 되었다. 치환자와 여러 스타일시트 요소들을 둘러보기 위함이었는데 여기서 상당히 흥미로운 코딩패턴을 볼수 있었다. 꽤 많은 숫자의 스타일시트가 선택자 경로를 지정할 시에 절대경로를 즐겨 쓰고 있었다. 예를들어 #school 이라는 div 안의 #desk 가 있다면

#school #desk {}

식으로 선택되어 값들이 지정되어 있었다. 보통 이러한 절대 선택 부분은 특별히 어느 특정 부분에만 지정값을 주고자 할때 쓰는 방법인데 몇몇 스타일시트에선 대부분의 경로가 절대경로로 되어 있었다.

이 부분이 위험한 이유는 유연성을 0% 로 만들어 버리는 데에 있다. 누구는 타 제작자가 스타일시트를 살펴 볼 때에 좀더 쉽게 알아볼수 있는 장점이 있다고 하지만 아직 스타일시트를 잘 이해하지 못하고 있는 것이다. 오히려 타 제작자와 스타일시트를 공동 제작한다면 서로에게 유연성을 부여해야 하는것이 맞을것이다. 절대경로는 그 반대를 추구한다.

간단한 예로 #school #desk 에서 만약 다른 페이지로 넘어가며 #school 이 아닌 #office 로 바뀌었다고 한다면 #desk값을 아무리 같게 하고 싶더래도 #desk의 값은 0 이다. 스타일시트에서 고른 선택자는 #school 안의 #desk 이기 때문이다. 물론 office 에도 넣고 싶다면 #office #desk 를 또 지정해 주어야 하는 번거로움과 후에 #office가 타인에 의해 또다른 이름으로 바뀌게 될 경우 난감한 경우가 된다.

특히나 class 로 지정된 부분은 더욱 민감하다. class 는 반복적인 선택자를 가능케 하는데 절대 경로를 쓰면 class의 의미가 없어진다.

#desk .pencel

은 아무리 pencel 이 다른 부분에서 반복되어 사용된다고 하더래도 #desk 안의 pencil 밖에 지정이 안되어 있다고 보기 때문에 값은 0 이다.

물론 이 절대 경로를 반대로 사용하면 유용하게 쓰일수 있다. 오래전에 나누었던 body 의 id 를 지정해 주어 여러 특별한 요소를 사용하게 한다거나 .pencil 은 다 붉은 색이지만 #desk 에 지정된 pencil만은 파란색으로 지정을 가능케 할수 있다.

.pencil {color: red;} #desk .pencil {color: blue;}

비슷한듯 하지만 유연성에 있어서 판이하게 차이가 나므로 절대경로를 선호하는것은 위험성이 있다. 그리고 좋지 않은 습관이다.

스타일시트를 알아 보기 쉽게

이 패턴이 제작자들 안에서 알아보기 쉽게 하기 위한 목적으로 시작되었다면 이 방법 외에 서로 알아보기 쉽게 할수 있는 방법은 없을까? 오래전에 나누었던 방식도 괜찮다. 종속 되는 부분은 타 언어 코딩 방식과 같이 indentation(TAB) 을 사용하여

#desk {}         #hotwater {}         #notes {}                 #pencil {}                 #eraser {}         #chair {}

이런 식으로 표현 할수가 있겠다. 특히 어느정도 html 과 비슷한 틀을 갖는다면 더욱 이해하기 편리하다.

이에 덧붙이자면 세부적인 주석 표기법이다. 약간 코드의 양이 많아 지면 검색을 하여 찾는 빈도가 높아진다. 하지만 header 부분을 찾고 싶지만 #header 를 찾게 되는 번거로움이 있으므로 주석을 달 경우 앞에 =를 붙여주어

/* =header ------------------ */ 라는 방식으로 갈수가 있다. 특정 id 보다 부분을 찾고 싶을때에는 검색시에 =header 를 타입하여 쉽게 구분을 할수 있는 방법이다.