5 ms·

This is an apples to oranges comparison -- a run-time compiled stylesheet vs. a statically-generated stylesheet. Styled Components has options for statically-ge

This is an apples to oranges comparison -- a run-time compiled stylesheet vs. a statically-generated stylesheet. Styled Components has options for statically-generating their stylesheets (https://styled-components.com/docs/advanced#server-side-rendering https://styled-components.com/docs/advanced#server-side-rend...), so why wouldn't you compare those?

NegativeLatency 5y ago
Might not be a fair comparison, but there are people who are looking at changing up how their css is written so it makes sense to be aware of the differences in performance.
- jonorsi 5y ago
  Definitely should be aware, and I would highly recommend static files over large JS apps. The options are there to have both now with frameworks like Gatsby and Next.
  - fullstackchris 5y ago
    Can confirm from multiple sites, Gatsby with CSS modules runs like lightning
andrewingram 5y ago
You linked to server side rendering, not static extraction of styles, did you mean something else? The point of static extraction (something the current wave of new CSS-in-JS libraries seem to be focusing on), is to generate all the style sheets at build time and serve them as regular CSS files — so that your styles don’t inflate your JS bundles (a problem most older CSS-in-JS libraries have).
- jonorsi 5y ago
  SSR would extract all the styles out for the styled components, but I guess now it would have an advantage as all the html/js would be as well. My point is, the comparison seems more “js runtime stylesheets” vs “regular static stylesheets.” Styled Components, or CSS-in-JS, isn’t really the main focus here. There are options to get the static stylesheets generated, and I predict most CSS-in-JS frameworks will eventually provide the tools to do so.
  - andrewingram 5y ago
    With conventional CSS-in-JS solutions like emotion and styled-components, SSR with these libraries still extracts the stylesheets at run-time, so it's not static extraction -- where the extraction is done at build-time. And your style definitions still live in your code bundles -- inflating the size. Both emotion and styled-components have dabbled in supporting static (build-time) extraction, but it's actually a hard problem to solve when you have such flexible APIs. The libraries that have cropped up to support this notion of near-zero runtime CSS-in-JS (Linaria, Astroturf, vanilla-extract, and more) do so by providing tighter constraints surrounding what you can and can't do.
    - jonorsi 5y ago
      SSR (at least with Gatsby) extracts the styles at build-time.
      - andrewingram 5y ago
        styled-components can do automatic injection of critical CSS into the page HTML, but doesn't do static extraction of stylesheets.

NegativeLatency 5y ago

Might not be a fair comparison, but there are people who are looking at changing up how their css is written so it makes sense to be aware of the differences in performance.

jonorsi 5y ago
Definitely should be aware, and I would highly recommend static files over large JS apps. The options are there to have both now with frameworks like Gatsby and Next.
- fullstackchris 5y ago
  Can confirm from multiple sites, Gatsby with CSS modules runs like lightning

andrewingram 5y ago

You linked to server side rendering, not static extraction of styles, did you mean something else? The point of static extraction (something the current wave of new CSS-in-JS libraries seem to be focusing on), is to generate all the style sheets at build time and serve them as regular CSS files — so that your styles don’t inflate your JS bundles (a problem most older CSS-in-JS libraries have).

jonorsi 5y ago
SSR would extract all the styles out for the styled components, but I guess now it would have an advantage as all the html/js would be as well. My point is, the comparison seems more “js runtime stylesheets” vs “regular static stylesheets.” Styled Components, or CSS-in-JS, isn’t really the main focus here. There are options to get the static stylesheets generated, and I predict most CSS-in-JS frameworks will eventually provide the tools to do so.
- andrewingram 5y ago
  With conventional CSS-in-JS solutions like emotion and styled-components, SSR with these libraries still extracts the stylesheets at run-time, so it's not static extraction -- where the extraction is done at build-time. And your style definitions still live in your code bundles -- inflating the size. Both emotion and styled-components have dabbled in supporting static (build-time) extraction, but it's actually a hard problem to solve when you have such flexible APIs. The libraries that have cropped up to support this notion of near-zero runtime CSS-in-JS (Linaria, Astroturf, vanilla-extract, and more) do so by providing tighter constraints surrounding what you can and can't do.
  - jonorsi 5y ago
    SSR (at least with Gatsby) extracts the styles at build-time.
    - andrewingram 5y ago
      styled-components can do automatic injection of critical CSS into the page HTML, but doesn't do static extraction of stylesheets.