Will Js Kill CSS

A Brief introduction to the concepts of Inline Styling of React architecture. In this presentation I cover some concepts on the subject, showing the pros and cons of this concept.

Transcript

1. Will JS Kill CSS?
2. @bruno2ms Bruno Mendes Soares UX/UI Designer São Paulo, Brazil /br2msi /bruno2ms
3. FIRST THINGS FIRST 1
4. React is a JavaScript library that helps with view concerns in websites.
5. 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."
6. 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
7. "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
8. Inline CSS You can fake and control states of your html component combining CSS declarations and JS conditions.
9. What does anyone have against CSS?
10. 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.
11. 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?
12. Colin Megill - Inline Styles are About to Kill CSS https://www.youtube.com/watch?v=NoaxsCi13yQ
13. Do I have to stop writing CSS?
14. The facebook still has a CSS file… The Web WhatsApp too… Well … Writed in July 2015 (Just to be sure)
15. What the people says about it?
16. 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.
17. 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.
18. 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.
19. Solution?
20. 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
21. 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.
22. Some of these "dynamic" styling concerns can be solved with regular CSS. calc() viewport units native variables flex grid […]
23. And what about progressive enhancement?
24. tl;dr; I hope not, and I don`t think so Will JS kill CSS?
25. References https://css-tricks.com/the-debate-around-do-we-even-need-css-anymore/ http://www.sitepoint.com/css-is-alive-and-well/