당신의 코드를 깔끔하게 하는 12가지 원칙

Smashing magazine의 12 principles for keeping your code clean 글의 간추린 번역입니다.

가장 기본적이지만, 한해를 마무리 하는 이 시점에서 다시 한번 되짚고 가면 좋을 것 같아 짧게 간추려서 소개, 되짚어봅시다.


1. Strict Doctype

자 이제 테이블도 쓰지말고, doctype은 이제 transitional은 벗어버리고 strict를 씁시다.



2. & 쓰지말고 &

& 대신에 & 라고 표기해야한다는 사실 모두들 알고계시죠?

웹퍼블리셔분들이 실수한다기 보다는 요즘에는 개발자들이 알아둬야할 상식인것 같습니다.

get 방식으로 변수와 값을 넘겨줄때 <a href="?foo=3&bar=5"> 와 같이 표기하시지 마시고 &은 &amp; 라고 표기해주세요.



3. 적당한 들여쓰기

들여쓰기만 잘해도 눈이 시원해지죠.


4. css와 javascript는 외부로

페이지 내에 javascript 코드나 css를 넣는것보다 외부로 link 하시는 것이 관리도 편하고, 유지보수할때도 정신건강에 유리할 때가 많습니다.


5. 적절한 태그 중첩

블록엘리먼트를 먼저 바깥에 쓰고 그 안에 인라인엘리먼트를 쓰세요~!



6. 불필요한 div 제거

불필요한 div를 제거합시다.

그런데 실무를 하다보면 워낙 디자인 변경이슈가 잦을때는 div가 하나라도 더 있는 편이 잦은 디자인 변경 대응에 좀 안정적이라 저는 어쩔수 없는 부분도 있네요.



7. 네이밍을 더 좋게

클래스명 red, italic, mt10, pt10 이런거 좋지 않아요.




8. 타이포는 CSS에게로

uppercase가 필요없는 한글서비스는 패스




9. class와 id를 body에 입히자.

body에 id와 class를 사용을 꺼리시는 분들이 간혹 있습니다.

혹은 개발자 분들께서 body 엘리먼트에 id나 class를 사용할수 없게끔

body 엘리먼트를 포함하여 include하려는 모듈화작업을 하시는 경우도 더러 있더군요.

body에 id와 class를 적용하면, 메뉴마다 조금씩 다른 레이아웃을 보여주는 경우나 기타 여러 사례에 조금더 효과적으로 대응할수있게 됩니다.


10. 유효성

설마 요즘도 alt 속성 안쓰고 태그 안닫는분 안계시죠?



11. 논리적 순서

푸터 및에 사이드바는 뭔가 왠지 이상하지 않나요?


12. 실행하십시오.

알고만 계시지 말고, 실행하자고요~ ㅎㅎ