What does HackerNews think of styled-components?

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Language: TypeScript

#1 in CSS
#4 in React
Definitely styled-components[0].

#257th most starred repository on GitHub, used by millions of developers to ship millions of websites — you've very likely visited websites that are built with it!

[0]: https://github.com/styled-components/styled-components

This is an excellent overview over how styled-components works internally! If you're interested in reading the source yourself, here's the repo: https://github.com/styled-components/styled-components
For view encapsulation I really recommend using https://github.com/styled-components/styled-components We use this in all our react projects and we haven't had any problems since with leakage
I've found styled components to be a nice attempt at bundling styles with the component. Haven't tried that many options though.

It has out of the box support in Atom and scss (like?) syntax.

https://github.com/styled-components/styled-components

https://github.com/styled-components/styled-components

strikes a really nice balance here imo. I use Radium every day and in general it has been easier to maintain and use in comparison to all css but if I could do it again I would go with styled-components.

A few questions for those who might be using component-oriented CSS-in-JS libraries like styled-components [0] or glamorous [1]:

1. Do you still use a global, class-based, cascading CSS framework like Bootstrap, Semantic UI, etc, to provide baseline styling/theming for your pages and components? And if not, do you just essentially roll your own custom CSS framework in JS? Or are there styling frameworks out there that don't cascade and can compose more naturally with component-oriented approaches to styling?

2. If you do use cascading CSS frameworks in addition to something like styled-components, what are your approaches to limiting the unpredictable side-effects of cascading styles, dealing with specificity and load order issues, and ensuring proper style isolation inside your components?

It seems like using a cascading styling framework could defeat much of the purpose of using a well-isolated component-oriented styling library.

Although on the other hand, the alternative of writing all styling on my own seems like a futile exercise in reinventing a vastly inferior wheel, since so much designer talent has been poured into projects like Bootstrap to the point where an amateur designer like myself could never even approach the same level of polish, flexibility and consistency in their designs.

I'm hoping someone here could enlighten me on a better approach that takes the best of both worlds, or at least share a middle ground they're happy with?

[0] https://github.com/styled-components/styled-components

[1] https://github.com/paypal/glamorous

Still SASS via webpack (before that grunt and gulp). Experimenting with styled components and really liking what I'm seeing even though I thought I'd hate it. https://github.com/styled-components/styled-components
There are quite a few. I know some Facebook projects are.

From the top of my mind https://github.com/styled-components/styled-components.

Check out styled-components. It's 100% CSS and it's awesome.

https://github.com/styled-components/styled-components

Edit: for the record there's nothing stopping you from using CSS files with classnames on your tags as usual, but libraries like styled-components allow you to easily scope and collocate your CSS with your components.

The concept of 'semantic classnames', even if propagated by w3.org has caused as much grief as the concept of 'separation of concerns' between HTML & CSS fad. The reason we need semantics in HTML is to make the markup accessible for screen-readers, and no screenreader considers the class name of an element when reading it out. What we instead need are semantic tags like article, section etc. and aria tags like role.

CSS classnames are purely for the developer's benefit. Not the user's. And as developers, forcing ourselves to find semantic meaning for every element we write leads us to component-oriented CSS like BEM. Which is a fine thing, but we can also use purely visual classes - like `bg-red bold border-solid` if it helps (and it does. check out tachyons.io)

The class names of elements in Google's homepage for example reads like 'tsf-p', `oq`, `gsb` etc. I suspect these are machine generated. Same with Facebook. One of the best libraries to do this currently is styled-components (https://github.com/styled-components/styled-components).

Consider reading http://nicolasgallagher.com/about-html-semantics-front-end-a..., http://mrmrs.io/writing/2016/03/24/scalable-css/, and http://johnpolacek.com/2016/06/17/atomic-css-movement/ for reasoned perspectives.