A different approach for handling styles.

[nmn]

This idea in my head isn't fully formed for it to be a pull request yet. But I would love to start a discussion on this.

The idea is a different implementation for CSS so that it isn't actually inline, but still gets the other benefits of authoring CSS in javascript such passing styles around etc etc.

The big challenge is that the implementation would be much more complicated. And may require a little bit of a custom syntax.

This is what I'm suggesting:

Follow the InlineStyles proposal on the API level. But instead of rendering the styles inline, Each set of CSS rules is put into it's own Style Tag, and manages by React.

The computed styles can can be converted to a string and can be used as an object property. That property can hold an array of React-ids for elements it applies to. Then the Style tags can be updated using the same Diffing strategy and the selectors for sets of CSS rules can be updates.

One way to explain this is to think of CSS in reverse. Instead of CSS rules belonging to Elements, Elements belong to (sets of) CSS rules.

From what I can imagine, here are the pros and cons of this approach:

• There will be a lot of Style tags: Each Set of CSS will have it's own Style tag to be able to minimise changes. (it's also possible to use a generated ClassName to be able to minimise the number of changes to Style tags and just create new ones on the fly and apply the correct ClassNames.)
• It will be totally possible to use pseudo selectors and elements
• Media Queries will still be tricky. (This is because they can't just be a another selector and wrap entire selectors instead.

[nmn]

I understand the whole issue sounds very confusing, I'm trying to make a temporary proof of concept implementation to explain it better.

[tiye]

I think these topics are related:
https://github.com/facebook/css-layout
https://speakerdeck.com/vjeux/react-css-in-js

[nmn]

The topics are definitely related. But I have a very different approach to the problem so I thought a separate issue makes sense.

[jaredly]

this is pretty much what RCSS does

[nmn]

Yup. I wrote an article about this recently.
http://blog.namangoel.com/css-in-js-in-css

Looks like RCSS and JSS are both very good solutions that are already doing things in this way. I think these approaches are superior to using javascript to shim all the functionality that CSS provides, like hover, media queries etc.

Of course, on non-web platforms (React-Native), inline styles are basically perfect.

At the point the point of this issue, is to try to influence the React community to adopt this approach to CSS for React.

[jaredly]

Your post is off base when you say "RCSS has no support for server side
rendering". It's in the Readme.

On 3:45PM, Thu, Mar 12, 2015 Naman Goel [email protected] wrote:

Yup. I wrote an article about this recently.
http://blog.namangoel.com/css-in-js-in-css

Looks like RCSS and JSS are both very good solutions that are already
doing things in this way. I think these approaches are superior to using
javascript to shim all the functionality that CSS provides, like hover,
media queries etc.

Of course, on non-web platforms (React-Native), inline styles are
basically perfect.

—
Reply to this email directly or view it on GitHub
#18 (comment).

[nmn]

@jaredly Thanks for the heads up. I added an update to the post. In any case, I think RCSS and JSS are on exactly right path when it comes to doing CSS for browsers.

At this point, I would like a discussion on the possibility of a hybrid approach between inline-styles, and other styles managed in JS but injected in style tags. Inline styles are supposed to have superior performance, so this might make sense.

Opinions?