In frontend, every tool has its reasons for existence. You can’t make CSS less necessary by your ability to write it inside of the javascript code. It’s just doesn’t work like that.
For a javascripted mind CSS can look needless but do not forget that React and JavaScript in general are for functionality, not for style. Your component will still work without CSS. It’s not a dependency, thats why style should be separated from code.
Let’s see some of the main problems of using javascript for styling:
Reusability
Are you reinventing the wheel all over again every time you need one?
Reusability means faster development time, fewer bugs, and fewer bytes down the wire. Reusability of your code is important in today’s fast changing world.
Problem
Defining the styling inline, would make it impossible to share them across projects. This means you will have to reinvent or rearrange your wheel every time you use it in a different styled project.
Solution
Seperating styling from your component will make it reusable.
React encourages the creation of reusable UI components by breaking down the common design elements (buttons, form fields, layout components, etc.) into reusable components with well-defined interfaces. That way, the next time you need to build some UI, you can write much less code.
Don’t worry! You still don’t have to write style of your button into one giant CSS file.
By simply creating button.css in the button component directory, you will have a shareable component and seperated styling which will also shareable.
Tools
Sure, CSS have problems. But hey! who doesn’t.
Tools like;
LESS, SASS and Autoprefixer makes it less suck.
Problem
These tools above are industry standard solutions. If you are going to use them in your inline styling model, good luck with that. Because It will be very hard or maybe impossible to implement those tools without losing your precious time.
Solution
Do you remember what we have talked about reusability?
By simply creating button.css in the button component directory, you will have a shareable component and seperated styling which will also shareable.
And you will also be able to use CSS tools. Because you already have seperated your styling file. You will be free to make it button.scss or button.less.
Clean Code
Writing clean code is another industry standard.
Problem
Remember, even you sometimes hate to read your code after a couple of months later. By mixing your javascript code with inline styling you are going to hate it forever and if you aren’t the only contributor in the project things will get even worse.
Solution
Again, by seperating the styling from your javascript code you will have a clean, readable and editable code that everyone would understand and easily can contribute.
So…
Those were the couse and effects that would make you to think about your way of coding.
For sure there are cases that using inline CSS would be better but for deciding kind of case as a developer you have to understand the pros and cons of using it.
Be clever, make your life easier.
