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:

7 TUI Libraries For Creating Interactive Terminal Apps

7 TUI libraries for creating interactive terminal apps

When writing applications, a good user interface is just as important as the actual app’s functionality. A good user interface […]

Yashodhan Joshi
Jun 14, 2024 ⋅ 18 min read
Expo Router Adoption Guide Overview Examples And Alternatives

Expo Router adoption guide: Overview, examples, and alternatives

Expo Router provides an excellent file-based routing solution with crucial features such as deep linking and native support.

Marie Starck
Jun 13, 2024 ⋅ 8 min read
Superglue Vs. Hotwire For Modern Frontend Development

Superglue vs. Hotwire for modern frontend development

Explore how Superglue and Hotwire revolutionize frontend development with HTML over the wire, enhancing performance, flexibility, and ease of use.

Frank Joseph
Jun 12, 2024 ⋅ 7 min read
Using Pocketbase To Build A Full Stack Application

Using PocketBase to build a full-stack application

PocketBase is a performant Go-based tool that comes with essential features like user auth, file uploads, access control rules, and more.

Rahul Padalkar
Jun 11, 2024 ⋅ 18 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