CSS Module : 인라인(inline)은 나빠요!

개인적으로 보통은 styled-components나 emotion을 사용한 CSS-in-JS 기법을 많이 쓰는데, 이번 글에서는 생략하도록 하겠다.

외부 CSS 프레임워크를 쓰는 우리 팀. 하지만 CSS 프레임워크 하나로 모든 게 뚝딱 완성될 리는 없었다. 어쨌거나 CSS 커스터마이징이 필요했는데…

🙋 “inline으로 커스텀할까요? 아니면 className을 추가할까요?”

Inline Style을 지양하자

<p style="color: blue; font-size: 16px;">인라인 스타일</p>

위와 같이, 인라인 스타일은 HTML 요소의 style 속성을 사용하여 직접 스타일을 적용하는 방법이다. 인라인 스타일을 사용하면 간단하고 빠르게 스타일을 적용할 수 있다. HTML 요소에 직접 스타일을 작성하므로 별도의 CSS 파일을 만들 필요도 없다.

하지만 편리함이 있기에 단점도 있는 법. 인라인 스타일의 단점을 살펴보자.

1. 코드의 재사용성이 떨어진다.
   인라인 스타일은 요소마다 개별적으로 작성되기 때문에 스타일을 재사용하기가 어렵다.
2. 유지보수가 어렵다.
   스타일을 인라인으로 작성하면 HTML 코드가 복잡해지고 가독성이 떨어질 수 있다.
3. 우선순위 관련 문제가 발생할 수 있다.
   인라인 스타일은 다른 스타일 규칙보다 우선시되므로, 스타일 우선순위와 관련된 문제가 발생할 수 있다.

그렇다면 위의 단점들을 해결할 수 있는 방법이 바로…?

CSS Module

/* styles.css */
.heading {
  color: blue;
  font-size: 16px;
}

import styles from './styles.css';

const MyComponent = () => {
  return <p className={styles.heading}>CSS 모듈</p>;
}

위와 같이, CSS 모듈은 CSS 파일을 사용하여 스타일을 정의하고 HTML 요소에 적용하는 방법이다. 각 CSS 파일은 모듈화된 스타일을 정의하며, 해당 스타일은 클래스 이름을 통해 HTML 요소에 적용된다.

1. 코드의 재사용성이 높아진다.
   CSS 모듈을 사용하면 스타일을 모듈화하여 재사용할 수 있다. 여러 요소에서 같은 스타일을 적용해야 할 때 모듈을 가져와 사용할 수 있으므로 코드의 중복을 줄일 수 있다.
2. 유지보수가 용이합니다.
   스타일이 별도의 CSS 파일에 정의되므로 HTML 코드와 스타일이 분리되어 가독성이 향상된다. 스타일을 수정하거나 추가할 때도 CSS 파일에서 작업하므로 관리가 쉽다.
3. 스타일 우선순위 관련 문제가 해결된다.
   CSS 모듈은 클래스 이름을 통해 스타일을 적용하므로 인라인 스타일과 달리 우선순위 문제가 발생하지 않는다. CSS 모듈에서 정의한 스타일은 해당 클래스를 사용하는 요소에만 적용되기 때문에 다른 요소에 영향을 주지 않는다.

물론 불편한 점도 존재한다. 번들러 설정에서 CSS 모듈 기능을 활성화해야 하고, CSS 모듈은 컴파일 시에 클래스 이름을 해시값으로 변환하여 고유한 클래스 이름을 생성하기 때문에 동적으로 클래스 이름을 생성해야 하는 경우에는 추가적인 작업이 필요하다.

추가 설정이 필요하고 동적인 스타일링에 제약이 있지만, 무엇보다 개발에 있어서 중요한 것은 유지보수와 재사용성이 아닐까싶다. 당장의 빠르고 편리한 인라인 스타일에 혹해서 스타일 우선순위가 꼬이는 바람에 리팩토링한 적이 한두번이 아니다😇