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.

ex for pure CSS: import './AppStyle.css' which contains background-color: black; ex for JS version: const AppStyle = { backgroundColor: black }

Which is better to use and why? Or is both fine?

CodePudding user response：

• 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.

CodePudding user response：

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