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

Re:Show HN: ReactCSS – Inline Styles with Support for React,... by natrius on Tuesday June 07, 2016 @02:55PM (#11856808)

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

[ Parent | on HN ]

Re:Show HN: ReactCSS – Inline Styles with Support for React,... by gedy on Tuesday June 07, 2016 @04:21PM (#11857475)

> The old way of doing CSS was crazy and unmanageable.

That's a bit of a stretch though, we've had good success with using normal CSS files, included in each component with webpack CSS-loader[1]. CSS is displayed in head as needed, but without an all-JS approach like this

[1] https://github.com/webpack/css-loader

[ Parent | on HN ]

Re:Show HN: ReactCSS – Inline Styles with Support for React,... by tracker1 on Tuesday June 07, 2016 @05:40PM (#11858139)

For that matter, it's not so hard to setup sass-loader with custom default locations... I'll usually have my own copy of bootstrap's variables.scss, a mixins.scss that points to bootstrap's... from there, I have a copy of bootstrap.scss included higher up pointing to the local mixins/variables, and the rest from the node_modules/bootstrap(-sass)/ path...

I can then, inside my component...

    require('./mycomponent-style.scss')
    .... <div class="mycomponent">

with the mycomponent-style.scss

    @import "variables";
    @import "mixins";
    
    .mycomponent {
      ...
    }

And have all of bootstrap's variables/mixins to work with... I can update variables for those bits of bootstrap I want changed, components also update based on those values. It actually works really well, and it's not hard to setup.

I should really write a current article on using Bootstrap@4 from source... There's a little bit of boilerplate, but so worth it.

That said, I do appreciate the inline options, and feel that future React apps in particular should probably go in that direction. It really just depends on how you are working with.

[ Parent | on HN ]