Styled-components
Languages and libraries
css-in-js library for react
SHOW HN2016
172points
67comments
#178of 2,264 in 2016
Top 8%of 2016 by points
How HN took it
CuriousMostly questions and neutral comments
4 positive, 18 neutral or asking, 1 mixed, 7 critical, out of 30 comments about the project. Thread score -0.06.
Idea: 2 for, 1 againstExecution: 1 for, 2 againstDesign: 0 for, 2 againstPerformance: 0 for, 2 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Good idea and clean approach to styling React
From 3 comments
Great one! Would love to do this in my side projects.
andrewvijay on HNVery cool, I have been playing around with this idea for a little bit now and your implementation looks solid. Looking forward to giving this a shot on my next side project.
gjolund on HNEmoji as CSS classes. Never thought of that one...
Raphmedia on HN
Objections
Performance concerns from regenerating styles on every render
From 2 comments
What is the performance penalty of using generated styles on every render? As far as I can see from the source code, React will have to modify `<style>` tag every time a…
drinchev on HNReal projects in the future may be! Because the current one involves a lot of components and I don't think this would be scaling well as it's gonna rerender the styles multiple…
andrewvijay on HN
String-based styling API is a step in the wrong direction
From 1 comment
I think using strings as an API is a step in the wrong direction. I like that it produces a React component directly though. We experimented with styling approaches for React a…
andreypopp on HN
Site renders blank in some browsers
From 2 comments
Site is a blank page for me.
retox on HNApologies, didn't see your reply until now. IE11 behind the company firewall, I can see a rather short set of complete HTML in the source but nothing is rendered. Sorry I can't…
retox on HN
Requests
Extract static styles into a separate stylesheet for performance
From 1 comment
We've tried styled-components in medium-size projects (50-500 components) and haven't noticed any performance-hit yet. That being said, it's definitely something we're conscious…
mxstbr on HN
Questions
How pseudo classes and media queries are handled
From 3 comments
How do you do pseudo classes like :focus?
elecengin on HNWhat about media queries?
Kiro on HNHow is this implemented? And how is the :hover pseudo class implemented? Awesome work by the way!
hkeide on HN
Performance impact on large applications
From 2 comments
What is the performance penalty of using generated styles on every render? As far as I can see from the source code, React will have to modify `<style>` tag every time a…
drinchev on HNReal projects in the future may be! Because the current one involves a lot of components and I don't think this would be scaling well as it's gonna rerender the styles multiple…
andrewvijay on HN
Alternatives named
Tachyons
From 1 comment
I want to mention my styling library here: https://www.npmjs.com/package/react-native-style-tachyons The best part: it gives you a consistent spacing [0] and a consistent font…
cel1ne on HN
glamor
From 1 comment
glamor is another option for React apps, if inline styling is your thing. https://github.com/threepointone/glamor
jeswin on HN
Radium
From 1 comment
Thank you, that's what I wanted to know, since projects like Radium implement e.g. hover in JS using onMouseEnter() etc, which sounds slow. See…
hkeide on HN
CSS Modules
From 2 comments
What do you mean with "the usual way"? ;) There is vanilla CSS, Sass, CSS modules, Aphrodite, Radium, JSS,… This image from the talk I just gave about it sums the differences up…
mxstbr on HNAm I an outlier for enjoying plain CSS? I get everything I need and want with css-modules, classnames/bind, and the occasional inline style.
rojobuffalo on HN
Aphrodite
From 1 comment
What do you mean with "the usual way"? ;) There is vanilla CSS, Sass, CSS modules, Aphrodite, Radium, JSS,… This image from the talk I just gave about it sums the differences up…
mxstbr on HN
JSS
From 1 comment
What do you mean with "the usual way"? ;) There is vanilla CSS, Sass, CSS modules, Aphrodite, Radium, JSS,… This image from the talk I just gave about it sums the differences up…
mxstbr on HN