# CSS-in-JS: The Good, the Bad, and the Ugly - Maya Shavin
###### tags: `jsdc2019`

{%hackmd @JSDC-tw/2019-announcement %}

## Reference
- [MayaShavin@Twitter](https://twitter.com/MayaShavin)
- [mayashavin@GitHub](https://github.com/mayashavin)
- [Maya Shavin](https://www.mayashavin.com)

[Cloudinary](https://cloudinary.com/)

### Timeline (History)
- 1991 (HTML)
- 1995 (CSS1)
- 2002
- 2005 (jQery, AJAX)
- 2008 (SASS)
- 2010 (AngularJS, Backbone)
- 2011 (CSS 3.0)
- 2013 (React, JSX)
- 2014
- 2017 (CSS In JS)

### CSS in JS

#### Scaling (Issues)

- global namespace
- implicit dependencies
- code maintenance(DEAD code)
- minification (minimize css file)
- sharing constants in whole app
- naming

<h2 class="42">
     I'm happy
</h2>

##### The (not) old style

- OOCSS & SMACSS
- BEM
- CSS processors (sass,less)

**Problems above method:**

- **NOT** pure CSS
- **HARD** to migrate
- **NAMING!**
- still **BIG**

### Real-Time CSS modifies

#### css variable (not support IE)

var()

- CSS In JS Concept
- React Inline Style
-> ~~readability~~ ==X==
-> ~~scalability~~ ==X==
-> ~~animations~~ ==X==
-> ... ==X==

> Inline but not Inline

- Scoped CSS per component
- extendable CSS in global scope

### CSS MODULCES (2015)
- default option in CLI

**GOOD**
- Scoped
-
- Shareable

**Features:**
- Full CSS Support
- Pre-Processor support
- Dynamic modifiers
- Reusable CSS
- Random class generator

> It's stil **not really** CSS in JS

**Problems:**
NO Easy way for theming
full extendable css in global scope
naming

### Styled Component

**The Good:**

- Super scoped (no extra class)
- Easy to theme
- NO Dead code (you see what you write)
- Extendable (nested class)
- Load once
- Themeable
- One standard
- Portable
- No re-render

====== Live Coding =====

### ==No more css file !==

**problems:**

- interactive component (performance issue)
- first page render (download CSS/JS -> Parse CSS/ Inject to Stylesheet -> HTML Paint)
- security
- No scope
- Non deterministic
- Bundle size
- Dead code(somewhere)
- React Native ==X==

**The ugly:**
- Portability
- One standard?
- Context switch
- Messy code

#### Scaling & Sharing

- Designer (only) know CSS
- css in js only for React (how to use with Vue, etc...)
- render problem
- security

### ==It's still CSS! (not JS)==

## When?

#### css in js
- react native apps
- simple and will not be changed
- theme is critical
- need dynamic styling
- complex and large app

#### css
- security
- third-party libs
- medium size app
- not support IE11