The faster you can deliver CSS to the client, the better you can optimize the page’s time to first paint. More than a half-second delay in the first paint poses a greater risk of user dissatisfaction and can negatively affect the app’s goals. First paint is the event when the browser prints the first pixel on the screen for the page requested. This process causes CSS to block the page from rendering and delays the first paint of the requested page. Now, the browser is ready to provide styles to the rendered HTML according to the CSS cascade rules.

After, the browser creates CSSOM using all the external and internal CSS information. Traditionally, the browser loads HTML first, then CSS from all the external resources. Render-blocking and CSSīefore going further into what’s best and what’s not, let’s first discuss a bit about rendering problems caused specifically by CSS. This article uses React - by far, the most popular JavaScript frontend library - to discuss the application of CSS-in-JS, along with its notable pros and cons. Note that any JavaScript frontend framework or library can implement the idea of CSS-in-JS. Ensure that you are familiar with both these web technologies before moving forward. Recommendations for where to use CSS ModuleĪll code snippets and demos presented in this article feature React and CSS.Recommendations for where to use CSS-in-JS.

The purpose of this article is to help you choose between CSS and CSS-in-JS for your upcoming projects in light of the current state of modern CSS and how it is likely to change in the future.

However, there are also some new CSS features in the pipeline that should address some of these concerns in the near future. This is mostly because CSS-in-JS is getting called out for its performance concerns. It’s likely that you have worked with CSS-in-JS before if you’re a React developer. One dilemma that developers commonly face when working with JavaScript frameworks is whether or not to use CSS-in-JS. Rahul Chhodde Follow I'm a software developer with over seven years of experience in different web technologies.

Css for js