Frontend/기본지식

적절한 CSS 툴 사용 설명서

ChaeChae's Blog 2021. 7. 26. 22:18

이번에 다룰 내용

  • CSS 정의, 단점
  • SCSS 정의, 특징, 단점
  • CSS Modules 정의, 특징, 단점
  • CSS in JS 정의, 특징, 단점
  • 결론

CSS(Cascading Style Sheets)

정의

HTML을 꾸며주기 위해 사용하는 스타일 시트 언어이다.

단점

 

CSS의 속성은 어디에서나 CSS를 선언이 가능하다.
아래 예제처럼 style태그를 이용하거나 inline 태그를 이용하는 등 css를 선언하는 방법은 다양하다.
<!DOCTYPE html>
<html>
  <head>
    <title>CSS TEST</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    
    <!-- 1. style 태그를 이용해 css를 사용할 수 있다.-->
    <style>
      button {
        font-size: 10px;
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
    
    
	<!-- 2. HTML태그에서 inline 태그로 css를 사용할 수 있다.-->
    <button style="background-color: yellow;">TEST</button>
  </body>
</html>

 

코드 재사용이 어렵다
순수 css파일은 css파일 간의 값을 공유하지 않으므로 코드 재사용의 한계가 있다.

 

SCSS

정의

CSS의 확장판으로 Variable, import 등을 활용해 복잡한 코드를 쉽게 작성하는 데에 도움을 주는 언어이다.

특징

import 구문을 사용해 다른 sass 파일을 불러옴으로써, 방대한 css파일을 관리하기 쉽다.
// import theme.scss, button.scss
@import 'theme', 'button';
variable을 이용해 여러 번 쓰이는 값들을 변수로 저장할 수 있다.
$base-color: #000000;
$border-dark: rgba($base-color, 0.88);
.alert {
border: 1px solid $border-dark;
}

단점

스타일이 겹치는 문제를 해결할 수 없다.
아래 예제처럼, scss 파일을 분리했어도 내부 button 클래스의 font-size와 background-color는 중첩 선언이 되어
어떤 것이 먼저 적용되는지 알 수 없다.(이것이, BEM의 탄생 배경이 된다.)
// theme.scss
.button { font-size: 20px; background-color:yellow; }

// button.scss
.button { font-size: 30px; background-color:green; }

// style.scss
@import 'theme','button';

CSS Modules

정의

SCSS나 BEM 같은 경우, 손수 개발자가 클래스가 겹치지 않도록 관리해야 하는 불편함을 해소하고자 탄생된 모듈이다.

단점

컴포넌트를 작성할 때, 한 곳에서 모든 것을 작성할 수 없기 때문에 각각의 css파일을 생성해야 하므로 관리하기 불편함이 있다.

 

CSS in JS(Styled-components, emotion)

정의

CSS Modules의 문제점인 방대한 css 파일 관리의 어려움을 해결하기 위해 만들어진 라이브러리이다.

 

특징

컴포넌트마다 그 안에서 사용할 CSS를 같이 작성함으로써, 컴포넌트 관리가 쉬워졌다.

 

단점

인터렉션이 늦다.

CSS Modules는 모든 상태에 맞는 스타일을 이미 만들어 놨기에, 컴포넌트의 상태가 변경되면 바로 바로 적용이 가능하다.

CSS in JS는 컴포넌트 상태가 변경되면, 우선 JS의 CSS코드를 읽어와서 파싱하는 단계부터 시작하기에 속도가 늦다.

 

JS의 번들 크기가 커진다.

CSS Modules는 추가적인 라이브러리 없이 사용할 수 있기때문에, pure-css와 큰 차이가 없다.

CSS in JS는 Styled-components와 같은 라이브러리를 추가해야 하므로 용량의 크기도 크다.

 

결론

그래서 우리는 어떤 css 툴을 사용해야할까? 정답은 딱히 정해져 있지 않다.

다만, 내가 개발하는 프로그램이 어떤 프로그램인지 파악하는 것이 중요하다.

즉, 인터렉션이나 속도가 중요한 웹사이트의 경우는 CSS in CSS 방식(SASS, CSS-Modules 등)을 사용하는 것이 좋다.

반면에 관리자 페이지나 위키와 같은 정적인 웹사이트는 CSS in JS 방식(Styled-components, emotion)을 사용하는 것이 좋다.