When to use CSS and JSX styles in React

Question

I am learning React and realized that you can use either real CSS by importing a CSS file, or you can use JS which has CSS-like code using camel cases.

Example for pure CSS: import './AppStyle.css' which contains background-color: black;

Example for JS version: const AppStyle = { backgroundColor: "black" }

Which one is better to use and why? Or maybe they’re both fine?

Andara · Accepted Answer · 2021-12-18 20:51:11Z

6

Writing CSS allows all the benefits of CSS (like selectors, media query).
In inline styles, you write Object-like styles vs. actual CSS.
Code readability is worst in inline style implementation, while managing styles using the CSS is easy to maintain.
The inline styles take more space in DOM because all the styles are defined internally along with the DOM element, while CSS is described separately, creating no issues for the compiler while compiling the file.

edited Dec 18, 2021 at 20:51

answered Dec 18, 2021 at 20:50

Andara

7185 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Preston Cammarata Over a year ago

Thank you! You answered my question perfectly!

Preston Cammarata Over a year ago

In 4 minutes when it allows me to say this answered my question, I will.

mhansen · Accepted Answer · 2021-12-18 20:49:26Z

1

There is ups and down with both solutions, you can achieve the same result with both, so it comes down to you want styling solution you prefer

answered Dec 18, 2021 at 20:49

mhansen

664 bronze badges

Comments

Juan Caicedo · Accepted Answer · 2021-12-20 13:33:50Z

0

Based on my experience,JSX and CSS are different technologies to solve the styling problem.

Good points of css:

css selectors
styling into css files

Good points of js:

js into styling -> sometimes you want to calculate styles over js https://cssinjs.org/jss-plugin-rule-value-function/?v=v10.0.0-alpha.3#enables-functions-for-dynamic-styles
more approaches to solve one problem -> it has js

Recommendation: Try to use one, it reduce the complexity and documentation to read.

answered Dec 20, 2021 at 13:33

Juan Caicedo

1,55319 silver badges33 bronze badges

Collectives™ on Stack Overflow

When to use CSS and JSX styles in React

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related