🎭 전역 CSS 오염: 예측 불가능한 스타일 충돌과 유지보수 악몽

Why Wrong?

How to Fix?

/* global.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

/* ComponentA.css */
.button {
  background-color: red; /* 의도치 않은 스타일 재정의 */
}

/* ComponentB.css */
.button {
  font-size: 1.2em; /* 또 다른 의도치 않은 스타일 재정의 */
}
```
```jsx
// ComponentA.jsx
import './ComponentA.css';

function ComponentA() {
  return <button className="button">Button A</button>;
}

// ComponentB.jsx
import './ComponentB.css';

function ComponentB() {
  return <button className="button">Button B</button>;
}

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 1em;
}

.primary {
  background-color: red;
}
```
```jsx
// Button.jsx
import styles from './Button.module.css';

function Button({ children, primary }) {
  return (
    <button className={`${styles.button} ${primary ? styles.primary : ''}`}>
      {children}
    </button>
  );
}

// ComponentA.jsx
import Button from './Button';

function ComponentA() {
  return <Button primary>Button A</Button>;
}

// ComponentB.jsx
import Button from './Button';

function ComponentB() {
  return <Button>Button B</Button>;
}

You Might Also Like