[{"data":1,"prerenderedAt":347},["ShallowReactive",2],{"project-13976707":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":28,"sentiment":29,"stance_mix":30,"scored_comments":18,"aspects":34,"strip":42,"post_text":44,"what":45,"said":73,"maker_in_thread":174,"shape":181,"grid":186,"attempts":308,"same_week":309,"maker_shows":43,"maker_hidden":339,"reader_version":340,"card":341},"13976707","Polished","A lightweight toolset for writing styles in JavaScript","title","Show HN: Polished – A lightweight toolset for writing styles in JavaScript","https:\u002F\u002Fgithub.com\u002Fstyled-components\u002Fpolished","github.com","mxstbr",1490710452,2017,106,48,432,2242,20,"notable","languages","css-in-js utility library","library",[24,25,26,27],"css-in-js","javascript styles","sass mixins","react styling","mixed",-0.207,{"positive":31,"neutral":32,"mixed":33,"critical":32},3,8,1,{"idea":35,"docs":37,"performance":39,"design":40,"execution":41},{"positive":31,"critical":36},6,{"positive":38,"critical":33},0,{"positive":38,"critical":38},{"positive":38,"critical":38},{"positive":38,"critical":33},[33,38,38,38,31,43,38,38,38,31,31,31,31,33,38,38,33,38,33,43,33,38,38,33,38,38,31,31,38,43,38,38,31,38,33,38,38,38,38,38],5,null,{"problem":46,"audience":53,"pricing":44,"motivation":61,"time_to_build":44,"stack":66,"openness":71,"stage":72,"team_size":71},{"value":47,"source":48,"evidence":49},"Lacks Sass-style utility functions and mixins when writing styles in JavaScript","maker",[50],{"id":51,"by":11,"text":52},"13977449","Sorry it isn't clear to you, we could definitely do a better job with the README. If you look on the website[0] you'll see actual examples of usage. (I just announced this…",{"value":54,"source":55,"evidence":56},"Developers writing styles in JavaScript, especially React developers","inferred",[57,60],{"id":58,"by":11,"text":59},"13977308","Yes, this is kinda like the \"lodash\" for writing styles in JavaScript. The main goal with writing styles in JavaScript is to make CSS work in the context of component-based…",{"id":51,"by":11,"text":52},{"value":62,"source":48,"evidence":63},"Make CSS work in component-based systems; no comprehensive Compass-like library exists for JS styles",[64,65],{"id":58,"by":11,"text":59},{"id":51,"by":11,"text":52},[67],{"value":68,"source":55,"evidence":69},"JavaScript",[70],{"id":58,"by":11,"text":59},"unknown","launched",{"praise":74,"objections":90,"requests":119,"questions":124,"alternatives":142},[75,83],{"value":76,"source":77,"evidence":78},"Fills a missing piece in the CSS-in-JS ecosystem","commenter",[79],{"id":80,"by":81,"text":82},"13977575","pygy_","This was a big missing piece of code in the CSS-in-JS world. Thanks for providing the stdlib (following SASS is definitely a great approach).",{"value":84,"source":77,"evidence":85},"Well thought-out low-level tool",[86],{"id":87,"by":88,"text":89},"13978493","abritinthebay","I'm a massive CSS-in-JS skeptic but this is a very nicely thought out low-level tool for that stack. It's basically a JS version of SASS mixins (kinda). Most of my objections to…",[91,101,108],{"value":92,"source":77,"evidence":93},"Color and shorthand utilities duplicate existing libraries or plain object syntax",[94,98],{"id":95,"by":96,"text":97},"13977383","mbrookes","> this seems to be a way to write the complete CSS in JS, and then to have it compiled into CSS. That isn't what this is although I also had to poke around the source code to…",{"id":99,"by":96,"text":100},"13977985","Thanks for the clarification \"SASS-like mixins for CSS in JS\" sums it up. I did look at the docs, but that doesn't have an explanation of what value this is trying to offer…",{"value":102,"source":77,"evidence":103},"CSS-in-JS adds style duplication and weakens consistency",[104],{"id":105,"by":106,"text":107},"13977649","debaserab2","This tool seems useful if you buy into the philosophy, but I'm just not sold yet - component based styling leads to a lot of style duplication and makes it very easy for a…",{"value":109,"source":77,"evidence":110},"Mixing styles into JavaScript is unappealing",[111,115],{"id":112,"by":113,"text":114},"13977499","onli","The idea of writing CSS in JS is horrible to me. But I'm coming from a completely different developer camp, and find the vjeux talk completely unconvincing, so that does not mean…",{"id":116,"by":117,"text":118},"13977767","analogmemory","I'm coming around slowly but I still have a hard time with css being embedded in JS components. I have used SCSS for so long I am used to style and function being separate…",[120],{"value":121,"source":77,"evidence":122},"Add a How to use this section and better README",[123],{"id":112,"by":113,"text":114},[125,132],{"value":126,"source":77,"evidence":127},"What the project is and why use it over CSS",[128,131],{"id":129,"by":113,"text":130},"13977088","I'm not 100% what this is exactly... Care to clear it up a bit? At first I though this is for those situations where you find yourself urged to modify the css in your javascript.…",{"id":95,"by":96,"text":97},{"value":133,"source":77,"evidence":134},"Effect on browser style caching",[135,139],{"id":136,"by":137,"text":138},"13977891","juandazapata","Can somebody explain how this approach affects the style caching by the browser? It seems that this will just throw away all the caching optimizations built around that.",{"id":140,"by":81,"text":141},"13978739","It is replaced by script caching. Loading the styles from JS rather than CSS is a bit slower, but not much.",[143,149,156,162,169],{"value":144,"source":48,"evidence":145},"styled-components",[146],{"id":147,"by":11,"text":148},"13977243","That's exactly why we made styled-components![0] I really dislike writing styles as JavaScript objects, so styled-components let's you write actual CSS in JavaScript. We have…",{"value":150,"source":77,"evidence":151},"Styletron",[152],{"id":153,"by":154,"text":155},"13978252","k__","Also interesting, for people who fear style duplication: http:\u002F\u002Fstyletron.js.org",{"value":157,"source":77,"evidence":158},"typestyle",[159],{"id":160,"by":81,"text":161},"13977635","I just discovered http:\u002F\u002Ftypestyle.io\u002F which should make it much easier to write CSS in JS... Auto-completion everywhere... I'll probably steal the approach for my own CSS-in-JS…",{"value":163,"source":77,"evidence":164},"Sass\u002FSCSS with BEM",[165,168],{"id":166,"by":106,"text":167},"13980998","What is the advantage of bringing your styling into javascript to do that? I do the exact same thing (I don't use BEM either) by isolating specific component styling to it's own…",{"id":105,"by":106,"text":107},{"value":170,"source":77,"evidence":171},"color.js and brehaut color-js",[172,173],{"id":95,"by":96,"text":97},{"id":99,"by":96,"text":100},{"comments":36,"answered":43,"key":175},[176,177,180],{"id":58,"text":59},{"id":178,"text":179},"13977538","Thanks for the kind words, totally understand that this isn't for everybody. Definitely will work on improving the README, just needed to finally get this out of the door ;)…",{"id":51,"text":52},{"commenters":182,"max_depth":183,"maker_replies":36,"first_comment_mins":184,"lifespan_hours":185},30,4,44,35,[187,189,192,195,198,202,206,210,213,215,217,218,221,223,225,228,231,234,236,238,240,242,243,244,245,246,251,254,257,260,263,265,267,268,271,273,274,278,281,283,285,288,292,293,294,297,301,305],[105,38,33,188,106,38],"project\u002Fcritical\u002Fidea",[190,38,38,191,81,38],"13977674","commenter\u002Fneutral\u002Fidea",[193,38,38,191,194,38],"13977780","clay_to_n",[196,38,38,191,197,38],"13978495","mdahlstrand",[199,38,38,200,201,38],"13980590","commenter\u002Fneutral\u002Fnone","mistersys",[203,38,31,204,205,38],"13978074","project\u002Fneutral\u002Fidea","prezjordan",[207,38,43,208,209,38],"13978173","project\u002Fpositive\u002Fidea","Rezo",[211,38,38,200,212,38],"13978704","Swizec",[214,38,38,200,106,38],"13978904",[216,38,38,200,201,38],"13980670",[166,38,31,204,106,38],[219,38,38,200,220,38],"13983361","ryanar",[222,38,31,204,201,38],"13992095",[129,33,31,224,113,38],"project\u002Fneutral\u002Fdocs",[226,33,31,204,227,38],"13977295","kej",[229,33,33,188,230,38],"13978395","scaryclam",[232,33,38,200,233,38],"13980579","nilliams",[235,33,38,200,227,38],"13980736",[58,33,38,237,11,33],"maker\u002Fneutral\u002Fidea",[112,33,33,239,113,38],"project\u002Fcritical\u002Fdocs",[178,33,38,241,11,33],"maker\u002Fneutral\u002Fdocs",[95,33,33,188,96,38],[51,33,38,237,11,33],[80,33,43,208,81,38],[99,33,33,188,96,38],[247,248,38,249,250,38],"13977549",2,"other\u002Fneutral\u002Fnone","tobltobs",[252,248,38,249,253,38],"13977792","lucideer",[255,31,33,188,256,38],"13978521","osoba",[258,183,38,249,259,38],"13977179","michaelmior",[261,183,38,262,11,33],"13977316","maker\u002Fneutral\u002Fnone",[264,183,38,262,11,33],"13977486",[136,43,31,266,137,38],"project\u002Fneutral\u002Fperformance",[140,43,31,266,81,38],[269,43,38,270,137,38],"13979803","commenter\u002Fneutral\u002Fperformance",[272,43,31,266,81,38],"13980090",[87,36,43,208,88,38],[275,276,38,249,277,38],"13977584",7,"rattray",[279,276,38,249,280,38],"13977623","nik-graf",[116,32,31,282,117,38],"project\u002Fmixed\u002Fdesign",[153,284,38,249,154,38],9,[286,284,33,287,81,38],"13978751","project\u002Fcritical\u002Fexecution",[289,290,33,188,291,38],"13977201",10,"gibbitz",[147,290,38,237,11,33],[160,290,38,249,81,38],[295,290,38,249,296,38],"13978613","roboguy12",[298,299,38,249,300,38],"13980124",11,"jlebrech",[302,303,38,249,304,38],"13977427",12,"hmans",[306,303,38,249,307,38],"13978535","sctb",[],[310,315,320,324,329,334],{"id":311,"name":312,"points":313,"category":314},"13977982","Kite",553,"dev_tools",{"id":316,"name":317,"points":318,"category":319},"13960214","Colormind",399,"creative",{"id":321,"name":322,"points":323,"category":314},"13958300","SpaceVim-like Vim distribution (name not stated; maker calls it space-vim)",175,{"id":325,"name":326,"points":327,"category":328},"13940594","Ctxt.io",174,"productivity",{"id":330,"name":331,"points":332,"category":333},"13978271","SpreadsheetDB",144,"data",{"id":335,"name":336,"points":337,"category":338},"13984951","Construct 3",122,"games",false,"v2",{"id":342,"name":5,"line":6,"ai":339,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":343,"top":18,"kw":344,"maker":11,"domain":10,"tier":19,"attempts":38,"strip":345,"url":9,"mix":346,"praise":76,"objection":92,"sub":21},13976707,-0.21,[24,25,26,27],"1000350003333100101510010033050030100000",[31,32,33,32],1793990957088]