React Color – Color Pickers from Sketch, Photoshop, Chrome and More

Re:React Color – Color Pickers from Sketch, Photoshop, Chrom... by clessg on Monday August 17, 2015 @12:09PM (#10073974)

If you're using BEM, then in my opinion, styles in React are the logical conclusion. Using CSS means having 2 files per component, Button.js and Button.scss. If you want to share styles, then you can simply import an object. If you want to darken a color, you can import a function. And so on.

[ Parent | on HN ]

Re:React Color – Color Pickers from Sketch, Photoshop, Chrom... by drinchev on Monday August 17, 2015 @12:24PM (#10074111)

So what about caching and rendering? So I imagine that if I render 200 buttons that have inline style it would be slower if I load one stylesheet and 200 HTML tags.

And caching problem would be if I have 2 server rendered pages ( even with JSX that's possible ) and have same styles which will be downloaded twice from two js bundles.

I think separation of those is still better solution. Not to mention stylesheet commits that are far easier to follow than just modifying a js file.

[ Parent | on HN ]

Re:React Color – Color Pickers from Sketch, Photoshop, Chrom... by tvararu on Tuesday August 18, 2015 @06:08AM (#10078338)

You're mixing two different problems. Just because you write your CSS in JavaScript doesn't mean you have to deliver them as inline styles. [1] [2] [3]

CSS in JS is about leveraging the (relatively sane) variable/procedure declaration and control flow semantics that are already available to you in JavaScript. How you deliver them to get the best possible performance is a wholly different problem.

[1]: https://github.com/kodyl/stilr [2]: https://github.com/robertknight/ts-style [3]: https://github.com/chenglou/RCSS

[ Parent | on HN ]

Re:React Color – Color Pickers from Sketch, Photoshop, Chrom... by drinchev on Tuesday August 18, 2015 @08:50AM (#10078891)

Thanks. This solves a lot in my head. Nice references.

[ Parent | on HN ]