Girls who JavaScript

A monthly meetup group for women who write JavaScript

CSS in JS : An intro to styled components

Submitted by shivani tiwari (@shivani9094) on Monday, 12 March 2018

videocam_off

Technical level

Intermediate

Status

Submitted

Vote on this proposal

Login to vote

Total votes:  +1

Abstract

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.

Comments

Login with Twitter or Google to leave a comment