0

I'm new to React

making a separate file for CSS

or

writing CSS in component style props

<div style={{maxWidth: '590px'}}></div>

I did both and looks like they are the same. I was wondering is there any disadvantages or side effects in this way?

Yaya
  • 4,402
  • 4
  • 19
  • 43
  • It would be better to limit your question to the disadvantages or side effects of one method, rather than asking which is "better". "Better" invites opinions rather than facts. Note, however, that the performance difference between the two has already been discussed many times already, such as in the answers to [External CSS vs inline style performance difference?](https://stackoverflow.com/q/8284365/215552) and [Inline – Heretic Monkey Dec 29 '20 at 20:26

3 Answers3

1

Writing inline styling can bring up performance issues. Again it depends on your application. I will suggest checkout styled-components for this kind of scenario.

Sam
  • 1,040
  • 1
  • 7
  • 11
  • thanks, what kind of applications include performance issues , and where can i check styled-components – Yaya Dec 29 '20 at 20:17
  • it depends on how complex your CSS . you can check https://styled-components.com/ for the styled-components. Please mark this as an answer, if it answers your question. – Sam Dec 29 '20 at 20:20
1

Definitely CSS file.

CSS is meant to be written freely and should have it's own place. In a css file you can see all the scoping you need (SCSS (Sass) is even better by the way, very suggested!), overrides of such and etc.

In addition, something you should keep in mind is CSS overrides - bad for performance.

With a separate CSS file you use class and id, and have such a better workspace for writing editing and debugging CSS.

Plus, inline css will override almost any other css rule you give the specific element - little dangerous.

Shani Kehati
  • 427
  • 5
  • 10
1

Using inline CSS does not generate low performance, however, if you want to make a project as it would be done in a job as a developer, I recommend that you write your styles in separate files and if possible, with a css pre-processor such as Stylus , Sass or Less

Proskynete
  • 9
  • 3