Live data from Hacker News

Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

reactcss.com

11–20 of 48 posts

Re: Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

#11
post #9

Earlier quoted context omitted.

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

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.

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?

Re: Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

#14

Is there any benefit to using this over CSS Modules in React? https://github.com/gajus/react-css-modules

React CSS Modules does not allow you to use props or state to style your component. Say you wanted to use a button you could map the color prop directly to CSS.

Re: Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

#15
post #3

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.

Ultimately it depends on what your concerns are, and how you want to separate them.

I'm not just being silly either. Separation of technologies (e.g. HTML/CSS/JS) is just one of many ways of splitting things up. The component paradigm is essentially a fractal version of separating by feature. Ultimately it's an architectural choice and as such any best practices should be strictly scoped to the problems they're solving.

The reason why many of us in React-land are looking to bring everything related to a single component into one file, is maintainability and strict encapsulation. Some of this is to do with developer-experience (DX), i.e. adopt patterns that make our lives easier and ultimately minimise hard-to-fix bugs. But we're also trying to adopt patterns that benefit the user (i'll be the first to admit we're not there yet). To that end, a component architecture also makes it easier to let build tools automatically take care of the nasty problem of making sure users only download exactly what they need for what they've asked to do.

Re: Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

#16
post #3

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.

The React way is different and I was hesitant, but it is better. It combines the best parts of native app development with the best parts of web development, then improves on them. The old way of doing CSS was crazy and unmanageable because CSS was intended for documents. Cascading styles are useful for publications, but they are unwieldy for UI components. There aren't many native app designers clamoring for global cascading styles.

The React way of separating design concerns from logic is to build container components[1] that handle the logic and pass props down to simple components that just display the data they're given. I would expect designers to spend more time in presentational components and CSS modules[2] while developers would build container components. (I'm a one-man shop doing both.)

[1] https://medium.com/@dan_abramov/smart-and-dumb-components-7c...

[2] https://github.com/css-modules/css-modules

Re: Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

#17
post #7
post #3

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.

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.)

[deleted]

Re: Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

#18
post #6
post #3

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.

The component paradigm that react is built around is all about working with very small objects, where everything you need for that component is in one file. It's a fantastic model when you are working with a complex interface that has many components to it. It's a paradigm that needs to be managed and used carefully though, otherwise you'll end up with massive 2000 line files. I never thought there was a separation b…

Where I work, we're a small dev team of a few full stack developers and a designer. Our designer does the CSS, and the devs the JS. The separation works well enough for us. YMMV.

Re: Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

#19

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?

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

Re: Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

#20
post #2

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

One advantage to keep the style not in a CSS file is that you can handle dynamic value easily withing your component. Bringing back to a CSS file make you loss that capability.
Post reply on HN