I came across a ReactJS Boilerplate which had good reps and is community driven. Styling section emphasized more on styled component CSS but never stopped from switching to conventional CSS styling methodologies. Although this pulled my interests what makes the Styled-Component CSS stand out and why need to adopt it.
My Understanding of Styled component CSS:
My questions are:
Browsers are evolved to parse CSS separately from Javascript parsing, why are we trying to deviate from this and fit all in Javascript?
Styled-component CSS ships its javascript library to the client end,
which actually parses styles at the runtime and put inside <style
/>
tag when each component loads on demand. This means extra load
and logic eventually contributing to execution cycles on browser.
Why need this?
(By the above question i mean for every component loaded, corresponding CSS is computed, created and inserted in head via style
tag / Multiple style tags - Re-inventing CSS interpreters)
Does continuous computed style text banging via <style />
in the
head tag cause browser reflow/repaint ?
What are the performance advantages i get from this?
With add-on libraries / options like Post-CSS & SCSS classname hashing for dynamic classnames which pretty much solves the problem that everyone states. Why SC still ?
Community, please clear the air for me or correct me if i am wrong.
Some good articles that talks about repaint or DOM re-flow how it is performance expensive for browser when CSS styles are modified.
I've been using SCSS
(SASS
) for many years now, and also have been using Styled-Components
for a few projects, some large.
I love both, and Styled-Components
feels, for me, like a step forward:
I've found it easier to work with CSS within the JSX file itself (Opposing my judgment for many years before)
Easily use javascript variables within styles (eliminate the need for 2-sets of theme variable)
The cons can be only viewed as such on some scenarios but not necessarily all.
SCSS/LESS pros can be viewed as opposite to the cons listed above, while having some more cons such as mixings and faster development when working with variables (IMHO). it can get "ugly" defining a local selector variable:
Compare these simplified examples:
SCSS
example:.icon{
$size: '20px';
width: $size;
height: $size;
margin-left: $size/2;
}
Styled-Components
local scope example:const Icon = styled.i(props => {
const size = 20; // easier to use Number instead of String for calculations
return `
width: ${size}px;
height: ${size}px;
margin-left: ${size/2}px;
`});
Obviously the variable could have been defined outside of the Icon
styled wrapper and then internally used, but that won't make it isolated, because styled-component CSS might be composed of sub-components styled and look more like CSS:
const Header = styled.header`
> ul{
...
}
li{
...
}
img{...}
navigation{...}
`
Not always it is desirable to extract each individual HTML element to its own styled component. it is done mostly for components that are or might be repeated across the app.
Regarding SASS mixings, they can be converted to javascript functions, so there's not much advantage to SASS here.
Overall, working with Styled-Components is fun & easy, but has a side-effect of a tighter coupling between the styles and the framework/component and it obviously has some performance penalty (nothing that will actually slow you down, but still).