So... do you “need” CSS Modules at all?

You can go three ways:

1. Utility-only (UnoCSS everywhere)
   
   
   • Pros: fast, consistent, no extra CSS files
   
   
   • Cons: JSX/MDX can get visually noisy; complex states can be harder to express


2. Modules-only (classic CSS Modules styling)
   
   
   • Pros: super clear separation of markup vs style
   
   
   • Cons: slower to iterate, you reinvent common

... See more

🧭 HIGH-LEVEL FLOW

User visits your URL → server sends HTML → browser renders → only then your client JS loads.

🧠 Why stores.ts must be in client/

The stores inside stores.ts :

• manage reactive data


• depend on browser APIs (localStorage)


• represent user state (dark mode, counter)


• change during interactions


• only exist after the page loads

Example:

darkmode: falsecounter: 0

These values:

• change when the user toggles them


• are stored in localStorage , which is

... See more

⭐ Recommended clean pattern

For multiple classes or for readability:

className={cn(

css.root,

className,

"cell col-2 bg-secondary py-4xs"

)}

This is exactly how your other DSI components mix grid utility classes + CSS modules.

What is a “store” in web development?

A store is just a single place where you keep data that many parts of your website need to share .

Instead of each component holding its own copy of the data, a store:

• holds the source of truth


• lets components read the data


• lets components update the data


• can notify components when the data changes

Think of it as a... See more