DEV Community

Ben Sullivan
Ben Sullivan

Posted on • Updated on

Inline and External CSS: Readability and Performance in React

Inline CSS gives developers a way to see their styling in the same place as their functionality. As ridiculous as it is, being able to minimize the number of open files in an IDE is a way to improve developer's quality of life. Adding more windows, files, and complexity is a form of poor performance. The few seconds of context shifting between files or programming languages slows down the amount of code a programmer can write. It adds to the amount of unhappiness they experience as they write. So the solution is write your CSS inline even at the expense of some performance.

External CSS allows some performance gains. It's a way to keep your file lengths lower and compartmentalized. If your focus is to cordon off portions of your code in such a way that each file does a single thing or you need to keep styling away from functionality External is the way to go.

Top comments (0)