5 ms·
CSS in JS turned into a nightmare in our project once we decided to make it fast. CSS in JS usually do next things for each component mount: 1) Parse CSS 2) H
by ex3ndr 8y ago
CSS in JS turned into a nightmare in our project once we decided to make it fast. CSS in JS usually do next things for each component mount:
1) Parse CSS
2) Hash styles object
3) Serizlize and auto-prefix CSS back (or just write to StyleSheets API)
That is actually a nightmare for performance. You can say that you can export static styles via babel and everything will be fast again (since 90% of your styles are static), but styled-components, glamorous, emotion and friends all ditched static styles exporting feature.
On the other side we thought that composing styles is a good thing, but it turns out to a complete mess where you have 100s of style overrides across the code instead of building a small component with appropriate API.
On the last side i personally came from mobile world. Most of mobile (native) devs tried to build their own "css" or manage styles in some "special" way that it used to be (constants in some static class). It turns out it adds almost zero profits and too much of maintenance. They are not helping you to simplify things if you wish to change something "everywhere" beside very simple things (dividers, borders, backgrounds, tint color) and everything is just became useless. Building real components is much much better.
Well, considering all this we have only one (!) CSS in JS library that satisfy this requirement: https://github.com/jsxstyle/jsxstyle https://github.com/jsxstyle/jsxstyle
It is fast, performant and completely static if it possible but it is not "fancy" in frontend community. As usual in frontend there are not much sense everywhere and popular libraries are usually a complete crap if you really value your users.
- matte_black 8y agoCan you give an objective example of the magnitude of difference in performance?
- ex3ndr 8y agoWe have built our own jsxstyle-like library and we got about 10-100x improvement. It is really super fast since all your layout is compiled to a simple divs with a classNames whenever possible (almost always) and it became zero-runtime styling and this is awesome, this is the only way to build fast app - do nothing in your app if you can.
- vcarl 8y agoWe've not run into any performance issues in our 80k LoC JS app using styled components 100%. I'm not sure it's accurate to say it's ditched static styles exporting, with babel-plugin-styled-components we're getting a handful of style tags on the page that are generated at build time.
- ex3ndr 8y agoNot sure about your stack, but styled-components declared it as deprecated and babel-plugin-styled-components page doesn't show anything about static style extractions. I think it depends on your requirements, we have a messaging app and i need to switch chats in < 30ms without caching of pages. Otherwise page will be junky for non-chrome browsers.
- vcarl 8y agoNot sure where you're getting that it's deprecated. Both the repo itself and the styled components website list it as a highly recommended (but optional) addition. https://www.styled-components.com/docs/tooling#babel-plugin https://www.styled-components.com/docs/tooling#babel-plugin
- ex3ndr 8y agoPlugin is not deprecated, sure, but it doesn't do static style extraction: `This plugin adds support for server-side rendering, minification of styles, and a nicer debugging experience.`
- tracker1 8y agoI've been using material-ui which uses react-jss, and that has performed more than adequately for our use case.