Developer experience (DX) is how smoothly a team can create, understand, and maintain an application. In a React project, it is shaped both by productivity tools outside the application and by architectural choices inside the codebase. A workable choice for one developer may create friction when many people share the same files. section 1.4.1 section 7.1.2
When choosing a styling approach, check the costs borne by the next person to edit a component:
- Colocation: Can they find a component’s styles near its JSX, or must they search a distant shared stylesheet? section 7.1.2
- Familiarity and complexity: Can someone who knows CSS, HTML, and React contribute quickly? Does the solution have moving parts that invite misconfiguration or workarounds? section 7.1.2
- Scaling and readability: Will shared-file edits become contentious as the team grows? Can a developer tell which styles apply to an element? section 7.1.2
Formatting is a DX decision
Consider two files that differ only in tabs versus spaces, quote style, or spacing around brackets. Those choices do not improve performance, but inconsistency makes collaboration harder. Prettier can turn messy formatting into consistent formatting; it cannot, by itself, make poorly structured code elegant. section 4.2
Do not replace a styling approach merely because another exists. If the team works well with CSS, keep it. If styling friction, bugs, or maintenance costs slow delivery, compare alternatives against the team’s actual concerns rather than treating one tool as universally best. section 7.1 section 7.1.2
