Will JS Kill CSS?

Понравилась презентация – покажи это...

Слайд 0

Will JS Kill CSS?

Слайд 1

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

Слайд 2


Слайд 3

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

Слайд 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."

Слайд 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

Слайд 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

Слайд 7

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

Слайд 8

What does anyone have against CSS?

Слайд 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.

Слайд 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,

Слайд 11

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

Слайд 12

Do I have to stop writing CSS?

Слайд 13

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

Слайд 14

What the people says about it?

Слайд 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.

Слайд 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.

Слайд 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.

Слайд 18


Слайд 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

Слайд 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.

Слайд 21

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

Слайд 22

And what about progressive enhancement?

Слайд 23

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

Слайд 24

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

Слайд 25