2020-02-28
1808
#react
Leonardo Maldonado
14912
Feb 28, 2020 ⋅ 6 min read

Why you shouldn’t use inline styling in production React apps

Leonardo Maldonado Fullstack developer. JavaScript, React, TypeScript, GraphQL.

Recent posts:

the replay october 8

The Replay (10/8/25): Data enrichment, CSS is back, TypeScript 5.9

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 8th issue.

Matt MacCormack
Oct 8, 2025 ⋅ 30 sec read
Goodbye, messy data: An engineer’s guide to scalable data enrichment

Goodbye, messy data: An engineer’s guide to scalable data enrichment

Walk through building a data enrichment workflow that moves beyond simple lead gen to become a powerful internal tool for enterprises.

Alexandra Spalato
Oct 8, 2025 ⋅ 6 min read

DesignCoder and the future of AI-generated UI

From sketches to code in minutes, DesignCoder shows how AI-generated, hierarchy-aware UIs could change the way developers prototype and ship apps.

Rosario De Chiara
Oct 7, 2025 ⋅ 5 min read

Should you use if() functions in CSS?

It’s 2025, and CSS finally thinks logically. The if() function brings real conditional styling — no hacks, no JS workarounds. Here’s how to use it right.

Ikeh Akinyemi
Oct 7, 2025 ⋅ 16 min read
View all posts

4 Replies to "Why you shouldn’t use inline styling in production React apps"

  1. Your argument against inline styles because of limitations with argument passing appears somewhat flawed; or am I misunderstanding something here?

    “`
    const Button = ({ backgroundColor }) => {
    return (

    My Button

    );
    };
    “`

  2. I don’t see inline styles not “looking good” because you used a ternary operator. Actually, you could do a small refactor it to be just as you did on your CSS-in-JS approach and you code will look the same.

    I’d say you can use inline styling for minor changes on not-reusable components or for styles you don’t want be available to be changed, like giving div a flex property rather than create a React component or a CSS classes only to this end. If you need more complexity than you can move to a more featured place: CSS-in-JS or whatever, but it’s easier to start from basic and then evolve as soons as you need more power.

  3. This is exactly what I was thinking… he also says that using the ternary “grows the component size” but it actually doesn’t result in any more lines of code. In fact it results in less lines of code. It also is very readable, I would argue that it’s more readable than the styled component version because it doesn’t need a special syntax unique to the styled component library, instead it is taking advantage of a feature native to the javascript language.

  4. There are libraries that allow devs to access all of CSS features with inline styles, so that’s not a real concern. And you keep saying that inline styles aren’t “performant” but never offer a single reason as to why their performance is worse. You also don’t provide any reason as to why inline styles aren’t “scalable”. This is just a really low quality article, and it’s sad because it’s also the first search result in google.

    “the inline styling might slow you and your coworkers down a little bit to create new components or maintain those that already exist.” Again, WHY? You make so many claims in this article and never even attempt to substantiate them in any way. It’s ridiculous.

    “One of the jobs of developers is to try to find the most performant solution” This is just flat out wrong. As a developer you don’t need to find the “most performant” solution, in fact it’s often a huge waste of time. Why? Because users don’t care if your application takes 10 ms to run instead of 1 ms to run. Computers are very fast. What is important is implementing features quickly, not implementing quick features.

Leave a Reply