CSS 속성 코딩 스타일

CSS 속성 코딩 스타일에 대해서 모 카페에서 논쟁이 붙었는데...

이분화법적인 선입견을 가지신분이 계신듯합니다.

그리고 오늘 또 해당 카페글을 좀 보다가 여러 사람에게 영향력을 행사하시는 신현석(개인적인 판단)님의 글 내용을 읽게 되었습니다.

여러 가능성있으나 이분화법 접근으로 선입견을 만드려버리는게 아닌가해서 개인적인 반박글(?)을 작성합니다.

※ 경고 : 본 내용은 개인적인 생각이며 불변의 법칙이 아님을 미리 밝힙니다.

원문 : CSS 속성 한줄로 쓰기와 여러줄로 나눠 쓰기

일단 원문에서는 2가지 방법만 언급되있지만 저같은경우에는 3가지로 접근합니다.

※ 소스는 원문글 차용

1. 속성별로 개행

- 장점으로는 가독성 높음, 여러 속성을 가질경우 접근성의 용의성

단점으로는 시폭(한페이지에서 볼수있는 룰 수)이 줄어듬 하지만 속성이 한개 있는것 까지 해야되는지는 의문입니다.

#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;
}

2. 무작정 한줄쓰기

- 모든 스타일을 무작정(?) 한줄쓰기라면 무모하다고 생각합니다.

하지만, 대부분 전후 사정 언급이 없으므로 http://www.csscompressor.com/ 와 같은 전후 처리를 하는지 알수 없음

#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}

3. 위 두사례의 융합형(본인은 특별한 경우가 아니면 이방법을 많이 사용합니다)

- 시폭의 확대

#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}

본인도 무작정 한줄쓰기는 별로 추천하지 않는다.

하지만, 전후 처리의 가능성을 생각한다면, 속성별 개행이 올바른 방법인것처럼 편향된 선입견을 가질 필요는 없다고 생각되어진다.

신현석님도 말미에 말했듯이 필요하면 도구를 사용하면 될것이다.

그리고 diff, compare, merge 등 다양한 용어가 있게지만 그냥 본인은 코드비교라고 하겠다.

맥기반은 거의 사용을 안해봐서 모르겠지만, 본인이 사용하는 Notepad++는 compare 플러그인으로 개행이나 중간중간 추가된 코드가 있어도 행단위로 같거나 비슷한 코드를 보여주므로 코드 비교때문에 속성별 개행이 '유리하다'에도 동의하지 못하겠다.

그리고 코드비교는 WinMerge도 있고, 글자하나까지 원한다면, TortoiseMerge(TortoiseSVN에 포함된 번들)를 사용하는 방법도 있겠다.

무작정 한줄쓰기가 아니라면 해당팀이나 개인의 룰을 세워서 접근하면 될것이다.

그러니 이게 '올바른 방법이야!'라고 선입견을 만들 필요는 없을듯하다.