JSS and Styled Components are two excellent styling libraries with wide usage, strong features, and popular support.
As of September 2021, both libraries are hovering around the 2.5 million weekly downloads mark.
If you are comparing JSS vs Styled Components for a new project, the below examples and guide should help you make a decision. My examples use JSS and Styled Components with Material-UI.
The Code Sandbox link with full React code is in the Resources section.
JSS Code vs Styled Components Code
First let’s compare the styling code for JSS and Styled Components. I’ve created two identical button components styled using each library.
JSS uses JavaScript syntax and has some handy shorthands. There’s no need to write ‘px’ after numerical values. Creating specific child-class selectors is straightforward (there’s not an example of that below).
However, I feel that the makeStyles/theme syntax is verbose. There are lots of parenthsis and curly braces to follow. Also, writing CSS using JavaScript camel case occasionally causes me to stop and think about syntax, breaking my flow.
Styled Components uses regular CSS syntax for attribute names and values. The encapsulating syntax is simple. I also like that I can create the component once and reuse it without having to pass a class prop.
The syntactical simplicity of Styled Components also can be a limitation. For example, with JSS I can mix and match classes that I pass to a component. Furthermore, creating selectors that target child component classes is also more challenging with Styled Components (in my opinion).
//JSS Code
const useStyles = makeStyles((theme) => ({
button: {
height: 100,
backgroundColor: "#6772e5",
boxShadow: "1 3px 4px rgba(50, 50, 93, 0.11)",
"&:hover": {
backgroundColor: "#ffd700"
},
marginTop: 8,
marginBottom: 8
}
}));
//Styled Component Code
const StyledButton = styled(Button)`
height: 100px;
background-color: #6772e5;
box-shadow: 1 3px 4px rgba(50, 50, 93, 0.11);
&:hover {
background-color: #ffd700;
}
margin-top: 8px;
margin-bottom: 8px;
`;
//JSX in return statement
<Button className={classes.button}>JSS</Button>
<StyledButton>Styled Component</StyledButton>Styled Components is on version 5 and JSS is on version 10. Most of the significant bugs and limitations have been worked out by now. As far as the code goes, pretty much anything you desire to accomplish can be accomplished with either library.
What is Unique to JSS?
Even though any styling can be accomplished with either library, JSS and Styled Components have unique virtues.
The package size of JSS is 465 kB, which is the smaller of the two libraries. If you are using React, react-jss is 770 kB (still smaller that Styled Components).
JSS has a variety of plugins, usually for modifying the styling syntax. For example, the “expanded” plugin let’s you expand out complex properties (like border) into JS object syntax.
Another very important feature of JSS is that IDEs automatically recognize it and give code support such as highlighting. Styled Components is working on adding syntax highlighting support in all IDEs but is not yet there.
Material-UI has adopted JSS as it’s primary styling syntax (although it supports Styled Components). This is significant because MUI is the leading React component library. Most MUI documentation examples use JSS. However, it also supports Styled Components and includes a few examples in the docs.
One final thing I particularly enjoyed about CSS-In-JS (as it’s officially known) is the active community. The discussion thread was very active and had high engagement.
Here’s one unique drawback: a lot of the links in the docs to examples don’t work. For example, try the links in the global and camel-case plugins…they 404.
What is Unique to Styled Components?
Styled Components has a package size of 1.18 MB. That’s significantly larger than JSS and I’m not sure what value-adds there are in SC to justify that difference.
Styled Components also has some plugin and tooling functionality. While JSS plugins focused mostly on syntax, SC plugins focus on functionality. For example, SC has tooling related to dead code, TypeScript debugging, and Jest testing support.
My favorite feature of Styled Components is it immediately creates a new reusable component. It’s simply less total code in most cases. In my opinion it is a more intuitive encapsulation and reusability experience.
Perhaps the biggest advantage is it uses CSS syntax instead of JS camel case for attribute names and values, i.e. ‘font-weight: bold‘ instead of fontWeight: 'bold'.
What is the Same in JSS and Styled Components?
There is lots of mutually supported functionality, but here’s some of the most important concepts:
- They both put unique classes on dom elements
- Both have theming
- Both facilitate dynamic prop passing
- There is a styled-jss plugin that allows for styled components on top of JSS.
In my opinion, they’ve both converged over the last few years to support commonly desired functionality. It largely comes down to opinion on which to use. In the next section I go over some of the most important decision factors.
Deciding Which to Use
Its a big decision to decide which libraries will form the foundation of a major project. Even though you really won’t go wrong with either Styled Components or JSS, I think the below thought exercise can help you make the choice. My suggested criteria in order of importance:
- What other libraries are you using? What do they require or recommend?
- Do you want to write CSS in traditional CSS syntax or in JavaScript syntax?
- Styled Components is a little more popular, so team members are more likely to have experience with it.
- If you still haven’t decided, consider the package sizes. That’s a nice “bright line” guidance. JSS is a significantly smaller package.
Both options will provide your next project with an excellent platform for code reuse, theming, dynamic styling with props, and other critical tools.
Resources
Here’s a good SO and Reddit discussion about the topic.
Here’s an in-depth look at both from Smashing Magazine.
Think you’re a JavaScript expert? Test yourself on these 50 difficult JavaScript questions.
