Skip to main content

React Styling Approaches Reference

1. Global CSS vs. Component-Specific CSS​

  • Global CSS: Styles defined in a single file (e.g., global.css) that affects all components
  • Component-Specific CSS: Styles scoped to individual components for better organization and maintenance

a. CSS Modules​

  • Files named with .module.css extension (e.g., Component.module.css)
  • Styles are scoped only to components that import them
  • Prevent class name collisions by auto-generating unique identifiers
  • Imported as JavaScript objects: import styles from './styles/Resume.module.css'
  • Classes accessed via object properties: className={styles.resume}

b. Regular CSS Files​

  • Files named with .css extension (e.g., Resume.css)
  • Styles are globally accessible to all components
  • Potential for class name collisions
  • Imported without variable assignment: import './styles/Resume.css'

c. Combining Both Approaches​

// Using module CSS conditionally
<div className={condition && styles.item}>

// Combining global and module classes
<div className={`container ${styles.item}`}>
/src
  /components
    Component1.jsx
    Component2.jsx
    ...
  /styles
    Component1.module.css
    Component2.module.css
    global.css
    ...