what's the main diffrence style.scss vs style.module.scss?

Question

I'm using react with sass.

It's look like both have same benefits. Locally scoped, No more conflict etc. What is the main diffrence between style.scss vs style.module.scss

Why do we need .module prefix?

Answer 1

Short Answer

*.scss is normal SCSS file while *.module.scss is SCSS file with CSS modules.

According to the repo, CSS modules are:

CSS files in which all class names and animation names are scoped locally by default.

This solves the problem of typing ultra specific CSS class names to avoid clashes. Good bye .phone-page-contact-form-edit-card-default-button-blah-blah and hello .default-button

Usage

Below is the usage for *.scss

.ultra-specific-class-name_item {
  display: flex;
}

If you use SCSS in a normal way, you must declare the class name as a string

// Simply import
import './foo.scss';


const App = () => (
  <div className="ultra-specific-class-name_item">
    foo bar
  </div>
)

Below is the usage for *.module.scss

// No need of any ultra specific classnames 
.item {
  display: flex;
}

If you use SCSS as a CSS module, you must use them as how you would use a JS module.

// import as a js module 
import styles from './foo.module.scss';

const App = () => (
  <div className={styles.item}>
    foo bar
  </div>
)

Output

<!-- Normal SCSS -->
<!-- it will not be transformed -->
<div class="ultra-specific-class-name_item">foo bar</div>

<!-- SCSS with Class Module -->

<!-- hash values are suffixed to the class name -->
<div class="item-35ada5">foo bar</div>

<!-- newer versions will even prefix the file name
     to the class name -->
<div class="foo__item-35ada5">foo bar</div>