Code Metaphor

아는 사람이 CSS 프레임워크에 대해 어떻게 생각하냐고 물었다. 그래서 난 CSS 프레임워크를 좋아하지 않는다고 대답했다. CSS 프레임워크는 나쁘다. 정확히 말해, 현존하는 CSS 프레임워크들의 구현 방식은 마크업을 더럽힌다.

CSS가 왜 생겼는지 생각해보면 CSS 프레임워크의 구현 방식이 왜 문제가 되는지 쉽게 알 수 있다. 문서의 내용과 그 표현 방식을 구분하기 위한 것이 CSS이다. 그 외에 다른 많은 효율성을 제공해주지만, 그것들은 부수 효과일 뿐이다. 마크업에는 모양에 대한 것이 들어가서는 안된다.¹ 모든 모양에 관련된 것들은 CSS로 선언한다. 외부 CSS에서 마크업된 문서에 수직적으로 간섭하기 위해 고안된 것이 바로 셀렉터(selector)이다.

그런데 CSS의 본래 의도와 상관 없이, 함께 제공되는 편의를 위해 다음과 같은 마크업을 하는 사람도 있다.

<div class="left">
    <p class="red small">Some important note goes here…

저 마크업은 CSS를 과소평과하는 행위다. 결국 아래처럼 해도 똑같다.

<div align="left">
    <p><font color="red"><small>Some important note goes here…</small></font>

레이아웃 상에서 해당 부분이 현재는 왼쪽에 있지만, 오른쪽으로 바꿔야 할 경우 마크업에서 div.left를 div.right로 바꾸던가,

.left { text-align: right; }

와 같이 이름과 반대되는 선언으로 CSS를 수정해야 한다. 이 모든 것이 모양을 언급했기 때문에 일어나는 일들이다. 애초에 <font color="red">를 class="red"로 바꾼다거나 align="left"를 class="left"로 바꾼다는 것은 딱 봐도 눈가리고 아웅하는 식의 마크업이 아닌가. CSS를 쓰겠다는 건지 말겠다는 건지 모르겠다.

쓰기 싫으면 차라리 쓰지 마라.

올바른 마크업은 아래와 같이 되어야 한다.

<div class="note">
    <p><strong>Some important note goes here…</strong>

하지만 CSS 프레임워크들을 사용하게 되면 결국 마크업에 모양이 잔뜩 섞이게 된다. 가장 유명한 CSS 프레임워크인 Blueprint를 보자. 예제 페이지를 보면 다음과 같은 마크업이 보이는데…

<div class="container">  
    <h1>A simple sample page</h1> 
    <hr> 
    <h2 class="alt">This sample page demonstrates a tiny fraction of what you get with Blueprint.</h2> 
    <hr> 

    <div class="span-7 colborder"> 
      <h6>Here's a box</h6> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p> 
    </div> 

    <div class="span-8 colborder"> 
      <h6>And another box</h6> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris nisi ut aliquip.</p> 
    </div> 

    <div class="span-7 last"> 
      <h6>This box is aligned with the sidebar</h6> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p> 
    </div> 
    <hr> 
    <hr class="space">

…뭐지? 내 눈에는 span-8이 <font size="어쩌고">로 보인다. 저 마크업은 디자인이 바뀌면 HTML을 처음부터 다시 새로 작성하겠다는 뜻인가.

하지만 그럼에도 CSS 프레임워크의 편리함은 무시하기 힘든 유혹이다(그러니까 쓰겠지). 사실 CSS를 어느 정도 해본 사람은 알겠지만 Internet Explorer 맞추느라 한바탕 고생을 하고 나면 이미 CSS는 * html이니 *+html이니 하는 요상한 해킹들과 편법들로 이미 너덜너덜해진 뒤다. 그렇게라도 되면 다행이고, 과정 자체가 일단 무척 짜증나고 힘들다.

나는 기본적으로 CSS 프레임워크의 필요성 자체에는 동의한다. 하지만 지금과 같은 방식으로는 안된다. 내가 생각하는 CSS 프레임워크의 올바른 구현 방법은, 예전에 한 번 소개한 적 있는 Sass 같은 도구와 함께 쓰는 방식이다.² Sass에는 mixin 기능이 존재하고, C++의 템플릿과 같이 컴파일 타임에만 영향을 줄 뿐, 실제 생성된 목적 CSS 자체에는 사용된 mixin이 모두 인라이닝된다. 만약 이걸 이용해 CSS 프레임워크를 만든다면 지금처럼 ‘클래스의 집합’이 아니라 ‘mixin의 집합’이 될 것이다. 그럼 사용자는 CSS 프레임워크를 HTML에서 사용하는 대신 CSS 자체에서 호출할 수 있게 된다.

아래와 같이 CSS 프레임워크를 사용하고, (Sass 문법이다. +abc는 abc라는 이름의 mixin을 상속받는다는 뜻.)

.note
  +span-7
  +colborder

실제 코드에서는 <div class="span-7 colborder">라고 쓰는 대신

<div class="note">

위와 같이 사용하면 된다. 이렇게 되면 마크업의 note 자체는 간접층일 뿐이고, 모양을 바꿀 때는 마크업에 손댈 필요 없이 중간 Sass 코드를 수정하면 된다.

CSS 프레임워크라는 게 처음 나왔을 적부터 황당해하며, 그 뒤로도 계속 이런 생각을 해왔는데, 막상 이런 물건이 없는 것이 다른 사람들은 나처럼 마크업에 결벽증이 별로 없나 싶기도 한다. 꼭 Sass에 의존할 필요 없이, 간단히

.note {
  /* blueprint: span-7, colborder */
}

와 같이 쓰면 해당 주석을 치환하는 전처리기(preprocessor)와 함께 배포해도 될 것 같다. (그렇게 해주면 왠지 정말 프레임워크라는 말에 어울릴 것 같기도 하다.) 누가 이런거 만들어주면 난 정말 애용할텐데.