CSS를 작성할 때마다 보통 CSS properties를 정의하는 순서는 개인마다 자기만의 어떤 정해진 규칙이 있을 것인데, 여기서 중요한 것은 그 어떤 규칙의 세세한 내용보다도 이런 규칙을 일관성 있게 따른다면 차후 관리와 유지보수 측면에서 더 효율적일 것이고, 또한 팀원의 일원으로서 작업할 때는 이런 일관된 규칙을 정하고 따르게 하는 것이 더 중요해지기 마련이다.

여기에 도움을 줄 수 있는 도구로 여러 개발자로부터 권장된 기준과 이 기준에 맞는 순서를 자동으로 정리해주는 CSScomb이 있다. CSScomb Online 도구도 있지만, 여러 text editors 안에서 사용할 수 있는 plugin 형태로도 제공하고 있다.

현재 최신 버전은 2.11인데, 위에서 제공하는 text editors 용 plugin이 최신 버전이 아닐 땐 직접 소스를 내려받아 컴파일해서 설치할 수도 있다.
CSScomb – CSS properties의 순서를 단정하게 정리해주는 도구(이)란 제목의 글 마저 읽기 →

오로지 CSS만으로 어떤 사물을 그럴듯하게 표현해 놓은 것을 보면 항상 신기해하는데 이번에 목격한 것(WWDC 2011 Session Video 중)은 오직 CSS의 Linear Gradient property를 써서 리본(ribbon)을 그려낸 것으로 다음과 같이 쓰였다.

.ribbon {
  background-image: 
    -webkit-linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    -webkit-linear-gradient(135deg, transparent 25%, red 25%); /* Chrome 10+, Saf5.1+ */
  background-image: 
    -moz-linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    -moz-linear-gradient(135deg, transparent 25%, red 25%); /* FF3.6 */
  background-image: 
    -ms-linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    -ms-linear-gradient(135deg, transparent 25%, red 25%); /* IE10 */
  background-image: 
    -o-linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    -o-linear-gradient(135deg, transparent 25%, red 25%); /* Opera 11.10+ */
  background-image: 
    linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    linear-gradient(135deg, transparent 25%, red 25%);
}

앞으론 CSS property만으로 어떤 형태를 표현하고 있는지 짐작이나 할 수 있을까?(이)란 제목의 글 마저 읽기 →