CSS vs. CSS-in-JS: Which is the better approach for web design in 2023?
#discuss#css#beginners#tutorial
UgbabeOG

UgbabeOG @ugbabeog

About: 👨‍💻 front end developer [javascript, python, css]. Problem solver.

Joined:
Apr 9, 2023

CSS vs. CSS-in-JS: Which is the better approach for web design in 2023?

Publish Date: May 4 '23
29 29

With the rise of CSS-in-JS libraries such as styled-components and Emotion, there has been a growing debate about which approach is better for web design. In this discussion, let's hear your thoughts on whether CSS or CSS-in-JS is the better approach for web design in 2023.

Have you used CSS-in-JS libraries in your projects? Do you prefer using traditional CSS or do you find CSS-in-JS to be a better approach? Share your experiences and opinions in the comments below and let's discuss the pros and cons of both approaches.

Comments 29 total

  • Ben Halpern
    Ben HalpernMay 4, 2023

    While it depends, I think it's always worth considering erring on the side of the intents of the platform, and what the browser expects, prefers, and is developing.

    I've always thought proper native CSS (with compilers and libraries as needed) is still the right default approach.

  • Sherry Day
    Sherry DayMay 4, 2023

    As a developer, it sure does help when I can just manipulate the styles in the code, instead of the complex task of finding the styles and hoping I haven't broken anything else.

    • Luke Inglis
      Luke InglisMay 4, 2023

      Both of those issues can be solved with a sensible element naming scheme and the scoping provided by that.

      • Sherry Day
        Sherry DayMay 4, 2023

        I mean, yes, but this is often hard to get right, or goes south with the human problems of software development.

  • Erin Bensinger
    Erin BensingerMay 4, 2023

    Check out this article about CSS-in-JS from last year for some good arguments against it:

    srmagura

    Why We're Breaking Up with CSS-in-JS

    Sam Magura ・ Oct 16 '22 ・ 14 min read

    #javascript #react #css #typescript
    • Rense Bakker
      Rense BakkerMay 7, 2023

      The biggest argument from that article is about performance. While there may be some performance issues, if you use emotion in a certain way, this "way" of using emotion (using css method inside render) can easily be avoided. Its also not true that emotion doesn't work with SSR. I've used it just fine with Next's SSR, SSG and ISR although admittedly, it does require some extra configuration.

  • Khairunnisaas
    KhairunnisaasMay 5, 2023

    For me personally, I don't really like CSS-in-JS. I feel like my code looks cutlery. i know this is a dumb reason, but for me i prefer to write css in separate css file.

    • Rense Bakker
      Rense BakkerMay 7, 2023

      You can write your styles in a seperate file with CSS-in-js if you prefer 🤷

  • 𒎏Wii 🏳️‍⚧️
    𒎏Wii 🏳️‍⚧️May 5, 2023

    HTML that goes over the wires should be styled with CSS; HTML that gets generated from within JavaScript should attempt to benefit from these styles, then any additional styling will usually be specific to the element anyway, so it makes a bit more sense to keep it close to the associated logic (these days this will usually be a component).

  • Aytac Güley
    Aytac GüleyMay 5, 2023

    I prefer css or scss modules, css-in-js looks like inline styles for me. You fill one file with jsx or tsx, js or ts and css

    • Rense Bakker
      Rense BakkerMay 7, 2023

      Its not like inline styles at all though... People just pick and chose what they get upset about and use that as an argument to dismiss everything that doesn't follow their own convictions.

      • Aytac Güley
        Aytac GüleyMay 7, 2023

        The main idea about my comment was that, with that, you fill one file with all, in the end, yes they are not same but filling one file with all part is not good for my preferences

        • Rense Bakker
          Rense BakkerMay 7, 2023

          You can put your styles in seperate files with CSS-in-js if you want. The reason people don't do that is because there's no benefit to it.

  • Rense Bakker
    Rense BakkerMay 7, 2023

    Admittedly I haven't really written vanilla CSS in a long time, but I highly prefer CSS-in-js because it makes it (nearly) impossible to have any kind of styling collision. The benefit of being able to respond to runtime changes should also be an obvious one. What pisses me off is that people who dislike CSS-in-js, usually pretend that somehow CSS-in-js is something completely different to vanilla CSS... Its not. Its just CSS written inside JS code, so it can benefit from JS runtime. Oh yea and its camelcase instead of kebabcase :p

  • Pontakorn Paesaeng
    Pontakorn PaesaengMay 7, 2023

    I rarely used CSS-in-JS since I would just use Tailwind and DaisyUI right now. If I don't use React, I use CSS in the way framework wants me to do (e.g. style in Vue and Svelte)

    For large projects or projects I don't want to focus on styling, I use component libraries. I would need to use CSS-in-JS that my component framework used. Basically, if you don't want to design things yourself, CSS-in-JS probably came with UI kit except for DaisyUI or Tailwind-based ones.

    If I do need to style my components, I would use CSS as it has better IDE support. CSS module would solve collision problem also.

    • szeredaiakos
      szeredaiakosMay 7, 2023

      I had exactly this idea till color schemes for the app became a requirement. Then I felt blessed that we went with low (ish) level css. Me and many people on my team, we where doing css for decades so any library, framework, you name it .. has ultimately zero value to us. Scss does make the encapsulation issue easier but it's not a requirement.

  • ohidere
    ohidereMay 8, 2023

    This seems more like a Reddit post than it should be a Dev.to article, no?

  • Brendon Mecoy
    Brendon MecoyMay 8, 2023

    I go with scss every time, it is css with super powers...

  • Hendrik Ras
    Hendrik RasMay 9, 2023

    CSS-in-JS solutions can be beneficial in situations where scoping CSS becomes a thing. When for instance you have a large portal with multiple sub applications on one page that have conflicts in their CSS because they all want to override global properties.

    There are ways around that even if you do not want to use CSS-in-JS. But then you're talking IFrames.

    Personally I don't like to use it anymore, performance is one thing. In some cases you can see the styles changing as the page is loading.

    So if scoping is not a thing I tend to avoid it.

  • Jessica williams
    Jessica williams May 10, 2023

    both CSS and CSS-in-JS have their merits and are widely used in web design. CSS, the traditional approach, offers a familiar syntax, clear separation of concerns, and good browser support. It's ideal for simple projects and teams experienced in CSS. On the other hand, CSS-in-JS, which combines CSS and JavaScript, provides a more dynamic and component-based approach. It offers benefits like scoped styles, better encapsulation, and enhanced reusability. CSS-in-JS is well-suited for complex applications, dynamic theming, and teams that prefer a more JavaScript-centric workflow. Ultimately, the choice depends on the project requirements, team preferences, and skillsets available.

    • Rense Bakker
      Rense BakkerMay 10, 2023

      This is probably the most objective comment I've read in a while 👍

  • Bellot Twig
    Bellot TwigMay 10, 2023

    I used CSS for my furniture online UAE WEBSITE!

  • dongdongzhang
    dongdongzhangMay 11, 2023

    I will pick whatever the framework provides.

  • ReactJS Development Company
    ReactJS Development CompanyMay 11, 2023

    If you have a performance-critical application with complex UIs, CSS would be a suitable option for wed design services in 2023.

    On the other side, CSS-in-JS approach is better suited for applications that prioritize design systems over performance, or for applications where performance is not a critical concern.

  • pratiqdev
    pratiqdevMay 11, 2023

    I have enjoyed using styled-components / emotion / theme-ui / stitches / scss / sass / less but, I am often solving issues with js that can be solved (mostly) with css. The only performance 'issue' I discovered was FOC on the page while jss was being parsed - could be solved with a root stylesheet. Once vanilla CSS adopts nested selectors and some kind of mixins, I'll probably stick with css. Unless you are super critical of load times/perceived page speed - then use whatever makes your site look the best in the shortest time/code.

Add comment