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.2k
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
200
Components done right™
rofrischmann
0
150
Other Decks in Programming
See All in Programming
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
GAEログのコスト削減
mot_techtalk
0
110
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
It's Worth the Effort
3n
184
28k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Visualization
eitanlees
146
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
RailsConf 2023
tenderlove
29
1k
Statistics for Hackers
jakevdp
797
220k
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