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
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
160
Components done right™
rofrischmann
0
130
Other Decks in Programming
See All in Programming
Site Reliability Engineering for GMO
pyama86
6
930
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
2.1k
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
180
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
250
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
740
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.8k
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
310
Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
77web
4
110
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
5
4.6k
Featured
See All Featured
Unsuck your backbone
ammeep
662
57k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
What's new in Ruby 2.0
geeforr
337
31k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Into the Great Unknown - MozCon
thekraken
10
980
Practical Orchestrator
shlominoach
181
9.7k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Designing for Performance
lara
601
67k
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