CSS Modules Basics

🎨 What Are CSS Modules?

CSS Modules are a way to write CSS that's scoped to the component it belongs to. This means you don’t have to worry about class name conflicts, global styles bleeding across components, or long naming conventions like .navbar__title--active. 😎

⚙️ Why Use CSS Modules?

Here’s why developers love CSS Modules:

• ✅ Locally scoped styles by default
• ✅ No global class name clashes
• ✅ Clean, readable class names
• ✅ Easy integration with React

🛠️ Setting Up CSS Modules in React

If you’re using Create React App (CRA), CSS Modules work out of the box. Just follow this naming pattern:

ComponentName.module.css

Example:

MyComponent.module.css

💡 Creating a CSS Module

Here’s a simple CSS module:

/* MyComponent.module.css */
.container {
  background-color: #f0f0f0;
  padding: 20px;
}

.title {
  color: #2c3e50;
  font-size: 24px;
}

📥 Importing and Using Styles

In your component, import the module like this:

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

function MyComponent() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello from CSS Modules!</h1>
    </div>
  );
}

🧪 What Happens Behind the Scenes?

Each class is transformed into a unique name behind the scenes (e.g. container_1a2b3), making it impossible to conflict with styles in other files. 🔒

🔁 Conditional Styling

You can use JavaScript logic to apply classes conditionally:

<div className={isDark ? styles.darkMode : styles.lightMode}>
  Theme-Based Styling
</div>

🔗 Combining Multiple Classes

Use string interpolation or libraries like clsx:

<div className={`${styles.box} ${styles.shadow}`}>Box with shadow</div>

Or with clsx:

import clsx from 'clsx';

<div className={clsx(styles.box, styles.shadow)}>Box with clsx</div>

❌ Global vs Module Styles

To keep global styles (e.g., resets or utility classes), create a normal .css file and import it directly:

import './global.css';

But prefer modules for most component-specific styling! 🧩

📋 Summary

• ✅ Use .module.css naming to create scoped styles
• ✅ Import styles using import styles from
• ✅ Avoid global conflicts by default
• ✅ Use string or clsx for conditional/multiple classes

🚀 Final Thoughts

CSS Modules are a powerful way to write clean, component-level styles in React. They help you avoid CSS chaos, eliminate naming collisions, and keep your UI consistent and modular. 🧼🎯

---