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.

1. Will JS Kill CSS?

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

3. FIRST
THINGS
FIRST1

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/