Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS in JS: The Good & Bad Parts
Search
Robin Frischmann
October 25, 2017
Programming
6
2.3k
CSS in JS: The Good & Bad Parts
Slides for my talk at ReactiveConf 2017 in Bratislava, Slovakia.
Robin Frischmann
October 25, 2017
Tweet
Share
More Decks by Robin Frischmann
See All by Robin Frischmann
Reusability: Sharing components with joy
rofrischmann
1
230
Components done right™
rofrischmann
0
170
Other Decks in Programming
See All in Programming
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
200
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1k
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
590
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.2k
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
2
230
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
25
9.7k
Ruby Parser progress report 2025
yui_knk
1
290
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
320
RDoc meets YARD
okuramasafumi
4
160
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
230
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
690
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.6k
Agile that works and the tools we love
rasmusluckow
330
21k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Navigating Team Friction
lara
189
15k
How STYLIGHT went responsive
nonsquared
100
5.8k
Music & Morning Musume
bryan
46
6.8k
Transcript
CSS in JS The Good & Bad Parts ReactiveConf 2017
Robin Frischmann @rofrischmann @rofrischmann
None
rofrischmann/fela
Who is already familiar with CSS in JS ?
CSS in JS 101
CSS in JS !!!== inline style
const style = { fontSize: 12, color: 'red', ':hover': {
color: 'blue' }, '@media (min-width:320px)' { fontSize: 12 } } const style = ` font-size: 12px; color: red; &:hover { color: blue; } @media (min-width:320px) { font-size: 14px; } } ` Objects Template strings
The Problems
Choosing the “right” library 1
• aphrodite • babel-plugin-css- in-js • babel-plugin-pre- style • bloody-react-styled
• classy • csjs • css-constructor • css-light • css-loader • css-ns • cssobj • cssx-loader • emotion • es-css-modules • glamor • glamorous • hyperstyles • i-css • j2c • jsxstyle • linaria • pre-style • radium • react-css-builder • react-css- components • react-css-modules • react-cssom • react-cxs • react-fela • react-free-style • react-inline-css • react-inline-style • react-inline • react-jss • react-look • react-native-web • react-statics-styles • react-styl • react-style • react-styleable • react-stylematic • react-theme • react-vstyle • reactcss • restyles • scope-styles • smart-css • stile-react-media- queries • stilr • style-it • styled-components • styled-jsx • styletron-react • styling • superstyle • typestyle • uranium
Use what works for you!
1. Objects or Template Strings? 2. Working with Designers? 3.
Simplicity or Flexibility? 4. React-centric or Framework-agnostic? 5. Server-side Rendering?
None
Not everyone is used to JavaScript 2
1. Choosing a library is hard 2. Using CSS in
JS does not always turn out to be a good choice at all
The Benefits
It’s JavaScript! 1
Who has used or is using a preprocessor like Sass,
Less or Stylus? ?
JavaScript everywhere!
$primary-color = red .button { color: $primary-color; padding: 15px 20px;
font-size: 20px; } const primaryColor = 'red' const buttonStyle = { color: primaryColor, padding: '15px 20px', fontSize: 20 } (S)CSS JS
$vendors: "-webkit-", "-ms-", ""; @mixin prefix($property, $value) { @each $vendor
in $vendors { !#{$vendor}!#{$property}: !#{$value}; } } .button { @include prefix( 'border-radius', '5px' ) } const vendors = ['-webkit-', '-ms-', ''] function prefix(property, value) { return vendors.reduce( (style, vendor) !=> { style[vendor + property] = value return style }, {} ) } const buttonStyle = { !!...prefix( 'border-radius', '5px' ) } SCSS JS
Ecosystem
styled-components/polished
Computers do the hard work 2
– Phil Karlton “There are only two hard things in
Computer Science: cache invalidation and naming things.”
Naming CSS classes is hard
BEM smacss.com oocss.org getbem.com OOCSS SMACSS
Conventions !!!== enforced
Computers for the rescue!
Class Names? Non of my business!
– Alan B Smith “[…] the appeal of CSS-in-JS is
not simplicity, rather predictability and consistency.” Source: https://hackernoon.com/why-we-use-styled-components-at-decisiv-a8ac6e1507ac
Predictable Styling 3
Who has ever accidentally destroyed the layout or styles of
some part of the application, while actually working on something completely different? ?
const view = () !=> ( <div className={ 'text_green' }>
Some Text !</div> ) .text_green { color: green } JS(X) CSS
const view = state !=> ( <div className={ state.error ?
'text_red' : 'text_green' }> Some Text !</div> ) .text_red { color: red } .text_green { color: green } JS(X) CSS
const view = state !=> ( <div className={ state.error ?
'text_red' : 'text_green' }> Some Text !</div> ) .text_red { font-size: 20px; color: yellow; } .text_green { color: green } JS(X) CSS
UI = f(state)
#1 What is displayed #2 How is it displayed
How What Markup Styling HTML CSS
UI = f(state)
Style = f(state)
import { css } from 'any-css-in-js-library' const style = state
!=> ({ color: state.error ? 'red' : 'green' }) const view = state !=> ( <div className={css(style(state))}> Simple Text !</div> ) JS(X)
- Choosing a library is hard - Using CSS in
JS is not necessarily the best choice ✓ Power of JavaScript ✓ Unique generated classes ✓ Predictable UI Benefits Problems
@rofrischmann @rofrischmann
Thank you! @rofrischmann @rofrischmann