CSS를 작성할 때마다 보통 CSS properties를 정의하는 순서는 개인마다 자기만의 어떤 정해진 규칙이 있을 것인데, 여기서 중요한 것은 그 어떤 규칙의 세세한 내용보다도 이런 규칙을 일관성 있게 따른다면 차후 관리와 유지보수 측면에서 더 효율적일 것이고, 또한 팀원의 일원으로서 작업할 때는 이런 일관된 규칙을 정하고 따르게 하는 것이 더 중요해지기 마련이다.
여기에 도움을 줄 수 있는 도구로 여러 개발자로부터 권장된 기준과 이 기준에 맞는 순서를 자동으로 정리해주는 CSScomb이 있다. CSScomb Online 도구도 있지만, 여러 text editors 안에서 사용할 수 있는 plugin 형태로도 제공하고 있다.
현재 최신 버전은 2.11인데, 위에서 제공하는 text editors 용 plugin이 최신 버전이 아닐 땐 직접 소스를 내려받아 컴파일해서 설치할 수도 있다.
컴파일 과정은 먼저 CSScomb 2.11 버전의 zip 소스 파일을 내려받아 압축을 푼 후, 터미널에서 cd 명령으로 압축을 푼 해당 디렉터리로 이동하고, 여기서 다시 make 명령을 내리면 build 디렉터리 안에 각 text editors의 plugin을 생성하게 된다.
한편 이렇게 해서 생성된 plugins 중 TextMate bundle은 그대로 설치해서 사용하면 오류 메시지를 보여주면서 제대로 작동을 안 하는 문제가 있다. 문제의 원인은 Makefile에 정의된 TextMate 관련 path 오류로 Makefile을 텍스트 에디터에서 열고, 다음과 같이 copyCore: 부분 42번째와 46번째 줄에 있는 $(PATH_TO_TEXTMATE_PLUGIN)/Support/src를 $(PATH_TO_TEXTMATE_PLUGIN)/Support/lib로 바로 잡고 다시 make 명령을 내리면 올바른 bundle이 생성되서 제대로 사용할 수 있게 된다.
@echo 'Copying CLI...'@mkdir -p www/src@echo 'Copying core to web app...'@cp $(PATH_TO_CORE) www/$(PATH_TO_CORE)@echo 'Copying core to plugins...'@mkdir -p $(PATH_TO_CODA_PLUGIN_CORE)/Support\ Files@mkdir -p $(PATH_TO_CODA_2_PLUGIN_CORE)/Support\ Files@mkdir -p $(PATH_TO_TEXTMATE_PLUGIN)/Support/lib@mkdir -p $(PATH_TO_ESPRESSO_PLUGIN)/ScriptLibraries@cp $(PATH_TO_CORE) $(PATH_TO_CODA_PLUGIN_CORE)/Support\ Files/csscomb.php@cp $(PATH_TO_CORE) $(PATH_TO_CODA_2_PLUGIN_CORE)/Support\ Files/csscomb.php@cp $(PATH_TO_CORE) $(PATH_TO_TEXTMATE_PLUGIN)/Support/lib/csscomb.php@cp $(PATH_TO_CORE) $(PATH_TO_SUBLIME_PLUGIN)/csscomb/libs/csscomb.php@cp $(PATH_TO_CORE) $(PATH_TO_ESPRESSO_PLUGIN)/ScriptLibraries/csscomb.php
참고로, 이와 관련된 issue 등록을 마쳤기 때문에 아마도 다음 버전에선 고쳐질 듯.
코드를 작성할 때 항상 일관성을 유지하려는 노력은 협업 시 더 빛을 내기 마련인데, 여기에 CSScomb도 잘 쓰면 이를 실행하고 따르는데 아주 편리한 도구가 될 수 있을 듯하다.
올바른 CSS Properties의 작성 순서에 관한 참고 글
- Writing CSS For Others | Smashing Coding
- CSS property order · Deep Thoughts by Mark Otto
- CSS Property Ordering: Group Similar? Or Alphabetical? | Impressive Webs