Will JS Kill CSS?

If you like this presentation – show it...

Slide 0

Will JS Kill CSS?

Slide 1

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

Slide 2


Slide 3

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

Slide 4

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 5

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 6

"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 7

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

Slide 8

What does anyone have against CSS?

Slide 9

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 10

What do you get out of inlining styles? 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,

Slide 11

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

Slide 12

Do I have to stop writing CSS?

Slide 13

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

Slide 14

What the people says about it?

Slide 15

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 16

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 17

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 18


Slide 19

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 20

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 21

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

Slide 22

And what about progressive enhancement?

Slide 23

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

Slide 24

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

Slide 25