Girls who JavaScript

styled-components utilises tagged template literals to style your components.

It removes the mapping between components and styles. This means that when you’re defining your styles, you’re actually creating a normal React component, that has your styles attached to it.

Outline

React popularized a new way of building user interfaces – components. By splitting our app into small, digestible parts the system as a whole becomes a lot easier to understand.
CSS was made in an era where documents were the height of the web. It doesn’t fit easily into component-based systems, making styling one of the pain points of building React applications.
What if we took the best of JavaScript and the best of CSS, and combined them together to create the ultimate solution? Glen Maddern (CSS Modules co-creator) and I sat down and starting thinking about styling in this new paradigm. Let’s talk about what we thought about and why we arrived where we did – 💅 styled-components.

Speaker bio

In relationship with JS from past 5 yrs. Employee of Flipkart and explorer from heart.

I used styled components in one of our new app. Loved it . Migrated our old apps to check performance and found it even more better.