3 ms·
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
by tomduncalf 5y ago
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 5y agoIt'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 5y ago> 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-rendering 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!