SMACSS나 OOCSS, BEM, 더 나아가서 부트스트랩과 같은 다양한 CSS 방법론이 있지만 대부분 CSS에 제약을 가하는 형식이어서 별로 선호하지 않는다. 그중 극단을 보여주는 것이 이 유틸리티 CSS다. 관심사의 분리(separation of concerns)는 달성될 수 없고 역으로 HTML에 독립적인 CSS를 이용해서 CSS의 재사용성을 높인다는 주장이다.

<button class="f6 br3 ph3 pv2 white bg-purple hover-bg-light-purple">
	Button Text
</button>

어디서 많이 본 듯한 접근 방법이다. 잊혀질만하면 계속해서 나오는 바로 mt10 이슈다. 그래도 mt10이 가지고 있는 문제점들을 극복하기 위해 여러 고민이 들어가 있다. 픽셀대신 퍼센트를 사용한다든가 미디어 쿼리도 활용할 수 있게 다듬어져 있다. 실제로 유틸리티 CSS 프레임워크 중 하나인 타키온(Tachyons) 프로젝트의 반응을 보면 호평이 많다. Basscss나 Tailwind CSS같은 비슷한 CSS 프레임워크 프로젝트들도 있다.

타키온의 방법이 인라인 스타일과 차이가 있느냐는 질문에 댓글들을 살펴보면 나름의 이유가 있다. "기존 방식은 추상적이어서 수정하기 힘들고 수정했을 때 발생될 결과를 예측하기 힘들다.", "유틸리티 CSS는 수정했을 때 결과 예측이 쉽고 CSS를 보지 않고서도 HTML에서 스타일을 적용할 수 있다.", "유연하고 기억하기 쉽다.", "빠르게 만들수 있고 지금까지 특별한 문제가 없었다", "복잡한 우선순위 문제에서 해방될 수 있다." 등 이 접근 방법이 기존 방법에 비해 좋은 경험이었다는 평들을 볼 수 있다. 타키온은 npm 등 다양한 사이트에 적용이 되어 있기도 하다.

지금까지의 CSS 방법론들은 CSS의 자유도를 감소시켜서 어떻게든 관리가 가능하게끔 만드려는 방향으로 발전해왔다. 될 수 있으면 CSS를 건드리지 않고 여기저기 가져다 사용하도록 만들고자 하는 경우가 많다. 디자인이나 표현에 대한 고민은 부족하다. 유틸리티 CSS도 이러한 필요를 극대화 해서 나왔고 사용되고 있지만 디자인을 그냥 모듈의 조합으로만 바라보는 시각은 아쉽다. 내가 만났던 디자이너 중에 디자인을 이런식으로 접근하는 사람은 없었다. 이러한 접근 방법으로 만들어진 디자인이 품질이 좋을리도 없다.

CSS는 디자인의 의도를 반영해야 한다. 그래야 제작과 유지 운영이 용이해진다. 아무리 좋은 CSS 방법론도 표현하고자 하는 의도를 살리지 못하면 사용할 수 없다. 그래서 나의 주장은 자꾸 CSS의 문법을 제약하거나 서브셋을 만들지 말라는 것이다.

<div class='ipsGrid ipsGrid_collapsePhone ipsPager ipsClearfix ipsSpacer_top ipsContained'>

나도 최근에 이런 툴을 커스터마이징 해봤다. 아무 의미가 포함되지 않은 장황한 HTML을 정리하는 일이 아주 힘들었다. 유틸리티 CSS를 유용하게 생각하는 사람들도 많이 있겠지만 그 한계는 분명히 인식해야 한다. 만들기는 쉬울지 모르지만 시간이 지난 후에 애초에 의도가 포함되어 있지 않은 코드를 이해하기는 아주 힘들다.