From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Pros and cons of CSS-in-JS

Pros and cons of CSS-in-JS

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Pros and cons of CSS-in-JS

“

Welcome back, let's discuss the pros of using CSS in JS libraries. We can get rid of the component scoped styles, that means we get no global conflicts like the inline styles way. We can enable dynamic conditioning and theme-based supports. And we can have all-in-one file like your JavaScript and CSS, which can boost developer speed. The cons for using CSS in JS libraries contains the slight runtime in performance overheads because the styles has to be injected directly onto the runtime into your component. Styles are not always visible in browser as dev tools. Let me show you what I mean by this. This is the output of our rendered component which is being rendered by CSS and JS libraries. If I right click and inspect over it and I go to this style tab, you can see that your Your style is not actually applying onto your elements, rather it has a class assigned to it and this class has some generated names. You can see for the p tag, h2 and div both and onto this class you have all the…

Contents