CSS-in-CSS vs CSS-in-JS

프로젝트가 커질수록 모든 html 요소에 클래스이름을 지어줘야 하고, 스타일 변경시 클래스에 맞는 선택자를 찾아 변경해야 하기 때문에 번거롭다.

이러한 불편함을 해결하기 위해, CSS-in-CSS 방식의 CSS Modules 와 CSS-in-JS 방식을 사용한다.

 

CSS-in-CSS

CSS Module

CSS모듈은 CSS를 모듈화 하여 사용하는 방식.

CSS와 클래스 이름을 만들어 스코프를 지역적으로 제한하면서, 모듈을 불러온다.

이 과정에서 개발자가 지정했던 클래스 이름과 객체가 반환되는 방식으로 작동하게 된다.

모듈화에선 CSS 클래스 이름이 중복되어도 새로운 이름이 입혀져 이름의 중복 및 관리의 위험성이 적어지게 된다.

다만, 여러 파일에 나뉘어서 작성하기 때문에 많은 CSS 파일을 만들어 관리해야하는 단점이 있다.

 

Box.module.css

.module.css 확장자를 사용하여 CSS 모듈 파일을 생성해준다. 

.Box {
  background: black;
  color: white;
  padding: 2rem;
}

Box.js

Box component의 클래스 네임은 고유한 값인 _src_Box_module__Box가 된다. 

import React from "react";
import styles from "./Box.module.css";

function Box() {
  return <div className={styles.Box}>{styles.Box}</div>;
}

export default Box;

그 외로, SCSS/SASS 가 있다.

 

CSS-in-JS

자바스크립트 코드로 css style을 작성한다.

styled-component , emotion 등의 라이브러리가 존재한다. 

 

출처: https://seizemymoment.tistory.com/145