scss+css module

인턴을 하면서 진행했던 프로젝트에서 SCSS와 CSS Modules를 결합하여 사용을 하였다.

여타 다른 스타일 방식을 사용하고 싶었지만 SCSS를 사용했던 이유는 기존의 프로젝트에서 이미 사용되고 있었으며 배포를 위해서 기존 기술 스택을 그대로 따라야하였기 때문이었다.

그렇다면 왜 SCSS와 CSS Modules를 함께 사용하였을까?

어떠한 장점이 있길래?

SCSS + CSS Modules을 함께 사용했을 때의 장점:

• 로컬 스코프화로 스타일 충돌 방지

CSS Modules을 사용하면 CSS 클래스가 로컬로 스코프화되어 전역 네임스페이스 오염을 방지할 수 있게 된다.
특히 대규모 프로젝트에서 CSS 클래스 이름 충돌을 막고, 컴포넌트별로 독립된 스타일을 보장하게 된다.
SCSS만 사용할 경우에는 CSS 클래스가 전역으로 적용되기 때문에 다른 컴포넌트에서 동일한 클래스 이름을 사용할 때 충돌이 발생할 수 있게된다.

• 구조적이고 유지보수성 좋은 스타일

SCSS는 중첩, 변수, 믹스인 등을 지원하여, 복잡한 디자인을 더 구조적이고 반복없이 작성할 수 있다.
CSS Modules과 함께 사용하면 구조화된 SCSS 문법을 활용하면서도 각 컴포넌트가 로컬 스코프화된 스타일을 가질 수 있게된다.

• 타입 안전성:
  CSS Modules을 TypeScript와 함께 사용하면 자동으로 클래스 이름에 대한 타입 검사를 할 수 있다. 즉, SCSS만 사용할 때보다 더 안전하게 스타일을 관리할 수 있다.

• 코드 스플리팅 가능:
  CSS Modules과 SCSS를 함께 사용하면 각 컴포넌트별로 스타일 파일을 나누어 관리할 수 있어 코드 스플리팅과 성능 최적화에 도움이 된다.
  ex) 특정 페이지에 로딩될 때만 해당 페이지의 CSS가 로드되도록 할 수 있음

CSS Modules 없이 SCSS만 단독으로 사용하는 경우에는 어떨까?

• 전역 스타일 사용:
  SCSS만 단독으로 사용할 경우, CSS는 기본적으로 전역 스코프에서 동작하게된다.
  즉, 작성한 클래스가 전역으로 적용되므로 스타일 충돌이 발생할 수 있게된다.
  이를 방지하려면 네이밍 규칙(BEM 방식 등)을 잘 지켜야 하게된다.

• 중첩과 재사용성 유지:
  SCSS의 장점인 중첩, 믹스인, 변수 사용은 여전히 유효하며, 스타일을 보다 깔끔하고 구조적으로 작성할 수 있지만, 전역 스코프의 문제를 해결하려면 추가적인 관리가 필요하다.

• 전역적 스타일 적용이 필요한 경우:
  단순한 페이지나 프로젝트에서 전역 스타일이 많이 필요하거나, 컴포넌트 간에 스타일을 공유할 때는 SCSS 단독 사용이 더 간단할 수도 있다.

• 명시적 글로벌 관리:
  SCSS만 사용할 때는 스타일 충돌을 피하기 위해 클래스 이름을 더욱 신경 써서 관리해야 한다. 따라서 BEM 같은 네이밍 패턴을 도입하는 경우가 많습니다. 이를 통해 전역에서 충돌을 막겠지만, CSS Modules처럼 자동으로 관리되지는 않는다.

SCSS만 단독으로 사용하는 경우

// styles.scss
.container {
  background-color: #f0f0f0;
  
  .header {
    color: #333;
  }
  
  .content {
    padding: 20px;
  }
}

SCSS + CSS Modules을 사용하는 경우

// styles.module.scss
.container {
  background-color: #f0f0f0;
  
  .header {
    color: #333;
  }
  
  .content {
    padding: 20px;
  }
}

import styles from './styles.module.scss';

const Component = () => (
  <div className={styles.container}>
    <h1 className={styles.header}>Hello</h1>
    <p className={styles.content}>This is content.</p>
  </div>
);

왜 함께 사용하는가?

• 안정성과 확장성:
  SCSS의 기능을 활용하면서도 CSS Modules을 통해 각 컴포넌트에 로컬 스타일을 적용하여 전역 네임스페이스 오염을 방지하는 것이 큰 장점이 됨.

• 유지보수성: 대규모 프로젝트에서 컴포넌트 기반으로 스타일을 관리할 수 있어 유지보수가 쉽고, 충돌을 방지함

• 타입 안전성: TypeScript와 함께 사용할 때 클래스 이름을 자동으로 타입 체크할 수 있어 안정성이 높아짐.

결론

SCSS와 CSS Modules을 함께 사용하면,
SCSS의 장점(구조화, 재사용성)을 유지하면서 CSS 클래스 충돌을 막고 컴포넌트 단위로 스타일을 안전하게 관리할 수 있음.
SCSS만 단독으로 사용할 경우에는 더 많은 전역 스타일 충돌을 관리해야 하기 때문에
중소형 프로젝트나 간단한 스타일링이 필요한 경우에는 적합할 수 있지만,
큰 프로젝트에서는 CSS Modules과 함께 사용하는 것이 좋음.