Styling React Apps

styling with Vanilla CSS

advantages

  • CSS code is decoupled with JSX code
  • You write CSS code as you (maybe) know and (maybe) love it
  • CSS code can be written by another developer who needs only a minimal amount of access to your JSX code

disadvantages

  • You need to know CSS
  • CSS code is not scoped to components: CSS rules may clash across components (e.g., same CSS class name used in different components for different purposes)

Scoping styles with CSS Modules

advantages

  • CSS code is decoupled from JSX code
  • You write CSS code as you (maybe) know and (maybe) love it
  • CSS code can be written by another developer who needs only a minimal amount of access to your JSX code
  • CSS classes are scoped to the component(files) which import them: No CSS class name clashes

disadvantages

  • You need to know CSS
  • You may end up with many relatively small CSS files in your project

CSS-in-JS Styling with “styled-components”

advantages

  • Quick & easy to add
  • You continue “thinking in React” (configurable style functions)
  • Styles are scoped to components: No CSS rule clashes

disadvantages

  • You need to know CSS
  • No clear separation of React & CSS code
  • You end up with many relatively small “wrapper” components

Styling with Tailwind Css

advantages

  • You don’t need to know (a lot about) CSS
  • Rapid development
  • No style clashes between components since you don’t define any CSS rules
  • Highly configurable & extensible

disadvantages

  • Relatively long className values
  • Any style changes require editing JSX
  • You end up with many relatively small”wrapper” components OR lots of copy & pasting
Author

Alvin

Posted on

2024-09-28

Updated on

2024-09-28

Licensed under