CODEWITHSUNDEEP
reactjsperformancestylesmaterial-ui
Draer
Draer

Reputation: 41

Reactjs and inline styling, performance?

Currently I am learning React with material-ui and one thing wonders me:

<div data-reactroot="" class="wafe" style="color: rgba(0, 0, 0, 0.870588); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-sizing: border-box; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px; border-radius: 2px; display: inline-block; min-width: 88px; background-color: rgb(255, 255, 255);"><button tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: inline-block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: inherit; font-weight: inherit; transform: translate3d(0px, 0px, 0px); position: relative; height: 36px; line-height: 36px; width: 100%; border-radius: 2px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; text-align: center; background-color: rgb(0, 188, 212);"><div><div style="height: 36px; border-radius: 2px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; top: 0px;"><span style="position: relative; opacity: 1; font-size: 14px; letter-spacing: 0px; text-transform: uppercase; font-weight: 500; margin: 0px; padding-left: 16px; padding-right: 16px; color: rgb(255, 255, 255); -webkit-user-select: none;">Guzik</span></div></div></button></div>

Does it has to apper like that? Is there any way to move this styling into another file/location, or it just has to be like this with React+material-ui?

Upvotes: 3

Views: 2477

Answers (1)

webdeb
webdeb

Reputation: 13211

Material-UI uses inline styles to provide the most predictable behavior. The components from mui have a lot of animations and them are controlled by javascript. This styles are generated from code.

Which kind of performance do you actually mean? Loading? Rendering?

  1. Loading: JS, generated styles win, because if you are using proper build tools, you will get only the needed code, and the styles will are just a small part of it.

  2. Rendering: Inline Styles win, because the renderer don't need to map the selectors to the styles, making the cascading to all the styles, it would also have to parse.

The benefits of inline Styles are huge. Benefits of CSS with JS are also very huge.

If you know some CSS frameworks like Bootstrap, you know, that a lot of the time you have to use wrappers. Like wrappers for containers, forms, panels, and so on. Because its hard, or even impossible to style a component with classes, if don't know the context. So the frameworks teach you to create wrappers, which are just stupid divs, but you need them to apply the styling you want to the inner parts.. Is it good? Is it simple? What about changing it? What about learning?

With inline styles its definitely simpler. If something is wrong, you just have to look into the component and change it there.

If you are using JS objects to describe your styles, you can share it, and name it. Naming and scoping brings you also a lot of positive side effects, you can create Components and use them where you want, without worrying about class names, because classnames are global.

If you use two different UI frameworks, they often uses the same names for buttons, btn, button, panel .. and all that stuff lives in your global document.. So its much more weirder, then use explicit styles for the explicit component.

You should check out this presentation, which is very good:

https://speakerdeck.com/vjeux/react-css-in-js

Upvotes: 3

Related Questions