TIL - CSS Module

CSS Module

 

CSS Module 방식 사용하기

CSS를 모듈 방식으로 클래스를 불러와 사용 할 수 있는 방법이다.

 

 

사용방법

 

CSS 파일 만들기

// 파일명
[ModuleFileName].module.css

CSS Module 방식으로 작업 할 때는 작성 할 [파일명].module.css 으로 파일을 생성해야 한다.

 

 

CSS 불러와 적용하기

 

먼저 CSS 파일 module 방식에 맞게 작성한다.

// Home.module.css 파일
.wrapper {
  margin: 0 auto;
  max-width: 1024px;
  text-align: center;
}

.logo {
  color: orangered;
}

.kebab-case {
  color: goldenrod;
}

.camelCase {
  color: green;
}

.size-up {
  font-size: 3rem;
}

 

작성한 CSS를 불러오기 위해서 해당 파일의 내용을 import하여 객체 처럼 스타일을 적용 할 수 있다.

// 리액트 컴포넌트
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.wrapper}>
      <h1 className={styles.logo}>CSS Module</h1>
      // .. 생략 ..
    </div>
  );
}

 

 

---

 

모듈 방식의 특징

 

1. CSS 파일에 선언한 클래스명이 고유값이 된다.

모듈 방식으로 선언된 CSS 선택자가 실제 클래스명으로 스타일에 적용 될 때
"파일명_클래스명__해쉬값" 으로 고유한 값으로 적용이 되어 CSS가 중첩되는 것을 완벽히 방지 할 수 있다.

때문에 개발자가 CSS 네이밍을 위해 고민해야 하는 수고를 덜어 준다.

 

실제로 적용된 클래스 고유값

 

2. 레거시 프로젝트 도입 시 유리하다.

이를 테면 이미 완성되어있는 프로젝트를 리액트로 옮겨와야 하는 상황에서 styled-components를 사용해서 작업한다면

컴포넌트 단위로 styled-components 스타일링 작업을 해야하기 때문에 여간 번거로운 작업이 아닐 수 없다.

 

이때 CSS Module 방식으로 리액트 프로젝트에 적용 시킨다면 기존의 CSS 코드를 그대로 옮겨와 styles 로 불러 태그에 적용 시키면 되기때문에 레거시 프로젝트에 도입 하기에 괜찮은 방법이다.

 

이 뿐 아니라, 실제로 내가 다니고 있는 회사에서는 마크업만 전문적으로 하는 퍼블리셔가 따로 있는데

퍼블리셔가 작업한 마크업과 스타일 코드를 그대로 가져와 리액트로 옮기기만하면 CSS Module 방식을 사용 할 때

리액트 개발자가 따로 스타일 코드를 다시 분리하는 작업을 하지 않아도 된다.

 

 

---

Sass 와 함께 사용하기

Sass를 사용해 Module 방식을 쓰기 위해서는 추가로 node-sass 패키지를 설치해 줘야 한다.

npm install node-sass

https://www.npmjs.com/package/node-sass

node-sass

그 다음은 기존 사용방식과 똑같지만 CSS 파일을 생성 할때 와 불러올때 .scss 로 파일을 생성하고 import 해야한다.

 

 

---

다중 클래스 적용하기

CSS를 작성하다보면 하나의 클래스로 모든 스타일링을 하는것이 아니라 부트스트랩 처럼 필요한 클래스를 따로 만들어

여러개 적용 시킬 경우도 있다.

 

 

CSS Module 방식을 사용 할때는 어떻게 적용 할 수 있을까?

 

Template Literal로 다중클래스 적용하기

 

위 다중 클래스가 적용된 예시를 보면 "style1 style2" 라는 string 값이 적용되어있고 클래스 간 공백(spacebar) 로 연결하여 2개의 클래스가 적용됨을 명시 할 수있다.

 

Module 방식에서는 styles 라는 객체에 담겨있는 각각의 selector 정보를 불러와 태그의 className 속성 값에 할당한다.

그러면 이렇게 사용된 selector를 공백으로 여러개 연결 시켜주면 된다.

 

리액트에서 렌더링하는 컴포넌트 코드들은 jsx방식으로 작성하기때문에 자바스크립트 문법을 쓸 수 있다.

그렇다면 className에 2개의 객체값을 적용하기 위해 template literal을 사용해 작성 할 수 있다는 것이다.

 

다중 클래스 적용 방법1

 

classnames 패키지를 사용해 다중클래스 적용하기

classnames 패키지는 다중클래스를 적용하거나 조건부 클래스를 적용 할 때 사용하는 라이브러리 이다.

classnames에서 지원하는 classnames() 함수를 사용해 매개변수로 적용 할 클래스를 콤마로 연결하여 넣어주면 쉽게 다중클래스를 사용 할 수 있다.

 

다중클래스 적용 방법2

 

이 외에도 조건부 클래스를 적용하는 다양한 방법이 나와있으니 npm 문서를 확인해보면 좋을것 같다.

 

https://www.npmjs.com/package/classnames

classnames

 

마치며

회사에서 진행하고있는 프로젝트가 css in js 스타일링으로 작업하지 않고있어서 알아보게 된 개념이다.

당연히 css in js를 사용할거라고 생각했는데 실무에서 보니 다른 프로젝트에 있는 코드를 옮겨오거나 퍼블리셔와 협업시에 CSS Module 방식이 꽤나 편리하고 작업하기에도 유리한것 같다.

 

꼭 css in js 방식으로 쓰는것이 정답이 아니니 나의 작업 환경, 프로젝트 확장성 같은 부분을 고려해서 때에 맞는 프로젝트 세팅이 중요한것 같다.