When building a web application with React, one of the challenges apart from implementing the main logic of the application is styling and choosing the appropriate styling solutions for your application. By Osah Peter.
CSS-in-JS solutions leverage javascript in styling applications. This has benefits as it improves maintainability, brings in modularity in styling, and introduces “Dynamic styling” to applications. There are various CSS-in-JS solutions. However, we will take a look at the two most popularly used solutions, which are Linaria and Styled-components. We will take a look at their features as well as make comparisons between them based on features, performance, and ecosystem.
Linaria is one of the most popular CSS-in-JS solutions. It has over 7.1K GitHub stars and 260 GitHub forks. Linaria is a Zero-Runtime CSS in JS which means that it converts the CSS-in-JS codes into a separate .css file while creating the build for production. This is similar to how most CSS preprocessors, like SASS and LESS, operate.
Styled-Components is one of the most popular CSS-in-JS solutions. It has over 37.2K GitHub stars and 2.3K GitHub forks. Styled-components enables you to write actual CSS code to style your components. It also creates a layer of abstraction between components and styles, thereby eliminating the direct mapping between them. Good read!
[Read More]