Introduce CSS Modules
===
## CSS evaluation history
- CSS
- SASS/SCSS
- CSS-with-JS (CSS Modules)
- CSS-in-JS (JSS, styled component)

## Why CSS Modules
- 命名重複問題

/* App.css */
.text {
    color: red;
}

/* 編譯後 */
.App__text___3lRY_ {
    color: red;
}

- 模組化

.serif-font {
  font-family: Georgia, serif;
}

.display {
  composes: serif-font;
  font-size: 30px;
  line-height: 35px;
}

- 每個組件樣式格自獨立，避免引入不需要的 style
- 打包時不需額外引入 css，可大量減少引入不避要的 css 檔案
- creat-react-app 預設支援
- 學習曲線低
- 可隨時移除改回原本 scss 引用方式
- 最有可能被瀏覽器實現

## How to use
- create `[name].module.css`
- import styles from './style.module.css'
- className={styles.title}

## Reference
- CSS Modules: https://github.com/css-modules/css-modules
- CSSWG: https://github.com/w3c/csswg-drafts