Styling (lightly - no design-system rabbit hole)

React doesn't care how you style things. That's freedom and a trap. Keep it boring until the product asks otherwise.

Plain CSS - still fine

import './Button.css'

export function Button({ children }: { children: React.ReactNode }) {
  return <button type="button" className="btn">{children}</button>
}

Same as importing CSS in a Vue SFC's mental model - just without <style scoped> built-in.

CSS Modules (scoped without drama)

/* Button.module.css */
.btn {
  padding: 0.5rem 1rem;
}

import styles from './Button.module.css'

export function Button({ children }: { children: React.ReactNode }) {
  return <button type="button" className={styles.btn}>{children}</button>
}

Comments for the code above:

• Vite supports CSS Modules out of the box (.module.css)
• Closest feel to Vue scoped CSS without learning a new runtime

Inline styles - sparingly

<div style={{ display: 'flex', gap: 8 }} />

Handy for truly dynamic one-offs. Ugly for whole pages.

What I'm intentionally not covering

• Tailwind setup (great tool, different tutorial)
• CSS-in-JS runtime debates
• Design tokens / theming systems

Pick one approach per project. CSS Modules + a tiny global reset has been enough for a surprising number of apps I've touched.

Next: testing - short and practical.

Enjoy!