Why we use inline CSS?

One if the main reasons that developers thinking about inline CSS it to solve the encapsulation problem, which has many other solutions like, CSS-in-Js or CSS-Module, etc. The other factor is to have something handy and easy to understand and manage for first MVP of the component. Then, they presumably want to decide on a thorough approach.

Why it is not good in general?

• Inline styles only connect to that peculiar element. If you demand to reflect that same style, such as a primary button, you have to copy and paste from one part of your web page to another part.

• Using plain inline CSS gives you a limitation on using so many of the CSS’ excellent fancy features and you can only rely on that for basic direct CSS styling.

• If you keep adding new style and development in this way, it will end to a messy and unclean code.

• You can not reuse your component easily because of hard coded inline CSS, which are not relational.

Alternative to inline CSS

CSS-in-JS is one of the favoring approaches to style React applications. We have a lot of excellent libraries to do that such as styled-components, Emotion, etc. A thing that matters about CSS-in-JS is that is not a specific library, it is an approach that seeks to work out the trouble of styling in React applications.

With the help of CSS-in-Js you can use all CSS features and gather all related staying in an encapsulated component.

There is no need to having multiple file, and it is common to use all styles directly in the component.

It will make your code more clean for development, because you can use more related name on elements in for JSX code.

It has capability to add JavaScript condition to your styles and give you move power on that side, and much more.

You can have a design-system and template in addition to competence to reuse and extend your styles.

Note: Everything has negative points, but I do not want to focus on drawbacks in this article. I will deal with it in the other post with measuring CSS-in-Js tools.

Conclusion

Inlining the style is not necessarily bad, nothing is an absolute bad or good, it is always depending on our goal and expectation then check with other trade-offs related to the problem that we want to solve and our short/long-term plans.