3 ms·

This presentation explains what problems React inline CSS solves Could you please summarize in a few sentences what are these probs this approach deem to solve

This presentation explains what problems React inline CSS solves Could you please summarize in a few sentences what are these probs this approach deem to solve? Because I have seen demos and talks from React people and I was appalled at their neglect of best practices and bending the rules just to push their product and technologies on the community

woah 12y ago
I'm curious, which demos and talks are you referring to?
- timepiece 12y ago
  One of those done at the latest ReactJS Conf where they introduced React Native. Check their channel on YT for the info.
mejari 12y ago
Why are you looking at this as "bending the rules" instead of as creating new rules for a new way of building web applications? Just hand-waving "best practices" doesn't actually mean that something is best practices if someone else comes up with a better practice.
- timepiece 12y ago
  You guys have to convince us first that mixing content+structure/presentation/logic is the best way to go forward in web development for the following reasons 1,2,3 ..etc. I'm all for progress and challenging/questioning previous norms or traditions. I hate dogma and dogmatic people like the next guy but I need first to see improvement in the new thing before going adopting it. What I see now frankly is the opposite of progress. I see people advocating for dispensing of "separation pf concerns" & "progressive enhancement" in the name of "progress" and "modernization" but in reality it's just a lame excuse to regress to a state of affairs that we guys fought too hard to combat it and bring awareness to the community of its pitfalls and shortcomings.
  - mejari 12y ago
    >You guys have to convince us first that mixing content+structure/presentation/logic is the best way to go forward in web development for the following reasons 1,2,3 ..etc. There are a million articles and talks that provide exactly this. If you don't find them convincing that's fine, but don't act like no one is providing them. > I see people advocating for dispensing of "separation pf concerns" & "progressive enhancement" in the name of "progress" and "modernization" If that's what you see then you're looking in some weird places. The drivers behind React aren't just vague ideas like "modernization", they're the real-world benefits people are seeing when developing and using these new ideas. You're doing a disservice to everyone by fabricating the reasons behind these ideas just because you don't like them. >in reality it's just a lame excuse to regress to a state of affairs that we guys fought too hard to combat it This really just seems like a stodgy "get off my lawn, kids!" approach, which is at odds with your "I hate dogma" statements. Do you honestly believe that people are pushing in this direction solely as an excuse to regress things and make it worse? Even if you think that it is "regressing" things, you can't possibly be so conservative and entrenched as to actually believe that is people's goal, can you?
    - timepiece 12y ago
      There are a million articles and talks that provide exactly this. If you don't find them convincing that's fine, but don't act like no one is providing them. If you have been asked what's the most important convincing reason to switch to React, what would be your answer? Please no mention of web apps vs web docs. We're already established that. - It has been all about progress and modernization all the time. Progress in terms of productivity gains and speed was the motivation behind dropping jQuery centered architecture and going for an MVC framework instead and it's what's motivating the spawning of these frameworks as well. I don't know why this point is contentious one for you. Do you honestly believe that people are pushing in this direction solely as an excuse to regress things and make it worse? I didn't say that and I don't believe that they're intentionally pushing in this way to harm the industry and the community but I do believe that , while in the midst of chasing the latest trendy object, they won't realize that they're giving up very valuable stuff that benefited the industry for a long time.
origin-unknown 12y ago
My main complaint with CSS in JS is that a strict naming convention solves a lot of the problems without coupling styles in application bundles. Basically, I don't want to invalidate my JS bundle just to include a new visual theme. Luckily, you can use CSS best practices with React. The problems mentioned in the presentation, followed by some CSS-friendly solutions -- 1) Global namespace: all selectors are global Use a naming convention. 2) Dependencies: no way to specify that a block of markup depends on a particular CSS module Use a build process and a naming convention that includes a component name. 3) Dead code elimination: difficult to determine when styles are no longer needed Loop over components and extract CSS component names from class attributes. 4) Minification: can't minify class names in markup Not a bottleneck, nobody cares. 5) Sharing constants: can't share constants/variables with javascript Use rework/postcss. 6) Non-deterministic resolution: loading styles asynchronously can result in different results since specificity assumes later rules should override earlier rules and async load order is arbitrary Use SUIT CSS to prevent collisions and normalize specificity. 7) Isolation: base component CSS can be trashed by authors of subcomponents, making it difficult to change base CSS. Reduce responsibilities of base component CSS. Encourage use of modifier classes. Ban tag selectors from component CSS. Use a SUIT CSS compliance checker. I use SUIT CSS with React and couldn't be happier.
- timepiece 12y ago
  Seriously, all these points sound very fancy and I suspect that they bring unequivocal productivity gain to the dev environment but my main beef with FB or any other org is that they push this workflow or other methodologies as universal best practices or even distort reality and claim that mixing content/presentation/logic is the only right way to "separation of concerns" and all what you knew before about this topic is a hoax and big lie.
jbergens 12y ago
I think you're reading too much into it. I see it as a new way of working with new tools that Facebook has found to be better for them. We can try the new tools and see if it works better for us.

woah 12y ago

I'm curious, which demos and talks are you referring to?

timepiece 12y ago
One of those done at the latest ReactJS Conf where they introduced React Native. Check their channel on YT for the info.

mejari 12y ago

Why are you looking at this as "bending the rules" instead of as creating new rules for a new way of building web applications? Just hand-waving "best practices" doesn't actually mean that something is best practices if someone else comes up with a better practice.

timepiece 12y ago
You guys have to convince us first that mixing content+structure/presentation/logic is the best way to go forward in web development for the following reasons 1,2,3 ..etc. I'm all for progress and challenging/questioning previous norms or traditions. I hate dogma and dogmatic people like the next guy but I need first to see improvement in the new thing before going adopting it. What I see now frankly is the opposite of progress. I see people advocating for dispensing of "separation pf concerns" & "progressive enhancement" in the name of "progress" and "modernization" but in reality it's just a lame excuse to regress to a state of affairs that we guys fought too hard to combat it and bring awareness to the community of its pitfalls and shortcomings.
- mejari 12y ago
  >You guys have to convince us first that mixing content+structure/presentation/logic is the best way to go forward in web development for the following reasons 1,2,3 ..etc. There are a million articles and talks that provide exactly this. If you don't find them convincing that's fine, but don't act like no one is providing them. > I see people advocating for dispensing of "separation pf concerns" & "progressive enhancement" in the name of "progress" and "modernization" If that's what you see then you're looking in some weird places. The drivers behind React aren't just vague ideas like "modernization", they're the real-world benefits people are seeing when developing and using these new ideas. You're doing a disservice to everyone by fabricating the reasons behind these ideas just because you don't like them. >in reality it's just a lame excuse to regress to a state of affairs that we guys fought too hard to combat it This really just seems like a stodgy "get off my lawn, kids!" approach, which is at odds with your "I hate dogma" statements. Do you honestly believe that people are pushing in this direction solely as an excuse to regress things and make it worse? Even if you think that it is "regressing" things, you can't possibly be so conservative and entrenched as to actually believe that is people's goal, can you?
  - timepiece 12y ago
    There are a million articles and talks that provide exactly this. If you don't find them convincing that's fine, but don't act like no one is providing them. If you have been asked what's the most important convincing reason to switch to React, what would be your answer? Please no mention of web apps vs web docs. We're already established that. - It has been all about progress and modernization all the time. Progress in terms of productivity gains and speed was the motivation behind dropping jQuery centered architecture and going for an MVC framework instead and it's what's motivating the spawning of these frameworks as well. I don't know why this point is contentious one for you. Do you honestly believe that people are pushing in this direction solely as an excuse to regress things and make it worse? I didn't say that and I don't believe that they're intentionally pushing in this way to harm the industry and the community but I do believe that , while in the midst of chasing the latest trendy object, they won't realize that they're giving up very valuable stuff that benefited the industry for a long time.

origin-unknown 12y ago

My main complaint with CSS in JS is that a strict naming convention solves a lot of the problems without coupling styles in application bundles. Basically, I don't want to invalidate my JS bundle just to include a new visual theme. Luckily, you can use CSS best practices with React. The problems mentioned in the presentation, followed by some CSS-friendly solutions -- 1) Global namespace: all selectors are global Use a naming convention. 2) Dependencies: no way to specify that a block of markup depends on a particular CSS module Use a build process and a naming convention that includes a component name. 3) Dead code elimination: difficult to determine when styles are no longer needed Loop over components and extract CSS component names from class attributes. 4) Minification: can't minify class names in markup Not a bottleneck, nobody cares. 5) Sharing constants: can't share constants/variables with javascript Use rework/postcss. 6) Non-deterministic resolution: loading styles asynchronously can result in different results since specificity assumes later rules should override earlier rules and async load order is arbitrary Use SUIT CSS to prevent collisions and normalize specificity. 7) Isolation: base component CSS can be trashed by authors of subcomponents, making it difficult to change base CSS. Reduce responsibilities of base component CSS. Encourage use of modifier classes. Ban tag selectors from component CSS. Use a SUIT CSS compliance checker. I use SUIT CSS with React and couldn't be happier.

timepiece 12y ago
Seriously, all these points sound very fancy and I suspect that they bring unequivocal productivity gain to the dev environment but my main beef with FB or any other org is that they push this workflow or other methodologies as universal best practices or even distort reality and claim that mixing content/presentation/logic is the only right way to "separation of concerns" and all what you knew before about this topic is a hoax and big lie.

jbergens 12y ago

I think you're reading too much into it. I see it as a new way of working with new tools that Facebook has found to be better for them. We can try the new tools and see if it works better for us.