CSS 속성 한줄로 쓰기와 여러줄로 나눠 쓰기
dev | 2012-12-08
CSS 속성을 한줄로 쓰는게 좋을지 여러줄로 나눠서 쓰는게 좋을지는 오래된 떡밥이다. 나는 CSS를 처음 시작할 때부터 여러줄로 나눠 써오는 방법을 사용해왔고 당연하다고 생각하고 있었는데 어느순간부터 한줄로 쓰는 방법이 등장하더니 요즘은 거의 한줄로 쓰는 방법이 대세인 것 같다.
어떤 방식인지 코드를 일단 보자.
#location .map {
position: relative;
}
#location .map img {
max-width: 100%;
}
#location .map .btn {
position: absolute;
right: 2em;
bottom: 1em;
}
#location .btn a,
#location .btn button {
display: inline-block;
border: 0 none;
border-radius: 2px;
background-color: #000;
color: #fff;
padding: 0 0.8em;
line-height: 2.5em;
text-decoration: none;
vertical-align: middle;
overflow: visible;
font-size: 1em;
}#location .map{position:relative}
#location .map img{max-width:100%}
#location .map .btn{position:absolute;right:2em;bottom:1em}
#location .btn a, #location .btn button{display:inline-block;border:0 none;border-radius:2px;background-color:#000;color:#fff;padding:0 0.8em;line-height:2.5em;text-decoration:none;vertical-align:middle;overflow:visible;font-size:1em}위의 것은 여러줄로 나눠서 쓰는 방식이고 아래의 것은 한줄에 쓰는 방식이다.
한줄로 쓰는 사람들의 주장은 이 방법을 사용하면 눈으로 셀렉터를 스캔하기 쉽다는 것이다. 언뜻 보기에도 라인수가 짧으니 읽기 쉬워 보이기는 하다. 하지만 실제로 읽어보면 그렇지만은 않다. 한동안 컨벤션을 맞춰본다고 이 방법을 써봤다. 나는 아이디나 클래스 명에 의미를 살린 단어를 사용하기 때문에 셀렉터를 찾을 때에는 이를 검색을 한다. 그리고 CSS 룰의 순서는 HTML 요소의 순서를 따른다는 명확한 규칙을 가지고 작성을 하기 때문에 셀렉터의 순서로 원하는 부분을 바로 찾을 수 있다. 스크롤을 조금 더 움직이기는 해야 하지만 말이다. 그래서 한줄로 쓰는 방법이 어떤 부분에 장점이 있는지 사실 느낄 수 없었다.
반면에 속성을 수정하면서는 정말 고통스러웠다. 하나의 룰 안에 속성이 한 10개 정도만되도 수정해야 하는 속성이 어디있는지 바로 찾을 수가 없었다. 선언했던 속성을 한번 더 선언하기도 했다. 속성을 정해진 순서에따라 배치하면 좋다고 주장하는 사람도 있지만 넌센스다. 모든 속성이 다 들어가는 것도 아니고 룰에 따라서 사용되는 속성이 천차만별인데 순서를 맞춘다고 원하는 속성을 바로 찾을 수는 없다. 그 속성이 사용됐는지 파악하기도 힘들다.
특히 한줄로 적다보면 변경내역 추적이 힘들다.
Hyeonseoks-iMac:Desktop hyeonseok$ diff before.css after.css
4c4
< #location .btn a, #location .btn button{display:inline-block;border:0 none;border-radius:2px;background-color:#000;color:#fff;padding:0 0.8em;line-height:2.5em;text-decoration:none;vertical-align:middle;overflow:visible;font-size:1em}
---
> #location .btn a, #location .btn button{display:inline-block;border:0 none;border-radius:2px;background-color:#000;color:#eee;padding:0 0.8em;line-height:2.6em;text-decoration:none;vertical-align:middle;overflow:visible;font-size:0.9em}코딩 컨벤션에 무언가를 감추려면 한줄에 쓰라는 말이 있다. 어느부분이 수정되었는지 알 수가 없다. 변경내역이 아주 잘 감춰졌다.
여러줄로 나눠쓰면 아래와같이 금방 파악할 수 있다.
Hyeonseoks-iMac:Desktop hyeonseok$ diff before.css after.css
5c5
< background-color: #000;
---
> background-color: #eee;
8c8
< line-height: 2.5em;
---
> line-height: 2.6em;
12c12
< font-size: 1em;
---
> font-size: 0.9em;요즘은 특히나 반응형 웹디자인 때문에 @rule도 많이 쓰고 제조사 접두사도 써야하기 때문에 한줄에 쓰기가 쉽지 않다. @rule 안의 내용을 한줄에 쓸 수는 없다. 필연적으로 줄을 나눠야 되는데 그러면 한줄로 쓰여있는 다른 부분과 일관성도 떨어진다. 제조사 접두사나 배경이미지 레이어링, CSS3 그래디언트 등을 사용하면 하나의 룰안에 들어가는 글자수가 200~300글자가 되는데 이를 한줄에 쓰고 나중에 찾아서 수정하겠다는 생각은 무모하다.
CSS 혼자만 작업하는 거면 한줄로 써도 된다. 하지만 다른 사람과 협업을 한다면 여러줄로 나눠써라.
혹시 용량때문에 한줄로 쓰고 있다면 기계가 할일을 사람이 하려들지 말아라.
Comments
저는 한 줄쓰기를 선호하는데요. 양쪽의 여러 논리가 있겠지만 제 생각에는 기호에 가까운 문제라고 생각해요. 속성 순서까지 지정하는 컨벤션은 저도 오버라고 생각합니다.
Diff를 알아보기 힘든 문제를 그냥 기호의 문제라고 말하기는 힘듭니다.
오래된 떡밥이 제꺼였군요..;; 셀렉터 파악이나 속성, diff 를 알아보는데 있어서 상황에 따라 우선순위는 있을 것 같습니다. 다만 저는 실무에서 한줄쓰기를 했을때 본인 혹은 타인의 코드를 보면서 셀렉터를 빠르게 파악하는데 유용했고 한줄작성시에는 속성 순서에 관한 컨벤션도 유지보수에 의미가 있었습니다. 모든 속성을 정확하게 맞춘다기보다 의미별로 그룹을 나누어서 파악하는 시간을 줄입니다. 타인의 작업 단위별 코드에서도 속성의 일관성이 없다면 여러줄로 작성되더라도 알아보기 힘든건 마찬가지였습니다. 요즘 벤더프리픽스가 많이 쓰이는 상황에서 여러줄의 코드가 재사용도 쉽고 편집을 빠르게 할 수 있지만 스크롤압박과 셀렉터 검색이 불편해서 개인적으로는 한줄쓰기를 선호하고 권장하는 편입니다. 오랬동안 이렇게 했지만 프로젝트에서 작업효율을 높이는데 다른 우선순위가 있다면 바꿔야겠죠.
동감할 때보다 그렇지 않을 때 댓글을 더 많이 쓰게 되는 편인데, 글 내용에는 큰 공감을 했으나 무심코 댓글을 보니까 여러가지 생각이 들어서 저도 의견을 써봅니다. 일단 정찬명 님이 말씀하신 “기호의 문제” 관점에 대해서 저는 별로 유용한 시각이 아니라고 말하고 싶습니다. 분명 코딩 컨벤션에는 어떤 효과보다는 거의 기호만이 반영되는 사항들도 있습니다. 이를테면 콜론 앞쪽에 공백문자를 넣느냐 마느냐 같은 것들이 그렇습니다. (물론 이 조차도 얼마간의 ‘효과’ 차이가 존재합니다. 제가 하고 싶은 말은 그 효과의 편차는 심리적 동조나 반발감의 편차에 비해서 매우 미미하다는 뜻입니다.) 하지만 코딩 컨벤션에서 적어도 줄바꿈의 문제만큼은, 이 글에서 지적된 것처럼 거의 항상 버전 관리 시스템의 diff의 효과성과 큰 관계가 있습니다. 효과의 차이가 있음에도 불구하고 어떤 것도 더 낫지 않고 단지 취향의 차이일 뿐이라고 단언하면 실제로 표준을 협의할 때 근거로서 기능할 수 있는 것들이 많이 사라져 버립니다. 다행히 신현석 님이 글 본문에서 양쪽 방식의 유의미한 장단점에 대해서는 모두 언급을 한 것 같습니다. 미처 언급되지 못한 미미한 장단점이 더 있을지 모르겠지만, 제가 보기에는 중요한 장단점은 모두 열거된 것 같습니다. 언어의 구문적 특성에 따라 ‘의미적인’ 차이를 표시해내는 diff가 대중화되기 전까지는 대부분의 평문에 대해서 ‘일반적으로’ 효과적인 줄별 diff가 쓰일 것이므로, 속성을 여러줄로 나눠 쓰는 것은 큰 의미가 있다고 봐야할 것입니다. 참고로 diff의 문제는 단지 사람의 인식 문제만 얽혀있는 것이 아니라, 버전 관리 시스템이 두 가지 변화를 합칠 때 얼마나 자동으로 해줄 수 있느냐와도 큰 관계가 있고, 제 생각에는 이쪽이 더 중요한 지점입니다. 머지가 자동으로 안되면 충돌로 체크되어서 사람이 일일히 diff를 3-way로 눈 빠지게 쳐다보며 고쳐야 하겠죠. 효과적인 diff를 만들어내기 위한 코딩 컨벤션의 근거에 대해서 제가 블로그에 쓴 글이 있는데 시간 되시면 읽어주세요. http://blog.dahlia.kr/post/18035893350 dohoons 님이 제시하신 셀렉터를 기준으로 하는 검색 역시 글 본문에서 해당 방식의 장점으로 언급됐으니 제가 볼 때는 그저 부연일 뿐인 것 같습니다. 더불어 “기계가 할 일을 사람이 하려고 들지 말라”는 부분에는 강하게 동감하고요. 한줄 쓰기가 셀렉터 검색에 유리하고, 여러줄 쓰기가 셀렉터 검색이 힘드나요? 요즘 에디터 중에 블럭을 접어주는 기능 포함한 것들이 많습니다. 그런거 쓰면 여러줄 쓰기 해도 눈으로 셀렉터 훑는데 여러줄 쓰기가 불편하다는 주장도 무색해질 거라고 생각합니다.
약간의 주석과 함께 의미있는 id,class명을 작성해준 다면 에디트에 내장되 있는 검색기능으로 쉽게 찾을 수 있죠. 허나 길게 한줄로 써놓은 속성값들을 눈을 좌우로 돌려가며 찾아내서 수정하기란 쉽지 않은거 같습니다. 어느 프로잭트를 하더라도 코드의 "가독성"이 재일 중요한거 같습니다. 우리는 기계가 아닌 사람이니깐요. 좋은 글 잘 보고 갑니다. ^^
공감하고 갑니다. 또 요즘은 셀렉터를 눈으로 스캔한다기보다는 디버깅 툴들이 알려주는 라인수로 찾아가는 경우가 더 많아요. 좀 좋은 도구를 사용한다면 파일 전체적으로 outline 을 보여주기도 합니다.
전에 일하던 곳에서는 한줄로 쓰기, 속성 순서 지키기, 마지막 ';' 빼기 등이 컨벤션으로 되어있어서 스트레스 왕창 받았던 기억이 있네요. 널리 배포되고있는 nhn 코딩컨벤션도 기계가 할일을 사람이 하도록 하는데 한몫하고 있다고 생각합니다. (물론 그 노력이나 타당성을 무시하는건 아니지만..) sass, stylus를 사용한 이후부터는 한줄에 속성 하나씩, 그리고 섹션별로 파일을 여러개로 나누어 관리하고 있습니다. 코드 압축과 최적화는 컴파일러가~
움..'ㅅ' 저는 병행해서 사용하고있어요. 바이트의 수라던지, 속성 n개 이상이라던지, 하는 틀을 만들어놓진 않았구요. 그냥 눈으로보기에 음..=ㅅ= 길군. 하면 줄넘김해서 사용합니다. 줄넘김할때는 비슷한 속성끼리 묶어서 줄넘김하고 있어요. .common_site_map{ height:100px;width:40px; margin-bottom:17px;padding-top:12px; font-size:11px;font-weight:bold; text-align:center;line-height:18px } 이런식으로요! 꼭 하나의 룰에 갖힐필요가 있을까? 싶어요 'ㅅ' 꼭 협업한다고해서 모든 코드를 줄넘김 표기할필요가 있을까용? 적절히 병행하는게 더 나은방법아닐까.. 생각하고 지나갑니당 글잘읽었습니다 (_ _)
저도 한줄로 작업하는걸 선호하다가 요즘은 수정에 어려움을 느껴서 여러줄로 작성하는데요.. 이게 처음에만 어색하고 힘들지 적응 되니까 이 방법이 더 편리하더라구요;;; 여러줄로 작성한 후 YUI Compressor같은 녀석으로 한번 돌리고 웹에 올리니 좋더라구요;;;
저는 줄을 나누는 걸 선호합니다. 속성도 가능하면 그룹으로 정렬을 하는 편입니다. position/float, padding/margin/width/height, 폰트 관련, 효과, 배경 등의 모두 확고한 순서를 두지는 않지만 역할이나 영향 정도로 기준을 두고 정리하는 편입니다. 한 줄로 작성할 때 diff 등 추적이 어렵고 눈으로 훑을 때 속성을 발견하기 어렵기 때문입니다. diff툴 중 변경된 라인 구분 뿐만 아니라 변경된 텍스트도 정확히 표시해주지만 항상 그런 환경이 아닐 수 있기 때문에 한 줄로 작성된 코드에서 변경된 1바이트 글자를 찾아내야 할 때는 곤혹이죠.
트랙백 주신 분과 댓글 달아주신 분중에 "적당히" 줄바꿈을 한다는 분도 있는데 본문에도 썼듯이 혼자 작업하실때는 붙여쓰던 나눠쓰던 상관 없습니다. 하지만 협업을 하고 코드를 서로 리뷰해주는 상황에서는 코드의 구문 스타일을 맞출 필요가 있습니다. 이런 코드 스타일은 비단 CSS 뿐만 아니라 대부분의 언어에 적용되고 특히나 협업을 하는 환경에서는 필수적입니다. 코드 스타일이 맞지 않으면 커밋이 반려될 수도 있습니다. "적당히" 또는 "3줄정도", "길면"이라는 기준은 코드 스타일로 규정하기에는 모호한 기준입니다. 합의점을 찾기 힘든 기준이죠.
처음 배울때 부터 한줄쓰기,마지막 ";" 생략, 속성순서지키기를 해서 불편함이 느껴지지 않습니다. 자기 편한데로 써도 무방하지 않을까요?? ㅎㅎㅎ
@us 저도 예전에 us님처럼 배워서 잠시 한줄쓰기에 익숙해져 있다가 얼마전에 CSS코딩습관을 여러줄 나눠쓰기로 바꿔보니 여러줄 쓰기가 가독성에 얼마나 좋은지 몸으로 느끼게 되더라구요. 특히 CSS3속성을 많이 쓰게된다면 한줄 쓰기론 답이 안나온다는...
짬밥 만 4년도 안되었는데 점점 생각이 바뀌더군요;; 협업만 아니라면 한줄 나열보다는 줄당 1개의 속성이 보기 편하며 위에 어떤분처럼 줄당 비슷한 속성(크기, 폰트, 위치등등)끼리 묶어서 나열하는것도 좋을듯 싶습니다.