styled-components vs. SCSS vs. Tailwind CSS

CSS 처리기에서 가장 인기있는 것은 CSS-in-JS 중 단연 styled-components 그리고 전처리기인 SCSS였다.

점유율을 보면 SCSS가 가장 높다.

그러나 최근에 Tailwind CSS의 인기가 급부상하고 있다.

 

Styled-components

다음은 React에서 사용할 때의 jsx 파일이다. (Vue에서도 vue용 styled-components가 있다.)

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  &:hover {
    background-color: darkblue;
  }
`;

function MyComponent() {
  return <StyledButton>Click me</StyledButton>;
}

 

위에 보이듯이 Javascript로 짤 수 있다. 

장점: ES6에서 등장한 template literals (back-tick)을 통해 스타일을 지정하고, javascript로 동적인 스타일링을 할 수 있다. 재사용이 용이하다.

단점: 번들사이즈 오버헤드. 여전히 SCSS처럼 이름 짓기가 어렵다.

최대 단점은 최근 점유율이 가장 높은 Next.js 프레임워크에서 RSC (React Server Component)를 사용하는데, 이 RSC는 서버에서 모든 것을 렌더링하여 client에 보내주는 javascript를 최소화한다. CSS-in-JS는 javascript로 CSS를 짜기 때문에, JS 번들사이즈 증가 뿐 아니라, javascript로 동적으로 스타일을 만들어 DOM에 넣는 방식은 RSC에서 지원하지 않는다. 물론 shadcd/ui도 Javascript로 짠 UI library이지만 SSR과 compatible하게 설계되었고, Styled-component는 SPA시절에 개발된 것인만큼 CSS style을 DOM에 동적으로 inject하거나, 브라우저에 특정된 API (예: document, window)를 사용하면 이는 Node.js 환경에서 동작하지 않는다. Context provider를 사용하는 테마에서도 문제가 종종 발생한다.

 

SCSS

// import 후
<button class="my-button">Click me</button>

// styles.scss
.my-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  
  &:hover {
    background-color: darkblue;
  }
}

 

 

SCSS는 장점이 굉장히 많으나

가장 큰 단점은

위 코드처럼 'my-button'이라는 class명을 잘 지어야하는 

클래스명 명명 지옥에 빠져든다.

특히 코드가 길어지면 .scss 파일은 수백줄이 넘어가는건 예사일이며

고유의 class 이름 짓는 것은 감당이 안 되는 경우가 있다.

게다가 소규모 코드에서는 가독성을 위해 만들어진 기능인 nesting 기능을 또 길게 쓰다보면 부모 클래스와 어떤 코드가 중복되었는지 알기가 어려운 경우도 있다. ( important 남발의 원인 중 하나 )

 

Tailwind CSS

<button class="bg-blue-500 text-white py-2 px-4 border-none rounded cursor-pointer hover:bg-blue-700">
  Click me
</button>

 

장점은 스타일링이 HTML 파일을 벗어나지 않는다. (PostCSS config에서 utility class 재정의하거나 global.css에서 재사용 가능한 class 지을 때 제외)

첫인상은 CSS에서 bad practice라고 불리는 in-line coding인가라는 의문이 든다.

=> 자세히 보면 미리 만들어 놓은 CSS class를 markup형태로 가져다 쓰는 것이다. 이를 utility class라고 부르는데 전부 rem을 사용하는 것이다.

저게 무슨 외계어인가, 또 공부를 해야하는가?

라고 생각할 수 있지만, 자주 쓰이는 약20개 정도만 외우면 자유자재로 스타일링이 가능하다. 특히 기존 CSS를 알고 있으면 러닝 커브는 더 빨라진다.

 

가장 큰 장점: 다음 글에서 더 자세히 보겠지만, "my-button"처럼 class 이름을 따로 지어줄 필요가 없다.

  미리 정의된 utility class로 디자인의 일관성을 가져갈 수 있다. 이 작은 composable한 utility class로 중복되는 CSS 코드를 줄일 수 있다.

  무엇보다 Tailwind CSS는  자체적인 purge 기능으로, 빌드 시 프로젝트 내 모든 코드를 스캔하여 사용되지 않는 CSS 코드를 최종 번들에서 자동으로 삭제해준다. 이것으로 최종 번들 사이즈를 최소화 시켜준다.

  개발이 빠르다. (미디어 쿼리, hover, active, focus를 축약 syntax로 금방 코딩)

단점: HTML 파일의 줄 하나가 길어질 수 있다.

  utility class 이름을 암기하기 위해 처음에는 공식문서에서 조금 찾아봐야한다.