
Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native - casesandberg
http://reactcss.com/
======
AndrewSB
What happened to the separation of concerns between CSS and JS? In my
experience most developers dont want anything to do with CSS. They want a
designer who can code to do that.

~~~
gedy
The React ecosystem seems to be geared towards masking HTML/DOM/CSS behind
Javascript/code, such as when developing mobile apps. I do not think
"separation of concerns" is a priority.

(Not agreeing with this BTW, but there is a subset of developers who seem to
think this is just great.)

~~~
tracker1
I can go almost either way... I often find it more natural to include a (s)css
file in my component's .js, and have webpack bring it in... then in the
component's rendering set the className to a matching container in the scss.
With scss, I can start with my variables/mixins include, and keep the more
hierarchal stuff straight... It works pretty well, but I see the appeal of
things like this library, aphrodite and the like.

~~~
gedy
I do exactly that too :-)

------
zeitg3ist
This is slightly off-topic, but... this simple website is made of a single,
static page without any kind of user interaction. Why does it load a 2.8 Mb
javascript, and why is javascript needed to render the page at all?

~~~
k__
I only see a ~800kb bundle.js, which could be smaller if minified, I think,
but nothing strangely big.

~~~
teleclimber
The bundle is 2.8 Mb uncompressed, ~800Kb compressed.

Even if compressed and minified, that's still a huge amount of JS statements
that the interpreter has to go through.

I'm getting about 2 seconds to DomContentLoaded on my iMac and a reasonably
fast cable connection. Four seconds to visible content on my Nexus 5X on same
connection.

This is the kind of crap that makes the web feel so lame and clunky on mobile
(and on desktops too even sometimes).

~~~
tracker1
For reference, it's not necessarily react or redux, or whatever else is in
use... I've managed to get preact+redux in a 20k (gz) bundle for a standalone,
usable component, flushing out an app may triple that size, but if you're
judicious with your components, it's not too hard.

Then again, Immutable.js is about 15kb on it's own, and a few other heavy
hitters and you'll hit 100kb (gz) load before much functionality. That said, I
think a 500kb target for a web app isn't too bad, this does exceed that, but
not sure if certain bits (image references, fonts, etc) are part of the actual
JS bundle, which _will_ bloat it out a lot.

~~~
k__
lol, it IS react and the fact that you achieved 20k isn't thanks to react, but
thanks to preact...

~~~
tracker1
React has a lot more sanity checks in place, but that comes at a cost. For a
component, it's too much of a price to pay... for a full-blown application,
it's usually well worth it. For a component, 20kb is pushing it... for an
application, generally 500k would be the limit in my mind. Which is pretty
easily hit regardless of the framework, but too many applications include
various libraries willy nilly....

Often times you will wind up with competing libraries that both get
installed... You'll get all of lodash, and all of Ramda... you'll get all of
jQuery, and a few other tools because you're bringing in one component.
Working on larger applications with people less judicious as to what they
bring in results in a lot of bloat... more so when it's easier to bring
something in (thanks to webpack/babel), and while I appreciate that, it's a
tool that's easy to abuse.

In the end, you can get react+redux in under 100kb, you can get a lot of the
app boilerplate for a mid-sized app well under 200kb... I would compare this
to angular, or ng2 that tend to be much bigger. In the end it's how you are
building.

Beyond this, as I said, I didn't really look into the bundle... depending on
configuration it could be including images, fonts and css. Which would mean
it's really not that bad, though it should probably be using url-loader for a
lot of the assets to break into separate downloads. Also, react-icons is much
better when only needing a few icons from the libraries, they're also well
normalized to mix/match in terms of size/position than the fonts tend to be.

------
qudat
Cool library, any thoughts on
[https://github.com/rtsao/csjs](https://github.com/rtsao/csjs)

I found it to be a great middleman between CSS and JS, with full CSS support.

------
stuartmemo
Is there any benefit to using this over CSS Modules in React?

[https://github.com/gajus/react-css-modules](https://github.com/gajus/react-
css-modules)

~~~
casesandberg
React CSS Modules does not allow you to use props or state to style your
component. Say you wanted to use a button <Button color="#aeee00" /> you could
map the color prop directly to CSS.

~~~
haukur
There is nothing preventing you from using (React) CSS modules & state/props.
Use the allowMultiple option if you need more than one classname (base
classname + modifier).

~~~
casesandberg
But how does that work if this translates everything to traditional CSS?

~~~
haukur
You write CSS files and import them in your component. By using Webpack you
would do something like this in your component:

    
    
        import CSSModules from 'react-css-modules';
        import styles from './styles'; // This is a styles.css file in the same dir
        
        const Component = () => <p styleName="welcome">Hello, world!</p>;
    
        export default CSSModules(Component, styles);
    

The stylesheet import is just Webpack doing its thing, using css-loader.
Example config:
[https://github.com/hph/kit/blob/master/webpack.config.js](https://github.com/hph/kit/blob/master/webpack.config.js)

Sorry if I misunderstood your question.

------
inglor
Nice project!

We have a project like that one of our developers wrote except it will compile
the classes back to a CSS stylesheet for you for performance and will unify
identical styles to not have duplicates and save space
[https://github.com/Mosho1/react-style](https://github.com/Mosho1/react-style)

~~~
casesandberg
So it translates everything back to CSS, is that how it handles hover and
pseudo classes?

~~~
inglor
Yes, exactly - it also produces smaller file sizes and in our experience it's
faster.

It's also nice to be able to use classes and integrate with CSS seamlessly
when you need to.

~~~
casesandberg
Is it possible to use state or props in the CSS though? How does it handle
that? Say I wanted the color of a title to be controlled via props, how would
I do that with your solution?

------
fuzionmonkey
This is very similar to
[https://github.com/Khan/aphrodite](https://github.com/Khan/aphrodite) and
[https://github.com/rtsao/react-stylematic](https://github.com/rtsao/react-
stylematic)

~~~
casesandberg
One of the biggest differences between ReactCSS and other solutions is that
all of the style merging is done in the style object and not in the HTML. This
keeps the markup clean and puts all style and style logic in one place.

