모든 디자이너가 해야할 9가지 CSS 원칙

모든 디자이너가 해야할 9가지 CSS 원칙 이라는 나름 재미있는 포스팅이 올라와 번역하여 소개한다.


이미 웹개발 UI가이드는 국내에도 많이 소개되어있고

웹표준 강의시에도 항상 나오는 이야기이다.


또한 네이버UI가이드(http://html.nhndesign.com/)가 공개됨으로써

많은 분들이 이곳을 참고하고 있기도하다.


네이버 UI가이드 역시 100% 완벽하지 않다.

갑론을박해야할 요소도 있긴 하지만

이정도 분량의 꼼꼼한 가이드을 공개한것 역시 네이버가 한일중에서는 정말 칭찬할 만한 일이라고

생각한다.



1. 하위선택자 사용에 따른 들여쓰기

필자의 견해 :
하위선택자를 사용했을때 이에 맞춰 들여쓰기를 하면 훨씬 코드 보기가 수월해진다.
이미 대다수의 홈페이지에서 이렇게 사용하고 있는 것같다.

사용자 삽입 이미지


2. 그룹화와 CSS의 주석

필자의 견해 :
의미있는 CSS끼리 그룹화 시키고 보기 쉽게 주석처리
물론 모든 네이밍작업이 그렇지만 CSS 네이밍도 사람들마다 조금씩 다르다
어떤이는 영어를 그냥 발음나는대로 영어로 옮기는 사람이 있는 반면에
영단어를찾아서 쓰는 사람이 있고
아니면 영어동사까지 포함해서 쓰는 사람도 있고
영문네이밍은 정말 사람마다 다양하다 이때 주석으로 이 부분이 어디에 해당하는 부분임을 명시하면
좀더 보기 수월한 코드가 된다.

사용자 삽입 이미지

3. 스타일 선언은 한줄에

필자의 견해 :
물론 CSS 코드가 길어지면
한줄에 하나의 속성만 지정하는 방식은 괜한 공백을 많이 잡아먹어서
용량이 커지기 때문에 불필요하지만
확실히 한줄에 하나의 속성만 적어놓는것이 가독성이 좋을때가 많다
때에 따라 둘을 적절히 사용하는 센스가 필요하겠다.
사용자 삽입 이미지

4. css 파일의 분리

필자의 견해 :
이곳의 예제에서는 layout.css, typography.css 등으로 css 파일을 분류하였는데
물론 이런식으로 분류도 있겠지만
나는 메뉴섹션별로(우리나라의 웹사이트는 대게 섹션별로 공통되는 디자인이 많다)
CSS파일을 구분하여 사용한다

사용자 삽입 이미지

5. 엘리먼트 초기화

필자의 견해 :
브라우저마다 엘리먼트의 default style일 틀리므로 반드시 초기화 할것.
사용자 삽입 이미지

6. 사용되는 색상코드를 한곳에 모아 적어 둔다

필자의 견해 :
확실히 도움되는 정보다
해당 웹사이트에서 주로 사용되는 폰트명과 폰트사이즈 컬러셋을 모아놓고 이를 미리 정의해두면
색상 가이드라인이 확실해질수 있겠다

실제로 프로젝트 경험에 의해 특정 콘텐츠마다 각각의 색상과 폰트와 line-height, 마진을 가진 경우를 보았다.
예를 들면 A에 관한 콘텐츠는 어떤 폰트와 어떤 색상을 사용하며 하단에 마진값 얼마를 반드시 가져야 한다. 이런종류.
이럴때 해당 프로젝트에 처음 투입되는 사람은 그러한 규칙이 이미 있는지 인수인계를 못받았을 확률도 많다.
이때 이러한 규칙에 대해서 짤막하게(길게 주석으로 남긴다는 것은 절대 하지 말아야할것. 길게 주석을 적어 넣을바에야 차라리 ppt또는 문서 파일로 UI 가이드라인을 만드는게 낫다.) 적어 놓으면 갑작스럽게 관계자가 아닌사람이 UI를 수정한다거나 할때 좋은점도 있는 것 같다.



사용자 삽입 이미지


7. 의미있는 네이밍

필자의 견해 :
가장 중요하다
네이밍기법에 항상 언급되는 내용이지만
green 이라던지 left, right 등의 네이밍보다는
header, menu, nav, footer등의 의미있는 네이밍이 좋다.

사용자 삽입 이미지


8. 알파벳순서의 프로퍼티정의

필자의 견해 :
사실 나는 이부분은 찬성하지 않는다
자주쓰이는 속성 순서대로, 레이아웃에 영향을 많이 주는 순서대로 나열하는 것이
경험상 코드가독성에 아주 좋다.
알파벳순으로 나열하게 되면 정작 중요한 width같은 속성은 거의 맨뒤에 위치하게 되는데
이것보다는 중요한 순서대로 프로퍼티를 나열하는게 경험상 좋은것 같다.
필자는 display,position,float,width,height,padding,margin,border,background 순으로 사용한다
물론 이부분 역시 네이버UI가이드에서 사용빈도에 따른 프로퍼티 나열이 언급되어있다.

사용자 삽입 이미지


9. 유용한 css 클래스 유지

필자의 견해 :
유용한 css 클래스를 미리 정의하는 것은 아주 좋은 행위지만
이곳 예제에서는 width100이라던지 alignRight라던지
7번에서 언급한 의미있는 네이밍이 되어 있지 않다

필자는 clear라는 css클래스를 global css에 선언하는데
IE에서 clear:both시에 상단에 마진이 생기는 현상을 제거하기 위해

.clear {clear:both;height:0;line-height:0;font-size:0;}

이렇게 사용하고 있다.

현석님의 트랙백을 보고나니 내가 이 9번 문항에 대해서 잘못 코멘트한것 같다.
원본에서의 유용한 CSS의 클래스의 의미가 단순히 표현을 위한 width100, width75 이런 클래스가 유용한 클래스라고 말한것이라면 정말 절대 삼가해야할 것이다. 현석님 말대로 .mt10 {margin-top:10px;} 이런 클래스는 정말 삼가해야할 일이다. 이걸 클래스로 지정해서 사용하느니 인라인 스타일시트로 적용하는게 훨씬 나은 방법이다.
저는 유용한 클래스의 의미를 좀더 넓은 범위의 유용한 클래스(의미있는 네이밍이 되어있는 특정 콘텐츠 형식에 대한 클래스화)라고 잘못 해석하고 이해한것 같아서 추가 코멘트 남깁니다.


사용자 삽입 이미지



모두 아주 좋은 내용이다.

계속해서 HTML과 CSS를 사용하여 표현과 문서를 분리하는 곳이 많아졌다.

이런 중요한 개발방법론은 계속해서 공유되어져

새로 웹퍼블리셔가 되고싶은 사람들에게 많은 도움이 되었으면 좋겠다.
Tag : , ,

Comment List

  • hitchweb 2007.11.27 10:23 address / modify or delete / reply

    대부분의 항목이 css에만 적용되는 내용이 아니라 이외의 프로그래밍 코딩에도 적용되어야 할 내용 아닌가 싶네요... ^^
    의미있는 네이밍, 가독성을 위한 텝처리, 초기화, 그룹화... 등등이... ^^

  • 나르는돌 2010.01.05 12:10 신고 address / modify or delete / reply

    퍼가요~~~ 저도 8번은 동의 하지 않아요 문맥의 흐름에 맞게 구성하는것도 괜찮은것 같아요~ 흠흠;;; 걍 허접한소리엿어요 9번도 class가 더 좋다, id 값이 더 좋다 머 그런 소리때문에 잘몰겟지만서도요 ㅠㅠ