Slide 1

Slide 1 text

Will JS Kill CSS?

Slide 2

Slide 2 text

@bruno2ms Bruno Mendes Soares UX/UI Designer São Paulo, Brazil /br2msi /bruno2ms

Slide 3

Slide 3 text

FIRST THINGS FIRST 1

Slide 4

Slide 4 text

React is a JavaScript library that helps with view concerns in websites.

Slide 5

Slide 5 text

Virtual DOM "React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native."

Slide 6

Slide 6 text

What`s inside React.js - Complexity to compare two trees is O(n^3) complexity - React.js managed to turn O(n^3) problem into linear O(n) - So it`s really fast

Slide 7

Slide 7 text

"This coupling is real, and it is unavoidable. We must bind event listeners to elements on the page. We must update elements on the page from our JavaScript. Our code must interact bidirectionally and in real-time with the elements of the DOM. ... the mantra of React is to stop pretending the DOM and the JavaScript that controls it are separate concerns." — Keith J Grant

Slide 8

Slide 8 text

Inline CSS You can fake and control states of your html component combining CSS declarations and JS conditions.

Slide 9

Slide 9 text

What does anyone have against CSS?

Slide 10

Slide 10 text

Everything is global. Selectors are matched against everything in the DOM. CSS grows over time. People are afraid of their own CSS. You can't just delete things as it's so hard to know if it's absolutely safe to do that. You can be more dynamic with styles in a programming language. You can make really cool stuff with sass, but its not really dynamic.

Slide 11

Slide 11 text

Cascade-less The scary "global" nature of CSS is neutered. A module over here is styled like this, a module over there is styled like that - probably no conflicts in sight. All JavaScript One sense I get is that some people just like and prefer working in all JavaScript. Dynamic Styles "State" is largely a JavaScript concern. If you want/need style to change based on dynamic conditions (states) on your site, What do you get out of inlining styles?

Slide 12

Slide 12 text

Colin Megill - Inline Styles are About to Kill CSS https://www.youtube.com/watch?v=NoaxsCi13yQ

Slide 13

Slide 13 text

Do I have to stop writing CSS?

Slide 14

Slide 14 text

The facebook still has a CSS file… The Web WhatsApp too… Well … Writed in July 2015 (Just to be sure)

Slide 15

Slide 15 text

What the people says about it?

Slide 16

Slide 16 text

Chris Coyier: Some people really like this idea! Lea Verou: You can find people in the world who like eating excrement, it doesn't mean it's a good idea.

Slide 17

Slide 17 text

Styling is what CSS is for This is the "religious" angle that probably isn't going to take us very far. The separation of concerns is inherent to CSS. It`s a file just for styling.

Slide 18

Slide 18 text

Inline styles are at the top of the specificity spectrum. The !important declaration can still win a specific property/value styling war over an inline style, but that's a slightly different concept and an even grosser war to fight.

Slide 19

Slide 19 text

Solution?

Slide 20

Slide 20 text

Some simple states are much easier in CSS How do you do :hover/:focus/:active in inline styles? You don't. You fake it. Adding/removing classes is a perfect tool for state changes already

Slide 21

Slide 21 text

CSS is successful because of it's simplicity. Very simple learning curve to start (but not to master). In the other hand Styling in JS has the same learning curve plus the REACT flow.

Slide 22

Slide 22 text

Some of these "dynamic" styling concerns can be solved with regular CSS. calc() viewport units native variables flex grid […]

Slide 23

Slide 23 text

And what about progressive enhancement?

Slide 24

Slide 24 text

tl;dr; I hope not, and I don`t think so Will JS kill CSS?

Slide 25

Slide 25 text

References https://css-tricks.com/the-debate-around-do-we-even-need-css-anymore/ http://www.sitepoint.com/css-is-alive-and-well/