[CSS] CSS 선택자로 ID를 가급적 쓰지 말아야 할까?

꽤 시간이 지나 읽어도 감동적인 토비님의 답변 :)

아이디를 쓰지 말라고 하는데는 그 이유가 있을 건데 이유를 제대로 제시하지 않는건 아쉬움이 있는 커뮤니케이션이네요. 뭐 다른곳에서도 비일비재 한 일이니까요. 예상되는 이유로는 2가지가 있습니다.

첫 번째는, id가 페이지내의 고유한 요소의 의미외에도 개발작업시 요소 선택을 위한 방편으로 사용된다는 점 때문입니다. 의미론적 id는 URL맨 뒤에 #id 를 붙여 해당컨텐츠가 있는 곳으로 스크롤을 맞춰주는 일명 책갈피 기능 외에는 아무런 실효기능이 없습니다. 때문에 그 보다는 id를 개발작업시 선택을 위해서 사용하는 용도로만 제한하고 사용하는 식의 협업방식을 취하는 경우가 많습니다.

두 번째는, CSS내에서의 id 선택자 사용은 우선순위 문제를 발생시키기 때문입니다. CSS선택자의 우선순위는 !important > inline style > #id > .class > tag 순서를 갖게 되지요. id를 한번만 사용했다고 하더라도 100개의 클래스를 늘어놓은 선택자보다 더 우선순위를 갖게 됩니다. 그 때문에 불가피하게 !important를 쓰거나 또 다른 id를 붙이거나 인라인 스타일을 사용해야 하는 문제가 발생합니다. 이런식의 코드 작성은 CSS를 간결하고 효율적으로 작성하는데 걸림돌이 됩니다.

전달해주신 대화내용으로 짐작컨데 개발자분이 id를 사용하지 말란건 두가지 이유 모두 감안한 의견인 것 같습니다. 알고는 있는데 머릿속에서 잘 정리되어 있지 않아 막연하거나, 예전에 해답을 내려놓은채로 그 이유는 까먹었다던가, 아니면 단지 CSS Lint같은 검사 툴에서 id를 쓰지 말라고 추천하니 이유는 모르지만 그 권고를 따르려는 것일 수도 있지요.

제 의견도 CSS 선택자에서는 id를 쓰지 않는게 좋다입니다. 우선순위 문제가 가장 큰 이유입니다. 저도 거의 대부분의 경우 다른 개발자와 협업을 하고, 저는 HTML, CSS위주로 작업을 합니다. 그런 경우 다른 분이 JS 및 백엔드를 하시게 되지요. 저는 CSS 선택자에서는 id를 쓰지 않지만 HTML에서는 id를 좀 붙이는 편인데요. form요소에 for속성으로 label을 매치시켜줘야 웹접근성을 만족시킬 수 있기 때문이기도 하고, 개발자가 개발할 때 id가 필요할 것을 미리 예상해서 붙이기도 합니다.

예상을 할 수 있는 이유는 제가 간단한 스크립트를 짜서 UI정도는 동작을 구현해서 보내기 때문인데요. 그런 결과물을 건네면, 제가 짠 스크립트를 버리고 새로 짜시는 분도 있고. 그대로 활용하시는 분도 있고. 이런식으로 하지 말라고 하시는 분도 있습니다.

그 분의 일하는 방식이 제 방식과 잘 맞지 않으면 id는 싹 빼고 작업할 수도 있겠지요. 어쨌든 원활한 동료관계를 유지하기 위해서는 맞춰 줄 수 밖에 없지요. 저는 마크업 개발이 요리를 위해 재료를 다듬는 과정과 비슷하다고 생각합니다. 요리할 쉐프가 따로 있다면 재료는 쉐프가 원하는 대로 다듬어 놓아야 편하게 요리를 할 수 있겠지요. 그러자면 쉐프 눈치를 살피는건 불가피하게 해야 할 수 밖에요.

뭐 그렇다고 이어 받아 작업하는 개발자가 항상 나보다 더 훌륭한 개발자라서는 아닙니다. 때로는 바보온달을 보필하는 평강공주와 같은 마음으로 해야 할 때도 있기도 하겠지요.

또 다른 관점에서 보자면 마크업 개발은 UI개발의 뼈대를 구축하는 초기 설계이기도 합니다. 내가 개발을 해야 하는데 마크업을 다른 사람이 해서 준다면, 나는 꼼짝없이 그 사람이 잡아놓은 뼈대의 틀 안에서 개발해야 합니다. 다 뒤집어서 새로 만들게 아니면 그게 불편하더라도 따르는 수 밖에 없지요. 그런 점을 생각한다면 바통을 이어받는 개발자에게도 협업으로 인해 발생하는 고충이 있는 셈입니다.

이런 상황들 감안하셔서 동료관계가 원만 할 수 있는 방법으로 잘 풀어보시면 좋을 것 같습니다. 시맨틱도 좋고, 접근성도 좋고, 웹표준도 좋지만. 저는 일하는 사람들이 서로 스트레스 안받고 사이좋게 일하는게 제일 먼저 생각할 점이 아닐까 싶네요 :)

by 윤원진 (2015-04-06)