⚠ Global CSS

• Riskli: Büyük projelerde global CSS tanımlamak karmaşaya yol açabilir.
• Çakışma: Tüm bileşenlerde aynı class isimleri kullanıldığında stil çakışmaları oluşabilir.

🟢 Bileşen Bazlı CSS

1. CSS Modules

/* PageNav.module.css */
.nav {
  background-color: #f0f0f0;
}

import styles from './PageNav.module.css';

function PageNav() {
  return <nav className={styles.nav}>Menu</nav>;
}

• Class isimleri otomatik olarak rastgele üretilir, çakışma riski yoktur.
• Belirli bir class’ı global yapmak için:

:global(.test) {
  color: red;
}

1. Inline Styles (JS içinde stil)

const style = { backgroundColor: 'blue', padding: '10px' };
<div style={style}>Hello</div>

• Hızlı prototipler ve küçük bileşenler için uygun.
• Dinamik stil uygulamak kolaydır.

1. <style> etiketi kullanımı

function Component() {
  return (
    <><style>{`
        .title { color: green; }
      `}</style>
      <h1 className="title">Hello</h1>
    </>
  );
}

• Küçük ve bağımsız stiller için kullanılabilir.

1. Utility-First CSS (Tailwind gibi)

<div className="bg-blue-500 p-4 text-white">Hello</div>