[{"data":1,"prerenderedAt":412},["ShallowReactive",2],{"project-12699767":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":44,"post_text":47,"what":48,"said":96,"maker_in_thread":205,"shape":216,"grid":219,"attempts":375,"same_week":376,"maker_shows":46,"maker_hidden":404,"reader_version":405,"card":406},"12699767","Styled-components","Use the best of ES6 to style React apps","title","Show HN: Styled-components – Use the best of ES6 to style React apps","https:\u002F\u002Fstyled-components.com","styled-components.com","mxstbr",1476355782,2016,172,67,178,2264,8,"notable","languages","css-in-js library for react","library",[24,25,26,27,28],"css-in-js","react styling","styled components","tagged template literals","react css","curious",-0.062,{"positive":32,"neutral":33,"mixed":34,"critical":35},4,18,1,7,30,{"design":38,"performance":41,"idea":42,"execution":43},{"positive":39,"critical":40},0,2,{"positive":39,"critical":40},{"positive":40,"critical":34},{"positive":34,"critical":40},[39,39,34,39,39,45,39,39,45,45,34,45,45,34,39,39,45,34,45,45,45,45,39,34,39,45,45,45,46,34,39,46,45,39,45,45,39,46,45,45],3,5,null,{"problem":49,"audience":59,"pricing":47,"motivation":66,"time_to_build":47,"stack":74,"openness":95,"stage":95,"team_size":95},{"value":50,"source":51,"evidence":52},"Styling React components with CSS in JavaScript without separate stylesheets","inferred",[53,56],{"id":54,"by":11,"text":55},"12700280","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…",{"id":57,"by":11,"text":58},"12700404","The huge downside with inline styles is that they don't support all of CSS _at all_. You have to reimplement basic things like pseudo selectors (hover\u002Factive\u002Ffocussed\u002F… styles)…",{"value":60,"source":51,"evidence":61},"React developers",[62,63],{"id":54,"by":11,"text":55},{"id":64,"by":11,"text":65},"12700301","Can I forward you to these four resources? (I realize this might sound like a cop-out answer, but these people have summed up the benefits of CSS-in-JS so much better than I…",{"value":67,"source":68,"evidence":69},"Styling via CSS in JS avoids inline style limits and keeps styling in one system","maker",[70,71],{"id":57,"by":11,"text":58},{"id":72,"by":11,"text":73},"12699814","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…",[75,85,89],{"value":76,"source":68,"evidence":77},"JavaScript (ES6 tagged template literals)",[78,82],{"id":79,"by":80,"text":81},"12700470","nmalaguti","For anyone unfamiliar with the syntax used to achieve this, it's called Tagged Template Literals [0] and it's part of ES2015. You have a function that receives the static strings…",{"id":83,"by":11,"text":84},"12699828","That's awesome, I love tachyons! styled-components is on a slightly \"lower\" level in a certain sense, you would build components like yours with styled-components: ``` const…",{"value":86,"source":68,"evidence":87},"React",[88],{"id":83,"by":11,"text":84},{"value":90,"source":68,"evidence":91},"React Native",[92],{"id":93,"by":11,"text":94},"12699893","Yes exactly. It's less about interoperability and more about using the same styling system for_all_ parts of your application. Styling on ReactNative is different enough to have…","unknown",{"praise":97,"objections":114,"requests":142,"questions":147,"alternatives":168},[98],{"value":99,"source":100,"evidence":101},"Good idea and clean approach to styling React","commenter",[102,106,110],{"id":103,"by":104,"text":105},"12700322","andrewvijay","Great one! Would love to do this in my side projects.",{"id":107,"by":108,"text":109},"12703963","gjolund","Very 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.",{"id":111,"by":112,"text":113},"12703687","Raphmedia","Emoji as CSS classes. Never thought of that one...",[115,125,132],{"value":116,"source":100,"evidence":117},"Performance concerns from regenerating styles on every render",[118,122],{"id":119,"by":120,"text":121},"12700211","drinchev","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 `\u003Cstyle>` tag every time a…",{"id":123,"by":104,"text":124},"12700458","Real 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…",{"value":126,"source":100,"evidence":127},"String-based styling API is a step in the wrong direction",[128],{"id":129,"by":130,"text":131},"12700759","andreypopp","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…",{"value":133,"source":100,"evidence":134},"Site renders blank in some browsers",[135,139],{"id":136,"by":137,"text":138},"12700182","retox","Site is a blank page for me.",{"id":140,"by":137,"text":141},"12709470","Apologies, 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…",[143],{"value":144,"source":68,"evidence":145},"Extract static styles into a separate stylesheet for performance",[146],{"id":54,"by":11,"text":55},[148,163],{"value":149,"source":100,"evidence":150},"How pseudo classes and media queries are handled",[151,155,159],{"id":152,"by":153,"text":154},"12699943","elecengin","How do you do pseudo classes like :focus?",{"id":156,"by":157,"text":158},"12700021","Kiro","What about media queries?",{"id":160,"by":161,"text":162},"12700278","hkeide","How is this implemented? And how is the :hover pseudo class implemented? Awesome work by the way!",{"value":164,"source":100,"evidence":165},"Performance impact on large applications",[166,167],{"id":119,"by":120,"text":121},{"id":123,"by":104,"text":124},[169,176,183,189,197,201],{"value":170,"source":100,"evidence":171},"Tachyons",[172],{"id":173,"by":174,"text":175},"12699793","cel1ne","I want to mention my styling library here: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-native-style-tachyons The best part: it gives you a consistent spacing [0] and a consistent font…",{"value":177,"source":100,"evidence":178},"glamor",[179],{"id":180,"by":181,"text":182},"12700135","jeswin","glamor is another option for React apps, if inline styling is your thing. https:\u002F\u002Fgithub.com\u002Fthreepointone\u002Fglamor",{"value":184,"source":100,"evidence":185},"Radium",[186],{"id":187,"by":161,"text":188},"12700402","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…",{"value":190,"source":100,"evidence":191},"CSS Modules",[192,193],{"id":72,"by":11,"text":73},{"id":194,"by":195,"text":196},"12701950","rojobuffalo","Am I an outlier for enjoying plain CSS? I get everything I need and want with css-modules, classnames\u002Fbind, and the occasional inline style.",{"value":198,"source":68,"evidence":199},"Aphrodite",[200],{"id":72,"by":11,"text":73},{"value":202,"source":68,"evidence":203},"JSS",[204],{"id":72,"by":11,"text":73},{"comments":206,"answered":207,"key":208},21,10,[209,210,213],{"id":83,"text":84},{"id":211,"text":212},"12700685","To elaborate on this just a tiny bit, you can use tachyons-js[0] by the amazing jongold to automate even more of this: ``` import tachyons from 'tachyons-js'; const…",{"id":214,"text":215},"12700779","Hey Andrey! :wave: If you reading this are interested in a discussion about this, read this tweet by Andrey and the following replies:…",{"commenters":217,"max_depth":18,"maker_replies":206,"first_comment_mins":35,"lifespan_hours":218},33,78,[220,222,224,226,230,233,236,238,240,244,246,248,251,253,254,257,259,260,262,264,267,270,273,276,279,281,284,288,289,293,294,298,300,302,304,305,306,308,309,311,316,317,320,321,324,326,329,331,334,336,337,339,341,346,349,351,353,354,356,357,359,362,364,366,369,371,374],[173,39,39,221,174,39],"other\u002Fneutral\u002Fnone",[83,39,39,223,11,34],"project\u002Fneutral\u002Fidea",[211,39,39,225,11,34],"project\u002Fneutral\u002Fexecution",[227,39,34,228,229,39],"12699875","project\u002Fcritical\u002Fdesign","al2o3cr",[231,39,39,232,174,39],"12700523","commenter\u002Fneutral\u002Fnone",[234,39,39,221,235,39],"12700191","sotojuan",[237,39,39,221,157,39],"12702664",[239,39,39,221,174,39],"12702712",[241,39,45,242,243,39],"12700621","project\u002Fneutral\u002Fnone","lumannnn",[245,39,45,242,174,39],"12700644",[247,39,39,221,243,39],"12719525",[249,39,39,221,250,39],"12702302","kylemathews",[252,39,39,221,250,39],"12702386",[79,34,45,242,80,39],[255,34,39,221,256,39],"12702542","AgentME",[129,40,45,258,130,39],"project\u002Fmixed\u002Fdesign",[214,40,39,232,11,34],[119,45,34,261,120,39],"project\u002Fcritical\u002Fperformance",[54,45,39,263,11,34],"project\u002Fneutral\u002Fperformance",[265,45,45,263,266,39],"12701257","onetom",[268,45,45,263,269,39],"12705650","bastawhiz",[271,32,39,221,272,39],"12704084","pgt",[274,46,34,228,275,39],"12700336","z3t4",[277,46,39,232,278,39],"12702152","danneu",[280,46,39,232,275,39],"12704220",[282,46,39,232,283,39],"12706804","King-Aaron",[285,286,45,223,287,39],"12699784",6,"ioseph",[72,286,39,223,11,34],[290,286,34,291,292,39],"12699863","project\u002Fcritical\u002Fexecution","madeofpalk",[93,286,39,223,11,34],[295,286,45,296,297,39],"12700313","project\u002Fneutral\u002Fdesign","pluma",[299,286,39,296,11,34],"12700420",[301,286,45,296,297,39],"12706675",[303,286,45,223,287,39],"12700335",[57,286,39,223,11,34],[152,35,45,296,153,39],[307,35,39,296,11,34],"12699991",[180,18,39,221,181,39],[310,18,39,221,11,34],"12700179",[312,313,34,314,315,39],"12700192",9,"project\u002Fcritical\u002Fidea","cfv",[64,313,39,223,11,34],[318,313,39,232,319,39],"12702155","cfvergara",[194,313,45,223,195,39],[322,207,45,296,323,39],"12699899","anilgulecha",[325,207,39,296,11,34],"12699925",[327,207,45,296,328,39],"12700083","pcr0",[330,207,39,296,11,34],"12700113",[103,332,46,333,104,39],11,"project\u002Fpositive\u002Fidea",[335,332,39,242,11,34],"12700334",[123,332,34,261,104,39],[338,332,39,263,11,34],"12700490",[340,332,45,263,104,39],"12701498",[342,343,46,344,345,39],"12700440",12,"maker\u002Fpositive\u002Fnone","himlion",[347,343,39,348,11,34],"12700447","maker\u002Fneutral\u002Fnone",[156,350,45,296,157,39],13,[352,350,39,296,11,34],"12700033",[160,350,45,296,161,39],[355,350,39,296,11,34],"12700348",[187,350,45,296,161,39],[358,350,39,296,11,34],"12700430",[360,350,39,361,161,39],"12700603","commenter\u002Fneutral\u002Fidea",[363,350,39,361,11,34],"12700616",[111,365,46,333,112,39],14,[107,367,46,368,108,39],15,"project\u002Fpositive\u002Fexecution",[136,370,34,291,137,39],16,[372,370,39,373,11,34],"12700216","maker\u002Fneutral\u002Fexecution",[140,370,45,225,137,39],[],[377,382,387,392,396,401],{"id":378,"name":379,"points":380,"category":381},"12721709","I made a Chrome extension that helps battle impulsive procrastination",277,"productivity",{"id":383,"name":384,"points":385,"category":386},"12742395","Hawkpost",275,"security_privacy",{"id":388,"name":389,"points":390,"category":391},"12723281","CSS ICON",250,"dev_tools",{"id":393,"name":394,"points":395,"category":20},"12735665","Swip.js",152,{"id":397,"name":398,"points":399,"category":400},"12703679","Stack Match",136,"web_saas",{"id":402,"name":403,"points":218,"category":381},"12745449","Tdo",false,"v2",{"id":407,"name":5,"line":6,"ai":404,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":408,"top":18,"kw":409,"maker":11,"domain":10,"tier":19,"attempts":39,"strip":410,"url":9,"mix":411,"praise":99,"objection":116,"sub":21},12699767,-0.06,[24,25,26,27,28],"0010030033133100313333010333510530330533",[32,33,34,35],1793990948786]