In this post we’ll see an overview of CSS-in-JS frameworks that are the most in-demand in the developer community in 2021.

Introduction

A few years ago, component-based JavaScript frameworks were the hottest thing in the web developer community, especially among frontend developers. CSS-in-JS is a newer way to look at styling these components with JavaScript inside the components themselves. CSS on its own has a few limitations that we will not get into in this article, including the way it is cascading in nature, the lack of dynamic functionality and even scoping.

Imagine that you write your styles in JavaScript or TypeScript inside your React, Angular or Vue component. That is exactly what CSS-in-JS offers. It relies on JavaScript module implementation, seeing as CSS does not have modules, and it ensures a scope follows styling rules. CSS on its own has no scoping mechanisms, so this approach solves for that.

“For three years, I have styled my web apps without any .css files. Instead, I have written all the CSS in JavaScript. … I can add, change and delete CSS without any unexpected consequences. My changes to the styling of a component will not affect anything else. If I delete a component, I delete its CSS too. No more append-only stylesheets!” — Max Stoiber

There are a few CSS-in-JS frameworks available for use, and we will see an overview of some of the most in-demand ones.

• CSS Modules
• Styled-Components
• Emotion
• Styled System

#css #javascript #programming #developer