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.