CSS를 작성하다보면 스타일 정의 갯수가 증가함에 따라 주의를 한다고 해도 분명 얘기치 않게 중복된 스타일 선언을 하기 마련이다. 물론 나중에 최적화 과정에서 CSS 파일을 minimize 하게 되면 파일 크기에 큰 영향을 끼치진 않겠지만, 나중에 관리적인 측면에서 불필요하게 덤으로 정의된 스타일은 상당히 귀찮아질 수가 있다.
csscss는 이렇게 CSS 파일을 해석해서 덤으로 중복되게 정의된 스타일 선언을 꼭 집어서 보여주는 도구인데, Ruby gem으로 배포되고 있으며 설치는 다음과 같다.
$ gem install csscss
주의할 점은, Ruby 1.9.x 이상에서만 온전하게 작동하는데 OS X 시스템에 깔린 기본 Ruby 버전은 1.8.x이기 때문에 만약 Ruby 1.9.x 버전이 설치가 안 되어 있다면 Ruby 1.9.x 버전의 소스를 직접 내려받아서 사용 complier에 따라 다음과 같이 설치해 줄 수 있다.
– Clang compiler 사용
$./configure --prefix=/usr/local --with-readline-dir=/usr/local --enable-shared --enable-install-doc --enable-pthread --with-gcc=clang --without-tk --without-tcl FLAGS=-D_XOPEN_SOURCE=1 && make && sudo make install && sudo make install-doc
– GCC compiler 사용
$./configure --prefix=/usr/local --with-readline-dir=/usr/local --enable-shared --enable-install-doc --enable-pthread --with-gcc=/usr/bin/gcc --without-tk --without-tcl FLAGS=-D_XOPEN_SOURCE=1 && make && sudo make install && sudo make install-doc
설치 후 사용법은 아주 간단해서, 터미널에서 다음과 같이 입력하면 중복된 스타일을 표시해준다.
$ csscss path/to/styles.css path/to/other-styles.css
다음과 같이 v flag를 주면, 터미널 창에서 바로 중복된 스타일을 더 자세하게 보여주면서 쉽게 확인할 수도 있다.
$ csscss -v path/to/styles.css{body} AND {html} share 3 rules- border: 0- margin: 0- padding: 0
로컬 파일 대신에 URL 주소를 던져 주면 해당 원격 파일도 해석해서 결과를 보여주고, Sass 혹은 LESS로 작성된 파일의 해석도 가능하다. 또한, Grunt task 중 하나로 grunt-csscss를 설치해서 등록해두면, 스타일의 중복 확인 작업을 자동화할 수도 있단다.
그런데 여기서 한 가지 고려해야 할 사항은, 중복된 스타일이라고 해서 무조건 하나로 합칠 수만은 없고, 서로 간의 관련성을 잘 살펴서 디자인의 특성과 구조에 따라 한 데 뭉칠지를 상황에 맞게 결정해야 한다. 이와 관련해서 참고할 만한 고마운 개발자의 의견 – Why csscss doesn’t remove duplication for you
한번 맛들이면, CSS 정리할 때 꼭 찾게 돼 는 필수 도구가 csscss이다. 이름 참 잘 지었네.