When to use CSS and JSX styles in React

Issue

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?

Solution

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

Answered By - Andara