2021-07-08
1890
#react
Nwose Lotanna
260
Jul 8, 2021 ⋅ 6 min read

Benefits of using styled-components in React

Nwose Lotanna Web Developer and Writer

Recent posts:

Implementing In App Updates For React Native Apps

Implementing in-app updates for React Native apps

Implementing OTA in-app updates in React Native apps can streamline the update process, preventing delays that hinder overall productivity.

Nelson Michael
Mar 1, 2024 ⋅ 7 min read
Exploring Stylex And The New Generation Of Styling Libraries

Exploring StyleX and the new generation of styling libraries

StyleX is a build-time, type-safe CSS-in-JS library recently open sourced by Meta. Explore StyleX and the evolution of styling libraries.

Ibadehin Mojeed
Feb 29, 2024 ⋅ 9 min read
Building High Performance Ecommerce Sites With Astro

Building high-performance ecommerce sites with Astro

Learn to set up a completely custom Astro ecommerce implementation that’s also highly performant and type-safe in this straightforward guide.

Onuorah Bonaventure
Feb 28, 2024 ⋅ 64 min read
Implementing Vector Search With Open Ai, Next Js, And Supabase

Implementing vector search with OpenAI, Next.js, and Supabase

Let’s build a Next.js app that implements vector search using Supabase and OpenAI to offer better search experiences for users.

Peter Ekene Eze
Feb 27, 2024 ⋅ 11 min read
View all posts

7 Replies to "Benefits of using styled-components in React"

  1. Reasons not to use styled components
    Extra page weight as you add lots of extra divs to style your components
    More page weight as you need to include a library to replace something you get for free in all browsers
    Less code -re-use compared to using proper CSS
    Slower than using stylesheets as there is no caching ~ bad for the user
    Slower as you have to create inject the styles into the head on each page load
    Hard to get a consistent style across a site.

    I interview a lot of devs who cannot think of a single reason why styled components have any issues/downside, I don’t mind if people want to use them but no library comes without some downside. I really wish people would focus on the user before using any library, rather than focus on what is comfortable for them as a developer.

    1. Same thing apply for stylesheet in case of adding styles and classes at the top of html in head tag. You can render a component and check!
      By the way with the power of browsers these days, those weights you mentioned are almost non performant at all.

  2. Thanks so much for this. Performance and caching are huge. Another developer-related issue that I have is complex functions written directly within the css in style-components. You end up troubleshooting code just to get a style to load in some cases.

  3. “Extra page weight as you add lots of extra divs to style your components”

    Not sure where you got that from. It doesn’t add anything to the markup apart from classes.

  4. > Extra page weight as you add lots of extra divs to style your components

    Depends on how you create the Styled Components, you can achieve same DOM tree with SCSS or CSS and Styled Components

    > More page weight as you need to include a library to replace something you get for free in all browsers

    Yeah though you optimize it at Component level. As you are using React, ofcourse there had bee tradeoff in that case as well, you are creating DOM nodes one by one.

    > Less code -re-use compared to using proper CSS

    Properly done Design System with Styled Components will achieve much higher code reuse

    > Slower than using stylesheets as there is no caching ~ bad for the user

    If using CSS or SCSS, the CSS is exported to One File with webpack which is more heavier and maybe better cached but whole CSS has been delivered to user even if it is not needed. So we have slower and less performant Initial page load

    > Slower as you have to create inject the styles into the head on each page load

    Not slower as you are injecting on the component specific styles’ classes and is very small. Combined with Components delivered on need basis, not all the styles get inserted to the HEAD, but the needed ones. Hence not too much is lost.

    > Hard to get a consistent style across a site.

    Like I said, if done properly, you can have really great experience for site wide experience.

    —-

    > I really wish people would focus on the user before using any library, rather than focus on what is comfortable for them as a developer.

    Of course we are making for user but we don’t wanna spend lot of time debugging fixing CSS quirks because of Cascading effects.

    I would prefer very less cascaded levels so that debugging is easy.

    As the class names are generated dynamically, there are small, small as 7-10 characters. While CSS or SCSS, need to use ideologies like BEM for less Cascading Conflicts in DOM.

    Small class names means saving package size as that class name was not present two times in same bundle (once in CSS and once in HTML)

  5. I really don’t get why this is so popular. Whenever I come across it I’m put off by how ugly it makes the DOM look in developer tools – instead of clean classes like ‘header subheader’ it just adds so much noise to the HTML. Don’t think it’s very good for writing DRY styles either unless I’m missing something. Importing a properly scoped .scss file in every component is so much cleaner IMO.

Leave a Reply