HOME
|
COMMUNITY
|
BLOG
|
How Is Linaria Different From Emotion and Styled Components?

How Is Linaria Different From Emotion and Styled Components?

In short

Linaria, a CSS-in-JS library, sets itself apart by conducting build-time evaluation and extraction of CSS to static files, enhancing load times and runtime performance compared to Emotion and Styled Components.

Introduction

Recently we released our CSS in JS library - Linaria, which does build time evaluation and extraction of CSS to static files. We’ve been asked the same question over and over again, “How is it different from emotion?"

Linaria has a lot in common with Emotion and Styled Components regarding the API. However, the way Linaria works is completely different.

Emotion and Styled Components

In short, CSS in JS libraries such as Emotion and Styled Components parse and apply your styles when your page loads in the browser, Linaria extracts the styles to CSS files when you build your project (e.g. with webpack), and the CSS files are loaded normally.

Emotion used to have a static extraction mode, which was limited in the sense that it doesn’t support interpolations in the CSS string and can’t use many of Emotion’s features. Linaria will evaluate the interpolations such as JavaScript variables and functions in the CSS string at build time.

This approach has several advantages:

  • Improved load time because CSS and JavaScript can be loaded in parallel, unlike runtime CSS in JS libraries where the CSS is in the same bundle as JS
  • Improved runtime performance because no extra work such as parsing the CSS needs to be done at runtime
  • No style duplication between SSR’d CSS and the JavaScript bundle.
  • Since Linaria works at build time, you don’t need to have SSR setup to improve the time to first paint or for your page to work without JS

Why use Linaria?

Hope this clears it up. Also, check out Why use Linaria which lists more differences from other CSS-in-JS libraries.

If you still have questions, give me a shout.

React Galaxy City
Get our newsletter
Sign up

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook
Download

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.