Colocating Code: Why Components and Their Assets Belong Together

Organising by file type spreads one feature across many folders. Colocation groups everything a feature needs in one place.

The cost of type-first folders

When components, styles, tests, and hooks live in separate top-level folders, related code is connected only in your head. Deleting a feature means editing five trees.

Feature-first structure

Group by feature; inside each, keep the component and everything it owns. Navigation, maintenance, and deletion all become obvious.

When shared is better

Genuinely reusable primitives — buttons, inputs, cards — earn their place in a shared folder. Colocate the specific, share the generic.

Wrapping up

Colocation reduces cognitive load and makes codebase changes feel local instead of sprawling.