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

缘由

又要找工作了，由于市场行情不好，Vue 相关的岗位都少了，发现有些是要求 React 技术栈。之前有用过一阵 React，但是最近两三年都没用了，现在捡起来重新系统学一下。

内容

• React - The Complete Guide 2024 (incl. Next.js, Redux) by Maximilian Schwarzmüller
• advanced react: deep dives investigations performance patterns and techniques