Welcome to the

Six reasons why you should be using Styled Components

 

Presented by Tommy Marshall

survey.medallia.com/njs

How long it takes to learn

+

How long it takes to implement

*

# of Implementations

>

How fast I am now

The Opportunity Cost of Learning

  1. History

  2. Demo

  3. How it works

  4. Six Reasons

  5. Q/A

HISTORY

React helped us build reusable components by putting functionality back into our markup. JSX.

Isolation – Encapsulate styles in scopes. Prevent styles inside and outside of the scope from polluting each other.

Reusability Reuse and extend defined styles (like mixins and variables).

Utilities – Helpers to ease the calculation (like darkening a color), and reduce boilerplate code (like adding vendor prefixes).

FormidableLabs

Radium

CSS isn’t broken

This looks broken

This forced sacrificing developer experience and gave no added functionality to the user.

and Webpack Loaders

Back to writing CSS...

Demo

 

HOW IT WORKS

Styled Components use Tagged Template Literals. Basically, calling a function using backticks.

SIX REASONS

Why we chose Styled Components to style our apps.

1

We’re writing CSS

Back to writing CSS

Hovers

Pseudo-Elements

Complex Selectors

Media Queries

Nest and reference Styled Components

Override tag and set a native attribute

2

Ability to pass props

Pass prop to a function

3

Use all of JavaScript

So much cleaner than SASS

All the Conditionals

Use Element Queries

Enhanced Element Queries

One of Our Components

4

Themes

Styled Components

Using classNames

Complex Theming w/ Styled Components

Complex Theming with className

And so on...

For every color

5

React Native support

React Native

Web App

6

Javascript Ecosystem

Take your SASS mixin’s with you

polished.js.org

Testing utilities

React Transition Group

github.com/reactjs/react-transition-group

That’s all

medallia.com/careers

Styled Components

By Tommy Marshall

Styled Components

  • 2,000