"모든 디자이너가 해야할 9가지 CSS 원칙"에 대한 의견
dev | 2007-11-28
"모든 디자이너가 해야할 9가지 CSS 원칙"에 대한 제 생각입니다. 전체적으로 동의할 수 없는 내용들이 많습니다.
1. 하위선택자 사용에 따른 들여쓰기
CSS의 캐스케이드를 제대로 반영하지 못하는 인위적인 인덴트가 좋다는 얘기는 캐스케이드를 제대로 이해 못했고 셀렉터를 잘 사용하지 못하고 있다는 얘기와 같습니다. CSS 룰들은 서로 동등한 위치에 있지 누가 누구를 포함하거나 하지 않습니다. CSS의 가장 중요한 특징이 무시되는 잘못된 방법입니다.
2. 그룹화와 CSS의 주석
가장 좋은 코드는 주석 없이도 바로 이해할 수 있는 코드 입니다. 물론 주석이 필요할 때도 있습니다. 예외적인 사항이나 전체적인 흐름을 깨는 경우에는 주석을 붙여 주어야 하죠. 하지만 여기에 나온것 처럼 주석 가지고 그림그리는 행위는 코드를 엄청 지저분하게 하고 읽기 힘들게 만듭니다. 주석때문에 코드를 읽는데 방해가 됩니다.
3. 스타일 선언은 한줄에
그동안 개인적인 취향 문제라고 생각하고 괜찮다고 생각했지만 실제로 이렇게 작성된 코드로 작업을 해보고 아주 나쁜 방법이라는 것을 알게 되었습니다. 속성을 한줄에 하나씩만 선언하면 하나의 룰을 한눈에 파악하는 것이 가능하지만 한줄에 다 붙여 넣으면 좌우로 움직이면서 파악해야 하기 때문에 가독성이 훨씬 더 떨어집니다. 너무 긴 CSS 파일을 짧게 만들기 위해서 가독성을 희생하는 것은 잘못된 선택입니다.
4. css 파일의 분리
이것은 상황에 따라서 바뀌는 문제입니다. 무조건 나눈다고 좋은게 아닙니다. 목적이 명확한 CSS 룰이라고 해도 용량이 작다면 나누지 않는 것이 더 좋습니다. 파일 분리의 기준에는 파일의 크기와 갯수도 충분하게 고려 되어야 합니다.
5. 엘리먼트 초기화
경우에 따라서 브라우저의 자체 스타일이 필요할 수 있습니다. 예를 들어서 사용자가 직접 입력한 스타일이 적용 안된 콘텐츠나, 오래된 콘텐츠들이 있을 수 있습니다. 브라우저간의 차이가 문제라면 모든 엘리먼트에 대한 선언을 없애는 초기화 보다는 이를 일정하게 해주는 선언이 더 좋습니다. 예를 들어서 p 태그의 경우
p {
margin: 0;
}이것 보다는
p {
margin: 1.5em 0;
}이것이 더 좋은 초기화 선언입니다.
6. 사용되는 색상코드를 한곳에 모아 적어 둔다
있어서 나쁠 것은 없지만 이게 왜 필요한지는 잘 모르겠네요. 코드에 이미 다 들어있고 찾는 것도 어려운 것이 아닌데 주석에 적어둘 필요는 없어보입니다. WSG에 적어놔야죠.
7. 의미있는 네이밍
이것은 두말하면 잔소리죠. 전적으로 동의합니다.
8. 알파벳순서의 프로퍼티정의
CSS룰과 알파벳 순서는 전혀 연관 관계가 없습니다. 그리고 하나의 룰에 알파벳으로 정렬해야 될 정도로 많은 속성이 있는 경우도 거의 없습니다. 차라리 역할에 맞게, 블록설정, 위치 설정, 배경, 타이포와 같이 의미에 맞게 정렬하는 것이 더 좋습니다.
9. 유용한 css 클래스 유지
CSS는 표현을 나타내고 클래스는 의미를 나타냅니다. 표현과 의미를 분리하기 위해서 CSS를 사용하는데 이것을 다시 합치라는 웃기는 내용이군요. mt10, mt25, fl, fr 등의 클래스를 만들어 쓰는 분을 본적이 있는데 이렇게 쓰려면 차라리 인라인 스타일로 넣는게 더 좋습니다.
전체 의견
여기 나온 내용중에 상당수는 좋은 툴을 사용하는 것으로 충분히 극복이 가능한 것들입니다. 이런 트리키한 방법은 별로 좋지 않다고 생각합니다. CSS의 절반은 셀렉터입니다. 셀렉터가 모든 것을 말해줄수 있게 작성된 코드가 가장 좋은 코드라고 생각합니다.
Comments
전혀 동의할 수 없는 내용만 써놓고 원칙이라고 이름을 붙였군요. 이건 원칙은 커녕 안티패턴들만 모아놨는데요. 특히 9번째 항목은 정말 어이가 없습니다. CSS가 마크업에 의존적인 거지, 마크업이 CSS에 의존적으로 되면 안되는 건데, 저건 그냥 font 태그 쓰라는 것과 별반 다를 게 없는 주장이군요.
음.. 이제 살짝 익어가기 시작하는 저에게는 원본글도 이전글도 관련글도 모두 피가 되고 살이 되는 군요. ^^; 몇몇개는 저도 동의하고, 동의하지 못하는 부분도 있습니다. 하지만 개인적인 생각으로는 정답이 없다가 정답이겠죠. 결국 작업의 효율성과 작성 후의 유지보수성을 따져서 가장 알맞은 작업 가이드 라인을 만들어 내고 그것을 '모두'가 준수하기만 한다면 어떤 방법이든 '나쁘다'라고 말할 수 는 없다고 봅니다. ^^ 단, 저도 9번은 좀 아니다 싶네요. - _-;;
억지로 만들어 낸 원칙이라고밖에 생각이 안 되네요. 현석님 말대로 좋은 툴을 쓰는 것으로 충분히 극복 가능한 것 같습니다.
제가 좀더 견해에 대해 자세한 코멘트를 덧붙여야 했는데 현석님이 저 대신에 포스팅에 대한 더 자세한 견해를 제시해주셨네요. 다른 부분은 제가 미처 지적하지 못한 부분도 있고 저역시 공감하는 내용입니다. 하지만 3번(스타일선언은 한줄에)에 관한 부분은 굳이 한줄에 하나의 속성을 적지 않고 길게 일렬로 적는다고 해서 그렇게 큰 가독성을 해치지 않는다고 생각합니다. 이미 제가 주변에서 직간접적으로 만나뵙는 웹퍼블리셔분들은 충분히 큰 해상도를 사용하여 좌우스크롤에 크게 불편해하지 않으시며 코드 유지보수시에 직접 CSS파일을 열어 수정하시는 것이 아니라 firebug 또는 ie developer toolbar 등을 사용하여 먼저 어떤 CSS를 수정하면 되는지 선작업후 CSS수정작업을 하시는 경우가 많지요. 그렇기 때문에 꼭 속성을 가독성을 위해 한줄에 하나씩 적는게 100% 맞다고 말하기는 어려운부분인것 같습니다.
9번 처음 시작할때 매우 유혹적이었던 것으로 기억합니다. 지금은 일부러 저렇게 사용하지는 않지만, 필요한 때가 있기는 하더군요. 이용자 게시판에 이용자가 올리는 잘못된 코드는 어쩔 수 없지만, css를 잘 모르는 의뢰자가 고정된 컨텐츠를 수정하면서 한순간에 (그렇게 따질 것까지야 없지만) 유효성 실패한 페이지를 양산해 내 버리는 경우는 참 안타깝더군요. 어려운것도 아니고 간단히 글자에 색깔 입히는 정모만 가지고도 말입니다. 교육도 시켜보고 했지만, 몇가지 클래스를 준비해 두고 사용토록하는 방법이 가장 실효성이 있었습니다.
09년도 군 입대전까지만 하더라도 속성을 한줄에 하나씩 작성하다가 11년도에 군대 다녀오고나서 보니 수많은 퍼블리셔들이 한줄에 모든 속성을 다 작성하고 몇몇 과장급이상의 퍼블리셔들이 선택자와 속성을 줄바꿈해서 코딩하는게 틀렸다라는 말에 저도 잠시동안은 선택자와 속성을 한줄에 작성하였습니다. 하지만 근래에 현석님의 포스팅을 보면서 계속 실무를 접하다 보니 현석님이 왜 이런 CSS작성 방식을 권장하는지 몸으로 느끼기 시작했습니다만... 도무지 이러한 CSS작성법이 틀렸다라고 말하는 사람들은 잘못됬다라는 발상자채가 어디서 부터 유래됬는지 도무지 모르겠습니다. -_-;; 앞으로 퍼블리셔로써 사회생활함에 있어 이러한 것에 대한 논리적인 설득이 필요할꺼 같은데 조언 좀 부탁드립니다.