Girls who JavaScript

A monthly meetup group for women who write JavaScript

shivani tiwari

@shivani9094

CSS in JS : An intro to styled components

Submitted Mar 12, 2018

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

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

A meetup for women who write JavaScript (or who want to learn JavaScript). Come discuss your work, interests, and ideas! Look out this space for future meetups. Want to present some interesting idea or talk about informative web development concepts you learnt recently, submit your talk here https:… more