3 ms·

Sure CSS in JS if you want. But scrapping CSS for style tags is a bad idea. React renders to the DOM which outputs HTML. It's still HTML that can be styled wit

by icc97 9y ago

Sure CSS in JS if you want. But scrapping CSS for style tags is a bad idea. React renders to the DOM which outputs HTML. It's still HTML that can be styled with CSS independently of React.

dmitriid 9y ago
> Sure CSS in JS if you want. What do you think the code you complained about does? > But scrapping CSS for style tags is a bad idea. It's not bad in this particular case because these were simple examples to illustrate an entirely different point. > React renders to the DOM which outputs HTML. It's still HTML Erm. No. DOM never outputs any HTML. There's no HTML generated when you use React (or any other DOM-manipulation library or vanilla Javascript). It's the other way around: - HTML gets parsed - A DOM (Document Object Model) is created to provide an in-memory, well, object model of the HTML document. - In order to render anything on screen the browser works with the DOM only - When something manipulates the DOM directly, the browser reacts to those changes and re-renders the view accordingly - There's no HTML generated - If someone does change the HTML, it's re-parsed, go to step 1. Yes, you can style DOM nodes independently of React because that's how CSS works. However, there is a reason why people hate CSS with a passion: it doesn't scale, it's cumbersome to develop components with it etc. etc. etc. And that's why people ended up inventing ways to include/generate CSS via JS alongside component code.
- icc97 9y ago
  Fair enough on the DOM rendering, you're quite right. Instead of "React still just outputs HTML" in my original reply I should have said "React still just renders to the DOM". > these were simple examples to illustrate an entirely different point. I did accept this in my original post, it could be just because they were examples. But it's trivial to use classes instead. I've never come across many people that hate CSS with a passion. It's been used to create billions of pages so I'm sure that some people will hate it but it was certainly a step up from individual style tags. The React docs agree that it's more efficient to use CSS instead of inline styles [0]. And beyond that when talking about CSS-in-JS: > if in doubt, a good starting point is to define your styles in a separate *.css file as usual and refer to them using className. There are problems with CSS, but it also solved a lot of problems that came before that seem to have been forgotten about. [0]: https://reactjs.org/docs/faq-styling.html https://reactjs.org/docs/faq-styling.html
  - hudbuddy 9y ago
    I don't think anyone hear hates CSS - it is a convenience in many ways. However when you think of views as a reflection of state, it can become very confusing and "impure". Imagine you had a complex database of authors and books, and every time you read from it you want to receive the name of the user or the book in title case. You see that this behavior can be abstracted over, so you say "any time I pull a record from the database, no matter what table it comes from, capitalize its title". This is very convenient. Well, no one would ever do this in a complex application, because you don't know what sort of implications it might have for future tables that are added - or what if you decide that short words in the title should be lowercase? Now you are making exceptions instead of declarations. This is effectively what CSS does. it unnecessarily couple's visual state to other visual state, unless it is namespaced uniquely to a specific component.
    - icc97 9y ago
      I didn't think so either but this is what I was replying to: > However, there is a reason why people hate CSS with a passion So it seems some people do. Going through some of the talks about CSS in JS it seems Facebook and Airbnb are making good cases for the problems they're hitting with CSS especially around asynchronous loading of CSS files. But having spent lots of time seeing what a mess developers come up with using style tags on individual elements before switching to using CSS I'm interested to see what happens when there's tons of React components with hard coded styles. It seems like a solution that's ripe for creating more problems than it solves.

by icc97 9y ago

Sure CSS in JS if you want. But scrapping CSS for style tags is a bad idea. React renders to the DOM which outputs HTML. It's still HTML that can be styled with CSS independently of React.

dmitriid 9y ago

> Sure CSS in JS if you want. What do you think the code you complained about does? > But scrapping CSS for style tags is a bad idea. It's not bad in this particular case because these were simple examples to illustrate an entirely different point. > React renders to the DOM which outputs HTML. It's still HTML Erm. No. DOM never outputs any HTML. There's no HTML generated when you use React (or any other DOM-manipulation library or vanilla Javascript). It's the other way around: - HTML gets parsed - A DOM (Document Object Model) is created to provide an in-memory, well, object model of the HTML document. - In order to render anything on screen the browser works with the DOM only - When something manipulates the DOM directly, the browser reacts to those changes and re-renders the view accordingly - There's no HTML generated - If someone does change the HTML, it's re-parsed, go to step 1. Yes, you can style DOM nodes independently of React because that's how CSS works. However, there is a reason why people hate CSS with a passion: it doesn't scale, it's cumbersome to develop components with it etc. etc. etc. And that's why people ended up inventing ways to include/generate CSS via JS alongside component code.

icc97 9y ago
Fair enough on the DOM rendering, you're quite right. Instead of "React still just outputs HTML" in my original reply I should have said "React still just renders to the DOM". > these were simple examples to illustrate an entirely different point. I did accept this in my original post, it could be just because they were examples. But it's trivial to use classes instead. I've never come across many people that hate CSS with a passion. It's been used to create billions of pages so I'm sure that some people will hate it but it was certainly a step up from individual style tags. The React docs agree that it's more efficient to use CSS instead of inline styles [0]. And beyond that when talking about CSS-in-JS: > if in doubt, a good starting point is to define your styles in a separate *.css file as usual and refer to them using className. There are problems with CSS, but it also solved a lot of problems that came before that seem to have been forgotten about. [0]: https://reactjs.org/docs/faq-styling.html https://reactjs.org/docs/faq-styling.html
- hudbuddy 9y ago
  I don't think anyone hear hates CSS - it is a convenience in many ways. However when you think of views as a reflection of state, it can become very confusing and "impure". Imagine you had a complex database of authors and books, and every time you read from it you want to receive the name of the user or the book in title case. You see that this behavior can be abstracted over, so you say "any time I pull a record from the database, no matter what table it comes from, capitalize its title". This is very convenient. Well, no one would ever do this in a complex application, because you don't know what sort of implications it might have for future tables that are added - or what if you decide that short words in the title should be lowercase? Now you are making exceptions instead of declarations. This is effectively what CSS does. it unnecessarily couple's visual state to other visual state, unless it is namespaced uniquely to a specific component.
  - icc97 9y ago
    I didn't think so either but this is what I was replying to: > However, there is a reason why people hate CSS with a passion So it seems some people do. Going through some of the talks about CSS in JS it seems Facebook and Airbnb are making good cases for the problems they're hitting with CSS especially around asynchronous loading of CSS files. But having spent lots of time seeing what a mess developers come up with using style tags on individual elements before switching to using CSS I'm interested to see what happens when there's tons of React components with hard coded styles. It seems like a solution that's ripe for creating more problems than it solves.