10 ms·

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

47 points by casesandberg 10y ago

inglor 10y ago
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 10y ago
  So it translates everything back to CSS, is that how it handles hover and pseudo classes?
  - inglor 10y ago
    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 10y ago
      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?
- daok 10y ago
  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.
AndrewSB 10y ago
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.
- andrewingram 10y ago
  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.
- olalonde 10y ago
  It's just a slightly different syntax for CSS but still is CSS.
- jbob2000 10y ago
  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 between JS and CSS, that sounds a little outdated, to be honest. As a front-end developer, I would be expected to do JS and CSS.
  - xirdstl 10y ago
    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.
    - 10y ago
zeitg3ist 10y ago
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__ 10y ago
  I only see a ~800kb bundle.js, which could be smaller if minified, I think, but nothing strangely big.
  - Zikes 10y ago
    I'm also getting a 2.8mb file, which the server is having trouble sending in a reasonable timeframe under the heavy load HN is putting it under right now. http://i.imgur.com/OmFGf7D.png http://i.imgur.com/OmFGf7D.png
    - k__ 10y ago
      Interesting, to me it came compressed.
  - teleclimber 10y ago
    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 10y ago
      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.
stuartmemo 10y ago
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 10y ago
  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 10y ago
    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 10y ago
      But how does that work if this translates everything to traditional CSS?
      - haukur 10y ago
        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.
fuzionmonkey 10y ago
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 10y ago
  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.
- casesandberg 10y ago
  <span className={css(styles.blue, styles.small)}> vs <span style={ styles.button }>
qudat 10y ago
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.

47 points by casesandberg 10y ago

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 10y ago
So it translates everything back to CSS, is that how it handles hover and pseudo classes?
- inglor 10y ago
  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 10y ago
    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?
daok 10y ago
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.

AndrewSB 10y ago

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.

andrewingram 10y ago
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.
olalonde 10y ago
It's just a slightly different syntax for CSS but still is CSS.
jbob2000 10y ago
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 between JS and CSS, that sounds a little outdated, to be honest. As a front-end developer, I would be expected to do JS and CSS.
- xirdstl 10y ago
  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.
  - 10y ago

zeitg3ist 10y ago

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__ 10y ago
I only see a ~800kb bundle.js, which could be smaller if minified, I think, but nothing strangely big.
- Zikes 10y ago
  I'm also getting a 2.8mb file, which the server is having trouble sending in a reasonable timeframe under the heavy load HN is putting it under right now. http://i.imgur.com/OmFGf7D.png http://i.imgur.com/OmFGf7D.png
  - k__ 10y ago
    Interesting, to me it came compressed.
- teleclimber 10y ago
  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 10y ago
    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.

stuartmemo 10y ago

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 10y ago
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 10y ago
  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 10y ago
    But how does that work if this translates everything to traditional CSS?
    - haukur 10y ago
      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.

fuzionmonkey 10y ago

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 10y ago
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.
casesandberg 10y ago
<span className={css(styles.blue, styles.small)}> vs <span style={ styles.button }>

qudat 10y ago

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.