29

I've researching about what's the best way to style your page in React application. I see a lot of libraries to style in react like Styled Components, Glamor, CSS Modules.

In my current project, I am using CSS Modules(mainly to get rid of css conflicts and page specific CSS). I googled a lot about why should I use styled components and CSS-in-JS but I couldn't get any concrete answer. So my question is that if there is actual performance benefit of using CSS-in-JS or styled components or it's just syntactic sugar.

Bharat Soni
  • 2,824
  • 6
  • 23
  • 48
  • *"I googled a lot about why should I use styled components and CSS-in-JS"* for the same reason that you do: *"mainly to get rid of css conflicts"* – Thomas Sep 19 '18 at 05:27
  • 2
    @Thomas I'm sorry but I didn't get your point here.. – Bharat Soni Sep 19 '18 at 05:35
  • 1
    @BharatSoni the issue is that these kind of questions can ignite long discussions which are better left to other forums. I've asked some myself, and although they are really useful to people searching for same tech in the future, SO generally closes them down to reduce noise. Maybe there is another forum for it. – kumarharsh Sep 19 '18 at 09:28
  • 3
    [caution, harsh opinion] All the work of the past years in that field being undone by CSS-in-JS. They multiply in libraries like bunnies in mating season, and in webpack plugins like a plague. I blame lack of minimal sense of organization and despise of devs to layout matters. KISS principle, SoC and good practices are slowing dying in the front-end word. – Andre Figueiredo Jan 07 '19 at 15:13

3 Answers3

22

I have experience with both technologies, have used Radium (another CSS in JS library) and am currently using CSS modules in my projects. Styled components are definitely much better than Radium because they let you style :hover states, etc. But in my opinion, CSS modules are still the best bet, especially if you see that your project is going to grow bigger than 10-50 components. Code sharing across CSS in JS libraries is a nightmare. On the other hand, CSS modules let you compose other classes, import variables from other CSS files and even JS can import variables from CSS.

kumarharsh
  • 18,961
  • 8
  • 72
  • 100
  • 3
    did you notice any performance issues in any of the approaches.. – Bharat Soni Sep 19 '18 at 05:47
  • emotion-js does all these things, I recommend it – Daniel Lizik Sep 19 '18 at 07:17
  • 2
    @DanielLizik you can do all those things in plain old CSS also, using CSS-Modules gives you the ability to abstract page specific CSS. why do I need emotion-js or any other library. that's the main question here. – Bharat Soni Sep 19 '18 at 08:21
  • CSS modules doesn't have any performance issues as far as I noticed. Radium had a ton of them - replacing inline styles is a more expensive process, but I don't think styled component would run into the same issues as it outputs `style` nodes. – kumarharsh Sep 19 '18 at 09:25
10

One of the reasons I love styled components more than any other way of writing css in a React based ecosystem is that it enforces the best practices. As somebody wrote up there that code sharing while using styled components is a nightmare and I can't agree more and thats where the enforcement part comes in. If you are not writing really modular components which is how a React component hierarchy should be designed (atomic components composed to build a function rich modules ), you surely are going to rewrite similar styles a lot of times. But if you can break and compose your components in a really bottom-up fashion using styled components (or even inline styles if you may prefer so), code-sharing is not a problem anymore. Further code sharing shouldn't be a an issue discussed at styling level, sharing encapsulations should rather be a component level stuff in most of the cases. CSS modules is in my opinion a mere className scope limiting tool while styled components provide a more declarative approach to styling in React based projects.

Coming on to one of the cons that I have not been able to wrap my head around is the kind of nested component structure Styled components lead to. I have tried to remain more semantically aware while naming my style components but I am sure there might be other technique to do something about it. I don't find it much of a problem myself and hence haven't put much of an effort towards it.

Styled components would probably be a bit less performant that css modules because there certainly are overheads involved in creating components for styling and rendering them but that would be a miniscule difference.

sudheer singh
  • 862
  • 1
  • 9
  • 23
0

Can use normal HTML attributes, you can mix in JS if you want to, it supports states, nesting and media queries. And no, it will not all end up in style="" but create a “real” class= attribute and pull out the CSS into head, just like css-modules.

It even allows you to style custom components (not only HTML ones) if they only accept className as prop, so:

const Button = (props) => <button className={props.className}>{props.children}</button>

const CustomButton = styled(Button) display: inline-block; padding: 5px; const Item = () => Click me!

Even though it's also have downside like other technology. Main thing is sharing code between multiple projects could become very harder

If your priority is the speed, glamorous or styled-components is exactly what you could use in your web apps. Writing styles in strings for styled-components may be something unusual, but the visitors will appreciate the fast loaded web page. If you decide to use styled-components, do not forget to install plugin to support syntax highlighting in strings or maybe help creating a new one.

Sass/css and inline styles are also pretty fast, but if you decide to reuse your code for your React Native app be prepared to rewrite your stylesheets. But on the other hand, css and other style preprocessors are a good choice for web applications.

MK Vimalan
  • 1,213
  • 14
  • 28
  • I guess, you're telling another approach to style the component. My question is that if there is any actual benefit of using styled components or any other lib over `css modules`. – Bharat Soni Sep 19 '18 at 05:34
  • do you have any data to backup the theory that Glamorous / Styled-Componrnts are faster than CSS Modules or plain CSS? – Bharat Soni Sep 19 '18 at 06:08
  • If you want to run the tests on your machine, you can download the full code on https://github.com/MichalSzorad/styling-react. You can follow the guide in README.md in order to get the tests done. – MK Vimalan Sep 19 '18 at 06:18
  • 1
    [this comment](https://blog.primehammer.com/the-performance-of-styled-react-components/#comment-22) in the link gave says PostCSS will still be faster... – Bharat Soni Sep 19 '18 at 08:15