CSS Modules

CSS Modules

CSS Modules이란 css 파일을 하나의 모듈처럼 만들어줘서 일반 css를 작성할 때 있었던 class명이 충돌하는 단점을 극복할 수 있게 해주는 기술

• style.css 파일을 js 파일으로부터 import를 할 때 어떤 하나의 객체로 받아들일 수 있도록 export함

  /* style.css */
  .className {
   color: green;
  }

  import styles from "./style.css";
  // import { className } from "./style.css";
  
  element.innerHTML = '<div class="' + styles.className + '">';

• Composition
  같은 css 파일에서 특정 className에 해당하는 스타일 코드를 composes하면 하여 특정 className 정의한 스타일 코드를 그대로 가져옴

  .className {
   color: green;
   background: red;
  }
  
  .otherClassName {
   composes: className;
   color: yellow;
  }

• Dependencies
  다른 css 파일에서 특정 className에 해당하는 스타일 코드를 composes 할 수 있음

  .otherClassName {
   composes: className from "./style.css";
  }