Colocation

A great blog written by Kent
Colocation

Principles

"Place code as close to where it's relevant as possible"

"Things that change together should be located as close as reasonable."

Comments

No one puts their comment in a separate file or directory, but have their comments co-located with the code they're explaining

HTML/View

Modern frameworks puts your view logic and your view templates in the exact same file, for example React or Vue

CSS

CSS-in-JS(A Unified Styling Language. In the past few years we’ve seen the… | by Mark Dalgleish | SEEK blog | Medium)

Tests

co-locate our tests files with the file or group of files they are testing ⇒ we can see immediately that the module is tested

State

Localize your state

• Maintainability
• Performant ⇒ e-render a lot fewer components

"Reusable" utility files

"Huh... I'll bet a lot of people could use this." ⇒ the component uses that util function is deleted, but the utility you wrote is out of sight, out of mind and it remains

My Thoughts

I will try to practice "Place code as close to where it's relevant as possible"

I often have the situation where separating a function to utilities. I will think carefully from next time