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
-
History
-
Demo
-
How it works
-
Six Reasons
-
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
