
Show HN: Polished – A lightweight toolset for writing styles in JavaScript - mxstbr
https://github.com/styled-components/polished
======
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 developer to go "off the playbook" when it comes to enforcing
a consistent styleguide throughout an app.

The idea that "globals" in CSS are bad is counter intuitive to my experience
that globals in CSS encourage consistency

Maybe when you're facebook size and you have many product teams all expected
to produce something that all works together - I can see how the global
namespace would be impossible to manage. For your average website or app? Not
even close. It'll be awhile before you run into the limitations of CSS that
Facebook is running into.

~~~
clay_to_n
>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 developer to go "off the playbook" when it comes to enforcing
a consistent styleguide throughout an app.

You just handle it the same way you handle any shared code. You can keep files
in a file scope, in a package / folder scope, or in the top-level global scope
(in a small app that's totally fine). But removing globals-by-default removes
a lot of "gotcha's" from working with CSS.

~~~
mdahlstrand
What are these gotchas if I may ask? Have you got experience with BEM?

~~~
mistersys
Uhm.. Having to use BEM is a gotcha.

Why don't you write all your applications code in a global scope and just use
a BEM-like naming scheme for your functions?

------
onli
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. But looking at the documentation, this
seems to be a way to write the complete CSS in JS, and then to have it
compiled into CSS. Do I understand that wrong? If not: Why would one want
that?

~~~
mxstbr
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 systems. The language is magnificent, but it was
made in an age where the web consisted of documents.

These days we're building rich, interactive, client-side user interfaces with
the same language, but it's standing in our way. That's why there has been a
lot of exploration, especially in the React ecosystem, around putting styles
in JavaScript.

I'd encourage you to take a look at these magnificent resources which I cannot
do justice in a single comment:

\- The talk that kicked it all off: "CSS in JS" by vjeux[0] (made React
Native, works at Facebook)

\- "Rendering Khan Academys Learn Menu Whereever I Please" [1]

\- "Scale FUD and style components" [2]

and a bunch of other talks and articles if you google "CSS in JS".

[0]: [https://speakerdeck.com/vjeux/react-css-in-
js](https://speakerdeck.com/vjeux/react-css-in-js) [1]:
[https://medium.com/@jdan/rendering-khan-academys-learn-
menu-...](https://medium.com/@jdan/rendering-khan-academys-learn-menu-
wherever-i-please-4b58d4a9432d#.w9nshye05) [2]:
[https://medium.learnreact.com/scale-fud-and-style-
components...](https://medium.learnreact.com/scale-fud-and-style-
components-c0ce87ec9772#.kzjba8lcg)

~~~
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 much :) And with your comment it is
clearer now where this might be useful.

Maybe add a "How to use this" section describing possible workflows to the
Readme?

Also I run into situations where my js produces inline css, and a lodash style
lib for that could be useful. Thanks for the answer, congratz for launching!

~~~
mxstbr
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 ;)

Cheers!

------
tobltobs
The current state of the JS world is getting closer every day to the J2EE
craziness about 10 years ago. As an outsider it was nearly impossible to
understand for what all those frameworks with funky names were required at
all. For an insider every of those new frameworks looked like the solution to
a fundamental CS problem. However, those fundamental CS problems where nothing
else then some shortcomings introduced by the latest framework before.

~~~
lucideer
The J2EE comparison is an interesting one.

I remember attending NodeJS meetups in the local Engine Yard office buildings
around 2012 before there was an extant local NodeJS community, so most of the
attendees were coming from non-JS programming backgrounds. There was the odd
Ruby and PHP dev, but the vast majority of the initial local NodeJS community
here were Java people for some odd reason. I didn't really know much about the
Java community, but my general impression of the Java-backgrounded presenters
demoing NodeJS apps they'd cobbled together with libraries they didn't care to
understand the internals of didn't give me good impressions.

I've never noticed any other strong connections between Java & JS communities
online or elsewhere, this was a just general one-off (but strong) impression
from local meetups.

------
osoba
Wouldn't these two lines of code do the same thing?

    
    
      var addCSS = (css) => { window.document.styleSheets[0].insertRule(css, window.document.styleSheets[0].cssRules.length); };
      addCSS('.x { color: red; width: 5px; }');
    

Test examples (+ another version that can add multiple selectors in the same
line): [https://jsfiddle.net/xkLnj9st/](https://jsfiddle.net/xkLnj9st/)

------
michaelmior
Perhaps Show HN would be more appropriate than "just launched"?

~~~
mxstbr
Good call, will update!

~~~
mxstbr
Updated, thanks!

------
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.

~~~
pygy_
It is replaced by script caching. Loading the styles from JS rather than CSS
is a bit slower, but not much.

~~~
juandazapata
I mean more like the AST behind parsing/rendering the styling rules, not
caching the downloaded file.

~~~
pygy_
I didn't know it was a thing... Some CSS-in-JS libs support isomorphic apps,
but I don't know how well they take advantage of the caching abilities of
browsers.

------
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 CSS-in-JS are they are all poorly architected high-
level abstractions taking a bad solution to a lower level problem.

This feels like a good basis for a higher level tool that doesn't suck.

And like I said - I say that as someone broadly skeptical of the whole topic.

------
rattray
Mods: consider linking to the project homepage,
[https://polished.js.org/](https://polished.js.org/) which appears to give
much more context

~~~
nik-graf
Thanks for the hint. We forgot about it and I just added it.

------
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 concerns and separate files. I like the idea of being able to
use 'mixins' for js components.

------
k__
Also interesting, for people who fear style duplication:
[http://styletron.js.org](http://styletron.js.org)

~~~
pygy_
Automatic atomification of styles meshes badly with conditional at-rules. You
can end up with conditional rules that are ignored.

------
gibbitz
I found that the killer application for Javascript would be to write github
repos for Javascript wrappers for typescript. Seriously, why is CSS as
Javascript objects a thing? Are we so bored with the stack we've been using
that we can only make things interesting by cross compiling everything? It
makes me think of this video: [https://www.destroyallsoftware.com/talks/the-
birth-and-death...](https://www.destroyallsoftware.com/talks/the-birth-and-
death-of-javascript)

~~~
mxstbr
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 also added support for a
bunch of editors, so you don't miss out on syntax highlighting just because of
that.

I'd encourage you to check it out!

[0]: [https://www.styled-components.com](https://www.styled-components.com)

~~~
pygy_
I just discovered [http://typestyle.io/](http://typestyle.io/) 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 lib (j2c).

~~~
roboguy12
+1 for typestyle. My team and I have been using it for the past few weeks in
trying to clean up a rather monolithic css project, and it's been really cool
to work with.

------
jlebrech
i'd like a relative positioning framework for css, to clamp anchors point
relative to each other. that stuff is HARD in CSS

------
hmans
No.

~~~
sctb
We've asked you already to please stop posting unsubstantive comments. We have
to ban accounts that won't.

[https://news.ycombinator.com/newsguidelines.html](https://news.ycombinator.com/newsguidelines.html)

