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:

How to manage JavaScript closures in React

The proper handling of JavaScript closures is essential to any JavaScript project. In React projects specifically, closures can manifest themselves […]

Tanishka Kashikar
Mar 24, 2025 ⋅ 10 min read
array filter method javascript

How to use the array filter() method in JavaScript

Learn about the array filter() method, from its basic syntax and use cases to more advanced techniques like chaining with map() and reduce().

Abiola Farounbi
Mar 24, 2025 ⋅ 5 min read
css vertical alignment

CSS vertical alignment: Best practices and examples

CSS has come a long way, making vertical alignment easier than ever. Learn about this concept and explore some of the best CSS vertical alignment techniques.

Facundo Corradini
Mar 23, 2025 ⋅ 8 min read
How to win clients with a Flutter web demo that feels real

How to win clients with a Flutter web demo that feels real

Use Flutter to build browser-based app demos that help clients visualize the product, speed up buy-in, and close deals faster.

Lewis Cianci
Mar 21, 2025 ⋅ 5 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