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
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
350
slogパッケージの深掘り
integral0515
0
160
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
350
NEWT Backend Evolution
xpromx
1
160
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.9k
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
160
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
250
型で語るカタ
irof
1
850
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.5k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Code Review Best Practice
trishagee
69
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
RailsConf 2023
tenderlove
30
1.2k
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