styled-components VS Fela

Styled components is a CSS-in-JS tool that bridges the gap between components and styling. The main goal of this tool is to provide us a flexible way to add custom styling to our components in a functional and reusable way.

CSS modules are not to be confused with mixins, as they serve the opposite purpose. While mixins are components or functions to be reused globally, modules are style sheets with a local scope used in a similar way as styled components in React.

In this blog tutorial, we will see how we can setup a ReactJs project with Typescript, styled-components and redux toolkit.

Although I used styled components for styling , I was too lazy to make some styles on my own , so I switched to ChakraUI (A React UI component library).

learn styled-components, its very doubtful you will go back to css files. https://www.npmjs.com/package/styled-components

I'm not being facetious, nor am I encouraging the use of ID selectors. Heck, I rarely use them myself - most of the CSS I've written lately has been with styled-components, which generates class selectors. I'm simply explaining that a descendant selector that comprises an ID selector and a type selector is valid and giving you a simple example.

Styled Components

In general I recommend using styled-components or emotion. These directly attach CSS to your components in a scoped way so that your CSS files aren’t stepping on each other’s toes all the time and make sure styling is colocated with the component.

Not only that - after React got more popular - we started to place CSS in components as well (CSS-in-JS like this):

There are different ways to implement CSS In JS, most commonly using either framework-dependent or framework-agnostic libraries. Styled components are among the most popular of them with over 30,000+ stars on GitHub.

[Fela](https://fela.js.org/) and [Griffel](https://github.com/microsoft/griffel) are also not bad choice.