[HN Gopher] Demystifying Styled Components
       ___________________________________________________________________
        
       Demystifying Styled Components
        
       Author : enigmatic02
       Score  : 23 points
       Date   : 2021-06-22 00:20 UTC (2 days ago)
        
 (HTM) web link (www.joshwcomeau.com)
 (TXT) w3m dump (www.joshwcomeau.com)
        
       | philwelch wrote:
       | Speaking as a grumpy and primarily backend developer, how is this
       | fundamentally any different from old-fashioned <FONT> tags?
        
         | the_gipsy wrote:
         | The context has changed: for documents you'd want style
         | separated from structure. With apps, some people strive for
         | isolated components instead.
        
       | tomduncalf wrote:
       | Fantastic write up! Very clear approach to breaking it down into
       | understandable (simplified) chunks and piecing them together.
       | Cleared up a few things I hadn't thought too deeply about with
       | styled-components, and I didn't know until now you could used CSS
       | variables with it like that. Thanks!
       | 
       | Big fan of styled-components here. Feels like just the right
       | level of abstraction over styles when working with React for me.
        
         | brundolf wrote:
         | It's a slick API, but it's worth noting that they come with
         | significant runtime overhead. It may not matter for you
         | depending on the type of app, but they create multiple times as
         | many React component instances in memory and they force some
         | extra work to be done on every render. Using them also means
         | your CSS is blocked by your JS on initial load, instead of
         | being a separate file that can be loaded and rendered in
         | parallel.
        
           | tshaddox wrote:
           | > Using them also means your CSS is blocked by your JS on
           | initial load, instead of being a separate file that can be
           | loaded and rendered in parallel.
           | 
           | styled-components supports SSR (server-side rendering). Each
           | page's HTML response from the server will contain a <style>
           | tag which contains only the styles that were generated during
           | the React render for the page.
           | 
           | https://styled-components.com/docs/advanced#server-side-
           | rend...
           | 
           | And if you're not using SSR, then it probably won't matter
           | that your CSS is blocked by your JS, since your HTML will
           | also be blocked by your JS!
        
       | chrisweekly wrote:
       | I have to ask: could someone please provide a good reason to
       | prefer styled-components to emotion? Emotion supports a superset
       | of s-c's features with comparable (or superior) performance.
        
       | badbanana wrote:
       | I also loved a similar article by my colleague.
       | 
       | He reverse engineered the api implementing the basic
       | functionality, https://makersden.io/blog/reverse-engineering-
       | styled-compone...
        
       ___________________________________________________________________
       (page generated 2021-06-24 23:01 UTC)