Hi.

CSS IN JS

without the hype

@theharrisjose

Css has issues

whether you want to admit it or not

No Scoping

Everything is global


And there is no way to enforce

local variables

Dependency Management

JS has a module systems and package managers
 

HTML has dependency management via JS


CSS has the cascade - which is never a good thing

sucks

No way to share constants

There is no way to get data into and out of CSS

Which means you have to keep stuff updated....manually. This does not scale.

No Dynamism

at all

Dead Code Elimination

There is basically no equivalent of tree shaking.

The best you can do is render your entire app and then try to figure out what's not used.

 

in css is a joke

*which also does not work well enough

But isn't CSS evolving?

Flexbox

CSS Grid

Houdini

Are all cool But
they don't solve
our problems

I don't even know what this is, tbh

Css was designed for styling documents.

Not apps.

Syle to be a function of state

^ I totally stole this line from the internet

When styling apps, you want

Enter CSS in JS

https://emotion.sh/

https://styled-components.com/

A 404 page I recently made

Has both global css (a .css file) and locally scoped css (in js).

Scoped by Default

Dependency Management via JS

Share Constants via Props

Dynamic Styles based on conditions
(props and state)

Dead code elimination Built in

But what about CSS modules?

Scoped by Default

Dependency Management

Share Constants via Props

Dynamic Styles based on conditions
(props and state)


Dead code elimination

ember-component-css

Libraries worth Checking out

Emotion
Styled Components

CXS
Aphrodite

Thanks, I guess.